/* Setup + Dashboard pages — matches academy navy/gold theme */
.setup-page,
.dashboard-page {
  background: #06142b;
  color: #f6ebda;
  min-height: 100vh;
}

.setup-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 22px;
  border-bottom: 1px solid rgba(233, 196, 120, 0.18);
}

.academy-inline-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: center;
}

.academy-inline-nav .academy-nav-link.is-active {
  color: #fff0c9 !important;
  text-decoration: underline !important;
  text-underline-offset: 6px;
}

.setup-main,
.dashboard-main {
  padding: 28px 18px 80px;
  max-width: 1100px;
  margin: 0 auto;
}

.setup-hero,
.dashboard-hero {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 18px;
  margin-bottom: 22px;
}

.setup-hero h1,
.dashboard-hero h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: #fff6e4;
  margin: 8px 0 10px;
}

.setup-quote,
.fitai-bubble {
  background: rgba(10, 24, 48, 0.82);
  border: 1px solid rgba(233, 196, 120, 0.45);
  border-radius: 16px;
  padding: 16px 18px;
  color: #f3e0b3;
}

.setup-quote span {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

.setup-form {
  display: grid;
  gap: 14px;
}

.setup-card,
.dash-card,
.metric-card {
  background: #f7efe2;
  color: #10233f;
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.setup-card h2,
.dash-card h2,
.metric-card h3 {
  margin: 0 0 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

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

.choice-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(16, 35, 63, 0.18);
  background: #fffaf1;
  cursor: pointer;
  text-align: center;
  font-size: 13px;
  font-weight: 650;
}

.choice-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice-pill.is-selected {
  border-color: #c4922f;
  box-shadow: 0 0 0 2px rgba(196, 146, 47, 0.25);
  background: #fff4d8;
  color: #0b1d3a;
}

.setup-hint {
  margin: 0 0 10px;
  color: rgba(16, 35, 63, 0.7);
  font-size: 13px;
}

.safety-toggle {
  display: flex;
  gap: 12px;
  align-items: center;
  font-weight: 600;
  cursor: pointer;
}

.safety-toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.safety-toggle-switch {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  position: relative;
  border-radius: 6px;
  background: #fff;
  box-shadow: inset 0 0 0 2px #9aa1b0;
  transition: background 160ms ease, box-shadow 160ms ease;
}

.safety-toggle-switch::after {
  content: "";
  width: 6px;
  height: 11px;
  position: absolute;
  top: 2px;
  left: 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 120ms ease;
}

.safety-toggle-input:checked + .safety-toggle-switch {
  background: #10233f;
  box-shadow: inset 0 0 0 2px #10233f;
}

.safety-toggle-input:checked + .safety-toggle-switch::after {
  opacity: 1;
}

.safety-toggle-input:focus-visible + .safety-toggle-switch {
  box-shadow: inset 0 0 0 2px #10233f, 0 0 0 2px rgba(16, 35, 63, 0.35);
}

.safety-warn-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 20, 38, 0.55);
}

.safety-warn-overlay[hidden] {
  display: none;
}

.safety-warn-card {
  width: 100%;
  max-width: 380px;
  background: #fffdf8;
  border: 1px solid rgba(16, 35, 63, 0.18);
  border-radius: 14px;
  padding: 22px 22px 18px;
  box-shadow: 0 20px 50px rgba(10, 20, 38, 0.35);
}

.safety-warn-card h3 {
  margin: 0 0 10px;
  font-size: 18px;
  color: #10233f;
}

.safety-warn-card p {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #4a4130;
}

.safety-warn-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.safety-warn-back,
.safety-warn-continue {
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
}

.safety-warn-back {
  background: transparent;
  border-color: rgba(16, 35, 63, 0.28);
  color: #10233f;
}

.safety-warn-continue {
  background: #10233f;
  color: #f2e2bb;
}

.setup-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(38, 72, 120, 0.22);
  background: #e8f1ff;
  color: #1a3a6b;
  font-size: 13px;
}

.setup-alert-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  padding-top: 1px;
  color: #3567b0;
}

.setup-alert-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

.setup-actions {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-top: 8px;
}

.setup-save-btn {
  min-width: min(420px, 100%);
  background: linear-gradient(180deg, #e2b45a, #b8882f) !important;
  color: #1a1204 !important;
  border: none !important;
}

.setup-guide {
  margin-top: 22px;
  display: flex;
  gap: 14px;
  align-items: center;
}

.setup-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 22px 28px;
  color: rgba(247, 228, 191, 0.72);
  font-size: 12px;
  border-top: 1px solid rgba(233, 196, 120, 0.12);
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.metric-value {
  font-size: 2rem;
  margin: 0;
  color: #0b1d3a;
  font-family: Georgia, "Times New Roman", serif;
}

.metric-focus {
  font-size: 1.25rem;
}

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

.bar-chart {
  display: flex;
  align-items: end;
  gap: 8px;
  min-height: 160px;
}

.bar-col {
  flex: 1;
  display: grid;
  grid-template-rows: 1fr auto auto;
  justify-items: center;
  gap: 4px;
  min-height: 150px;
}

.bar-fill {
  width: 70%;
  min-height: 4px;
  align-self: end;
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, #e2b45a, #8d6420);
}

.bar-col span,
.bar-col strong {
  font-size: 11px;
}

.session-list,
.dist-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.session-list li,
.dist-list li {
  display: grid;
  gap: 2px;
}

.session-list span,
.session-list small {
  color: rgba(16, 35, 63, 0.7);
  font-size: 12px;
}

.dist-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(16, 35, 63, 0.1);
  overflow: hidden;
}

.dist-track span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #c4922f, #e2b45a);
}

.dist-label {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 650;
}

.dash-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
}

.next-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 6px;
}

@media (max-width: 900px) {
  .setup-hero,
  .dashboard-hero,
  .dashboard-grid,
  .metric-row {
    grid-template-columns: 1fr;
  }
  .academy-inline-nav {
    display: none;
  }
}


/* ---- Magical Dark Academia tokens (Dashboard) ---- */
.mda-theme,
.dashboard-page {
  --bg-deep: #050C1C;
  --bg-navy: #0A1128;
  --surface-cream: #FDF8EE;
  --accent-gold: #D4AF37;
  --gold-soft: #E8C86A;
  --text-on-dark-heading: #D4AF37;
  --text-on-dark-body: #F5F0E6;
  --text-on-cream: #0A1128;
  --text-muted: #6B7280;
  --success-calm: #22A06B;
  --border-gold: rgba(212, 175, 55, 0.45);
  --radius-card: 20px;
  --radius-tile: 14px;
  --radius-pill: 999px;
  background: var(--bg-deep);
  color: var(--text-on-dark-body);
}

.dash-brandbar {
  display: flex;
  align-items: center;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border-gold);
  background: rgba(10, 17, 40, 0.92);
}

.dashboard-page .academy-inline-nav {
  display: none !important;
}

.dashboard-hero-bodymap {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 20px;
  align-items: stretch;
  margin-bottom: 24px;
}

.dash-hero-copy h1 {
  color: var(--text-on-dark-heading);
  font-family: Georgia, "Times New Roman", serif;
}

.body-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  margin-top: 16px;
  font-size: 13px;
  color: rgba(245, 240, 230, 0.78);
}

.legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  display: inline-block;
  margin-right: 4px;
  vertical-align: middle;
  border: 1px solid rgba(10, 17, 40, 0.25);
}

.legend-swatch.is-trained { background: var(--success-calm); }
.legend-swatch.is-rest { background: #E28B3A; }

.rabbit-body-map-card {
  background: var(--surface-cream);
  color: var(--text-on-cream);
  border-radius: var(--radius-card);
  padding: 20px 22px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  border: 1px solid var(--border-gold);
  display: grid;
  justify-items: center;
  gap: 12px;
}

.body-map-kicker {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(10, 17, 40, 0.55);
  justify-self: start;
}

.rabbit-body-map {
  width: min(240px, 100%);
  height: auto;
}

.rabbit-body-map .ear {
  fill: #E8D9C0;
  stroke: rgba(10, 17, 40, 0.2);
  stroke-width: 1.2;
}

.rabbit-body-map .nose {
  fill: #0A1128;
}

.rabbit-body-map .body-part {
  stroke: rgba(10, 17, 40, 0.28);
  stroke-width: 1.4;
  transition: fill 0.25s ease, opacity 0.25s ease;
}

.rabbit-body-map .body-part.is-rest {
  fill: #E28B3A;
  opacity: 0.92;
}

.rabbit-body-map .body-part.is-trained {
  fill: var(--success-calm);
  opacity: 1;
}

.rabbit-body-map .body-part.aura.is-rest {
  opacity: 0.18;
}

.rabbit-body-map .body-part.aura.is-trained {
  opacity: 0.85;
}

.body-map-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.body-map-tags li {
  font-size: 11px;
  font-weight: 700;
  text-transform: capitalize;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(10, 17, 40, 0.12);
  background: #fffaf1;
}

.body-map-tags li.is-trained {
  background: rgba(34, 160, 107, 0.16);
  color: #0f6b45;
  border-color: rgba(34, 160, 107, 0.35);
}

.body-map-tags li.is-rest {
  background: rgba(226, 139, 58, 0.14);
  color: #8a4a12;
}

.dashboard-page .metric-card,
.dashboard-page .dash-card {
  background: var(--surface-cream);
  color: var(--text-on-cream);
  border-radius: var(--radius-card);
  padding: 20px 22px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(212, 175, 55, 0.22);
}

.dashboard-page .metric-value {
  font-size: 26px;
  color: var(--text-on-cream);
}

.dashboard-page .dash-cta,
.dashboard-page .academy-primary-button.dash-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  background: linear-gradient(180deg, var(--gold-soft), var(--accent-gold));
  color: #1a1204 !important;
  font-weight: 700;
  border: none;
  text-decoration: none;
}

@media (max-width: 900px) {
  .dashboard-hero-bodymap {
    grid-template-columns: 1fr;
  }
}

/* ---- UX ship order 2 atmosphere ---- */
.dashboard-page {
  --bg-deep: #050C1C;
  --bg-navy: #0A1128;
  --surface-cream: #FDF8EE;
  --accent-gold: #D4AF37;
  --gold-soft: #E8C86A;
  --radius-card: 20px;
  --radius-tile: 14px;
  --radius-pill: 999px;
  position: relative;
  background: var(--bg-deep);
}

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

.dash-atmosphere img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(14px) saturate(0.85) brightness(0.38);
  transform: scale(1.08);
}

.dash-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 12, 28, 0.55), rgba(5, 12, 28, 0.78)),
    radial-gradient(ellipse at 50% 20%, rgba(212, 175, 55, 0.12), transparent 55%);
}

.dashboard-page > .dash-brandbar,
.dashboard-page > .dashboard-main,
.dashboard-page > .setup-footer {
  position: relative;
  z-index: 1;
}

.dash-brandbar {
  background: rgba(10, 17, 40, 0.72);
  backdrop-filter: blur(8px);
}

.dash-float-card,
.dashboard-page .metric-card.dash-float-card,
.dashboard-page .dash-card.dash-float-card,
.dashboard-page .rabbit-body-map-card,
.dashboard-page .dash-hero-copy.dash-float-card {
  background: var(--surface-cream);
  color: #0A1128;
  border-radius: 20px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(212, 175, 55, 0.28);
}

.dash-hero-copy.dash-float-card {
  padding: 22px 24px;
}

.dash-hero-copy.dash-float-card h1 {
  color: #0A1128;
}

.dash-hero-copy.dash-float-card .academy-kicker,
.dash-hero-copy.dash-float-card > p {
  color: rgba(10, 17, 40, 0.78);
}

.dashboard-page .body-map-legend {
  color: rgba(10, 17, 40, 0.7);
}

.legend-swatch {
  border-radius: 999px;
}

.rabbit-body-map .ear {
  fill: #E8D9C0;
  stroke: rgba(212, 175, 55, 0.55);
  stroke-width: 1.1;
}

.rabbit-body-map .body-part {
  stroke: rgba(212, 175, 55, 0.65);
  stroke-width: 1.15;
}

.rabbit-body-map .body-part.is-rest { fill: #E28B3A; }
.rabbit-body-map .body-part.is-trained { fill: #22A06B; }

.body-map-tags-critical {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.body-map-tags-critical li {
  font-size: 11px;
  font-weight: 700;
  text-transform: capitalize;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(10, 17, 40, 0.12);
  background: #fffaf1;
}

.body-map-tags-critical li.is-trained {
  background: rgba(34, 160, 107, 0.16);
  color: #0f6b45;
  border-color: rgba(34, 160, 107, 0.35);
}

.body-map-tags-critical li.is-rest {
  background: rgba(226, 139, 58, 0.14);
  color: #8a4a12;
}

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

.chart-quiet {
  margin: 8px 0 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(10, 17, 40, 0.06);
  color: rgba(10, 17, 40, 0.72);
  font-size: 14px;
  font-weight: 600;
}

.next-inline {
  margin: 0 0 8px;
  color: rgba(10, 17, 40, 0.78);
  font-size: 14px;
}

.dash-detail {
  margin-top: 14px;
  border-top: 1px solid rgba(10, 17, 40, 0.08);
  padding-top: 10px;
}

.dash-detail summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: rgba(10, 17, 40, 0.65);
  list-style: none;
}

.dash-detail summary::-webkit-details-marker { display: none; }

.dash-detail[open] summary {
  margin-bottom: 10px;
  color: #0A1128;
}

.dashboard-page .dash-cta {
  border-radius: 999px;
}

@media (max-width: 900px) {
  .dashboard-grid-trim { grid-template-columns: 1fr; }
}

/* ---- UX re-check: Progress shell + atmosphere + CTA ---- */
.dashboard-main.page-width {
  max-width: 1040px;
  padding-left: 28px;
  padding-right: 28px;
}

.dashboard-hero-bodymap {
  display: block;
  margin-bottom: 22px;
}

.dash-progress-card {
  display: grid;
  grid-template-columns: 1.15fr 0.95fr;
  gap: 8px 28px;
  align-items: center;
  padding: 22px 26px !important;
  background: rgba(253, 248, 238, 0.86) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dash-progress-copy h1 {
  margin: 6px 0 10px;
  color: #0A1128;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 2.8vw, 2.35rem);
}

.dash-progress-copy .academy-kicker,
.dash-progress-copy > p {
  color: rgba(10, 17, 40, 0.78);
}

.dash-progress-map {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.dash-float-card,
.dashboard-page .metric-card.dash-float-card,
.dashboard-page .dash-card.dash-float-card {
  background: rgba(253, 248, 238, 0.86) !important;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.dash-atmosphere img {
  filter: blur(10px) saturate(0.9) brightness(0.42);
  transform: scale(1.06);
}

.dash-atmosphere::after {
  background:
    linear-gradient(180deg, rgba(5, 12, 28, 0.42), rgba(5, 12, 28, 0.68)),
    radial-gradient(ellipse at 50% 18%, rgba(212, 175, 55, 0.14), transparent 58%);
}

.rabbit-body-map .body-part {
  stroke: rgba(212, 175, 55, 0.55);
  stroke-width: 1.05;
}

.rabbit-body-map .part-glutes.is-rest {
  fill: #E8A86A;
  opacity: 0.72;
}

.rabbit-body-map .part-glutes.is-trained {
  opacity: 0.92;
}

.bar-chart.is-quiet {
  min-height: 120px;
  margin-top: 10px;
  opacity: 0.92;
}

.chart-quiet {
  margin: 4px 0 6px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(10, 17, 40, 0.07);
  color: rgba(10, 17, 40, 0.78);
  font-size: 14px;
  font-weight: 700;
}

.fitai-card .dash-actions {
  margin-top: 14px;
}

.fitai-card .dash-cta {
  min-width: min(260px, 100%);
  padding: 12px 22px;
  font-size: 15px;
}

.next-inline { display: none !important; }

@media (max-width: 900px) {
  .dash-progress-card {
    grid-template-columns: 1fr;
  }
}

.fitai-guide-rabbit {
  display: block;
  width: min(180px, 42%);
  height: auto;
  margin: 0 auto 12px;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,0.35));
}


/* FitAI guide rabbit (existing indoor asset) — grounded beside copy */
.fitai-card-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 18px;
  align-items: end;
}
.fitai-card-mascot {
  position: relative;
  width: clamp(110px, 16vw, 168px);
  align-self: end;
  justify-self: end;
  line-height: 0;
}
.fitai-dash-rabbit {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 14px 10px rgba(0, 0, 0, 0.35));
  opacity: 0.96;
}
.fitai-card-mascot::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 58%;
  height: 10%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}
@media (max-width: 700px) {
  .fitai-card-layout {
    grid-template-columns: 1fr;
  }
  .fitai-card-mascot {
    justify-self: center;
    width: 120px;
    order: -1;
    opacity: 0.9;
  }
}

.setup-topbar-lean {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.setup-topbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ---- Setup page: academy journey layout ---- */
.setup-page {
  --setup-ink: #07162f;
  --setup-cream: #fcf7ea;
  --setup-gold: #d9a83f;
  --setup-footer-h: 72px;
  position: relative;
  isolation: isolate;
  background: #06142b;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex !important;
  flex-direction: column !important;
}

html:has(body.setup-page) {
  height: 100%;
}

.setup-page > .setup-topbar {
  flex-shrink: 0;
}

.setup-page > .setup-main {
  flex: 0 1 auto;
  width: 100%;
  margin-top: auto;
  margin-bottom: auto;
}

.setup-page > .footer.academy-footer {
  flex-shrink: 0;
  width: 100%;
  position: relative;
  z-index: 40;
}

@media (min-height: 900px) {
  .setup-page > .footer.academy-footer {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: 0 !important;
  }

  .setup-page > .setup-main {
    padding-bottom: calc(var(--setup-footer-h) + 28px) !important;
  }
}

@media (min-height: 1200px) {
  .setup-page {
    --setup-footer-h: 80px;
  }

  .setup-page > .setup-main.page-width {
    padding-top: calc(72px + clamp(22px, 3vh, 52px));
    padding-bottom: calc(var(--setup-footer-h) + clamp(28px, 4vh, 64px)) !important;
  }
}

.setup-page::before,
.setup-page::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.setup-page::before {
  z-index: -2;
  background: url("../images/indoor/hall-background-desktop-no-bike.png") center / cover no-repeat;
}

.setup-page::after {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(4, 14, 31, 0.92) 0%, rgba(4, 14, 31, 0.76) 50%, rgba(4, 14, 31, 0.4) 100%),
    linear-gradient(180deg, rgba(4, 14, 31, 0.38), rgba(4, 14, 31, 0.74));
}

.setup-page .setup-topbar {
  z-index: 100;
  min-height: 72px;
  padding: 0 clamp(22px, 4.4vw, 72px);
  background: rgba(5, 17, 38, 0.82);
  border-bottom-color: rgba(225, 176, 69, 0.34);
  backdrop-filter: blur(12px);
}

.setup-page .setup-topbar-actions {
  gap: clamp(14px, 2.2vw, 31px);
  margin-left: auto;
}

.setup-page .academy-nav-link {
  position: relative;
  color: rgba(255, 246, 225, 0.9);
  font-size: 12px;
  text-decoration: none;
}

.setup-page .academy-nav-link.is-active {
  color: #f8d576 !important;
  text-decoration: none !important;
}

.setup-page .academy-nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -13px;
  width: 4px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #f7cf67;
  box-shadow: 0 0 8px #f7cf67;
}

.setup-main.page-width {
  position: relative;
  z-index: 0;
  max-width: 1210px;
  padding: calc(72px + clamp(18px, 3vw, 36px)) clamp(16px, 4vw, 54px) 34px;
}

.setup-hero {
  display: block;
  margin: 0 0 15px;
  max-width: 700px;
}

.setup-hero .academy-kicker {
  margin: 0 0 5px;
  color: #f2c95c;
  font-size: 10px;
  letter-spacing: 0.2em;
}

.setup-hero h1 {
  margin: 0 0 8px;
  color: #fff6e4;
  font-size: clamp(2.1rem, 3.8vw, 3.45rem);
  line-height: 0.98;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}

.setup-hero > div > p:last-child {
  max-width: 650px;
  margin: 0;
  color: rgba(255, 246, 225, 0.92);
  font-size: 14px;
  line-height: 1.45;
}

.setup-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(250px, 0.72fr);
  align-items: start;
  gap: clamp(18px, 3vw, 42px);
}

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

.setup-page .setup-card {
  min-width: 0;
  padding: 13px 15px 14px;
  border: 1px solid rgba(222, 176, 78, 0.42);
  border-radius: 12px;
  background: rgba(255, 250, 239, 0.96);
  color: var(--setup-ink);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

.setup-page .setup-card h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 2px;
  color: #0c1e3d;
  font-size: 15px;
  line-height: 1.2;
}

.setup-card-icon {
  display: inline-grid;
  width: 20px;
  place-items: center;
  color: #0c264a;
  font-family: Georgia, serif;
  font-size: 19px;
}

.setup-card-icon img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.setup-page .setup-hint {
  margin: 0 0 8px;
  color: rgba(12, 30, 61, 0.66);
  font-size: 9px;
  line-height: 1.3;
}

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

.setup-page .choice-pill {
  position: relative;
  min-width: 0;
  min-height: 28px;
  padding: 5px 6px;
  border-radius: 6px;
  border-color: rgba(10, 31, 62, 0.14);
  background: #fffdf8;
  color: #0d2343;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.18;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.setup-page .choice-pill:hover {
  transform: translateY(-1px);
  border-color: rgba(188, 134, 28, 0.6);
}

.setup-page .choice-pill.is-selected {
  border-color: #c99223;
  background: #fff0bf;
  box-shadow: inset 0 0 0 1px rgba(201, 146, 35, 0.45), 0 1px 6px rgba(134, 85, 5, 0.16);
}

.setup-page .choice-pill.is-selected::after {
  content: "✓";
  position: absolute;
  top: 3px;
  right: 4px;
  color: #d49114;
  font-size: 8px;
}

.setup-page .choice-pill--stacked {
  min-height: 39px;
}

.choice-pill--stacked small,
.setting-choice small {
  display: block;
  margin-top: 2px;
  color: rgba(12, 30, 61, 0.55);
  font-size: 8px;
  font-weight: 500;
}

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

.setup-page .choice-grid--baseline .choice-pill:nth-last-child(2) {
  grid-column: 1 / 2;
}

.setup-page .choice-grid--baseline .choice-pill:last-child {
  grid-column: 2 / 3;
}

.setup-page .choice-grid--activities,
.setup-page .choice-grid--goal {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.setup-page .choice-pill--activity {
  justify-content: flex-start;
  gap: 5px;
  text-align: left;
}

.choice-icon {
  color: #132c50;
  font-size: 13px;
  line-height: 1;
}

.choice-icon img {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.setup-page .choice-grid--setting {
  gap: 7px;
}

.setup-page .setting-choice {
  min-height: 73px;
  overflow: hidden;
  color: #fff9e9;
  border-color: rgba(255, 240, 196, 0.25);
  background-color: #132c50;
  background-image: linear-gradient(rgba(4, 16, 37, 0.36), rgba(4, 16, 37, 0.5)), url("../images/indoor/hall-background-desktop-no-bike.png");
  background-size: auto 150px;
}

.setup-page .setting-choice--indoor { background-position: left 24%; }
.setup-page .setting-choice--both { background-position: center 40%; }
.setup-page .setting-choice--outdoor { background-position: right 23%; }

.setup-page .setting-choice small {
  margin-top: 8px;
  color: #fff2c3;
  font-size: 15px;
}

.setup-page .setting-choice.is-selected {
  color: #fff9e9;
  border-color: #e8b643;
  background-color: #132c50;
  box-shadow: inset 0 0 0 2px rgba(242, 198, 79, 0.9), 0 2px 10px rgba(0, 0, 0, 0.28);
}

.setup-page .setting-choice.is-selected::after {
  top: auto;
  bottom: 5px;
  right: 6px;
  color: #ffe7a1;
}

.setup-page .setup-card--safety {
  display: flex;
  flex-direction: column;
}

.setup-page .safety-toggle {
  gap: 10px;
  align-items: center;
  color: #172c4b;
  font-size: 9px;
  line-height: 1.35;
}

.setup-page .safety-toggle-switch {
  width: 20px;
  height: 20px;
}

.setup-page .safety-toggle-switch::after {
  width: 5px;
  height: 10px;
  top: 2px;
  left: 6px;
}

.setup-page .setup-alert {
  margin-top: 10px;
  padding: 8px 9px;
  border-radius: 7px;
  background: #e6f0ff;
  color: #264878;
  font-size: 8px;
  line-height: 1.35;
}

.setup-page .setup-alert-icon svg {
  width: 11px;
  height: 11px;
}

.setup-page .setup-actions {
  grid-column: 1 / -1;
  margin-top: 2px;
}

.setup-page .setup-save-btn {
  min-width: min(345px, 100%);
  min-height: 37px;
  border-radius: 999px !important;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.27);
  font-size: 11px;
}

.setup-page .setup-actions .setup-hint {
  margin: 0;
  color: rgba(255, 244, 216, 0.74);
}

.setup-rail {
  display: grid;
  gap: 16px;
  padding-top: 2px;
}

.setup-page .setup-quote,
.setup-page .fitai-bubble,
.setup-page .academy-values {
  border: 1px solid rgba(226, 178, 77, 0.45);
  background: rgba(5, 22, 48, 0.78);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(5px);
}

.setup-page .setup-quote {
  min-height: 86px;
  padding: 15px 18px;
  border-radius: 14px;
  text-align: center;
}

.setup-page .setup-quote p {
  margin: 0;
  color: #e9c568;
  font-family: Georgia, serif;
  font-size: 14px;
  font-style: italic;
  line-height: 1.35;
}

.setup-page .setup-quote span {
  margin-top: 7px;
  color: rgba(255, 239, 194, 0.82);
  font-size: 8px;
}

.setup-page .setup-guide {
  position: relative;
  display: block;
  min-height: 274px;
  margin: 0;
  overflow: hidden;
}

.setup-page .setup-guide img {
  position: absolute;
  right: -20px;
  bottom: -6px;
  width: min(250px, 82%);
  height: auto;
  filter: drop-shadow(0 12px 13px rgba(0, 0, 0, 0.42));
}

.setup-page .fitai-bubble {
  position: relative;
  z-index: 1;
  width: 76%;
  margin: 20px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
}

.setup-page .fitai-bubble strong {
  color: #efc65b;
  font-size: 9px;
  letter-spacing: 0.09em;
}

.setup-page .fitai-bubble p {
  margin: 6px 0 0;
  color: #fff4d6;
  font-size: 10px;
  line-height: 1.4;
}

.academy-values {
  border-radius: 14px;
  padding: 13px 15px 15px;
  text-align: center;
}

.academy-values > p {
  margin: 0 0 12px;
  color: #e9c568;
  font-size: 8px;
  letter-spacing: 0.12em;
}

.academy-values > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.academy-values span {
  display: grid;
  gap: 3px;
  color: #f7efd9;
  font-size: 8px;
}

.academy-values b {
  color: #eac75e;
  font-size: 18px;
  font-family: Georgia, serif;
  font-weight: 400;
}

.academy-values small {
  color: rgba(247, 239, 217, 0.66);
  font-size: 7px;
  line-height: 1.2;
}

.setup-page .setup-footer {
  position: relative;
  z-index: 1;
  padding: 12px clamp(18px, 4vw, 52px);
  background: rgba(5, 17, 38, 0.86);
  border-top-color: rgba(225, 176, 69, 0.34);
  color: rgba(252, 237, 190, 0.76);
  font-size: 9px;
}

/* Setup sizing pass — aligned to the larger component scale in the approved reference. */
@media (min-width: 901px) {
  .setup-page {
    min-height: 100vh;
  }

  .setup-main.page-width {
    width: min(2200px, calc(100% - 96px));
    max-width: 2200px;
    padding-top: calc(72px + 26px);
    padding-bottom: 24px;
  }

  .setup-hero {
    margin-bottom: 16px;
    max-width: 980px;
  }

  .setup-hero h1 {
    font-size: clamp(2.5rem, 3.2vw, 3.6rem);
    white-space: nowrap;
  }

  .setup-hero > div > p:last-child {
    font-size: 15px;
  }

  .setup-layout {
    --setup-card-height: clamp(220px, 20vh, 285px);
    min-height: 0;
    grid-template-columns: minmax(0, 2fr) minmax(420px, 0.82fr);
    align-items: stretch;
    gap: clamp(26px, 2.5vw, 44px);
  }

  .setup-rail {
    position: static;
    width: auto;
    height: calc(var(--setup-card-height) + var(--setup-card-height) + var(--setup-card-height) + 112px);
    min-height: 0;
    grid-template-rows: minmax(180px, 0.9fr) minmax(300px, 1.9fr) minmax(180px, 0.8fr);
    gap: 16px;
  }

  .setup-form {
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: calc(var(--setup-card-height) + var(--setup-card-height) + var(--setup-card-height) + 112px);
    grid-template-rows: repeat(3, var(--setup-card-height)) 64px;
    grid-auto-rows: auto;
  }

  .setup-page .setup-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    padding: 17px 19px 18px;
    border-radius: 15px;
  }

  .setup-page .setup-card h2 {
    gap: 9px;
    font-size: clamp(20px, 1.25vw, 23px);
  }

  .setup-card-icon {
    width: 29px;
    font-size: 22px;
  }

  .setup-card-icon img {
    width: 28px;
    height: 28px;
  }

  .setup-page .setup-hint {
    margin-bottom: 10px;
    font-size: 11px;
  }

  .setup-page .setup-card .choice-grid {
    flex: 1;
    min-height: 0;
    margin-top: 14px;
    align-content: stretch;
    grid-auto-rows: minmax(0, 1fr);
  }

  .setup-page .choice-grid {
    gap: 8px;
  }

  .setup-page .choice-pill {
    min-height: 0;
    height: 100%;
    padding: 7px 9px;
    border-radius: 8px;
    font-size: clamp(11.5px, 0.72vw, 13px);
  }

  .setup-page .choice-pill--stacked {
    min-height: 0;
  }

  .choice-pill--stacked small,
  .setting-choice small {
    font-size: 9px;
  }

  .setup-page .setting-choice {
    min-height: 0;
    background-size: auto 190px;
  }

  .setup-page .setting-choice small {
    margin-top: 11px;
    font-size: 18px;
  }

  .choice-icon {
    font-size: 15px;
  }

  .choice-icon img {
    width: 21px;
    height: 21px;
  }

  .setup-page .safety-toggle {
    min-height: 0;
    margin-top: 14px;
    padding: 12px 14px;
    align-items: center;
    border: 1px solid rgba(10, 31, 62, 0.14);
    border-radius: 9px;
    background: #fffdf8;
    gap: 12px;
    font-size: 12px;
  }

  .setup-page .safety-toggle-switch {
    width: 22px;
    height: 22px;
  }

  .setup-page .safety-toggle-switch::after {
    width: 6px;
    height: 11px;
    top: 2px;
    left: 7px;
  }

  .setup-page .setup-alert {
    min-height: 0;
    margin-top: 14px;
    padding: 11px 13px;
    font-size: 11px;
  }

  .setup-page .setup-alert-icon svg {
    width: 15px;
    height: 15px;
  }

  .setup-page .setup-card--safety {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) minmax(0, 1fr);
    row-gap: 10px;
  }

  .setup-page .setup-card--safety .safety-toggle,
  .setup-page .setup-card--safety .setup-alert {
    height: 100%;
  }

  .setup-page .setup-card--safety .setup-alert {
    display: flex;
    align-items: center;
    margin-top: 0;
  }

  .setup-page .setup-card--safety .safety-toggle {
    margin-top: 0;
  }

  .setup-page .setup-save-btn {
    min-width: min(440px, 100%);
    height: 46px;
    min-height: 46px;
    font-size: 12px;
  }

  .setup-page .setup-actions {
    height: 64px;
    margin-top: 0;
    align-content: start;
  }

  .setup-page .setup-quote {
    display: grid;
    min-height: 0;
    height: 100%;
    place-content: center;
    padding: 20px 22px;
    border-radius: 16px;
  }

  .setup-page .setup-quote p {
    max-width: 92%;
    margin-inline: auto;
    font-size: 25px;
    line-height: 1.32;
  }

  .setup-page .setup-quote span {
    margin-top: 15px;
    font-size: 13px;
    letter-spacing: 0.11em;
  }

  .setup-page .setup-guide {
    display: grid;
    min-height: 0;
    height: 100%;
    place-items: center;
  }

  .setup-page .setup-guide img {
    position: static;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: center;
    transform: none;
  }

  .setup-page .fitai-bubble {
    width: 79%;
    margin-top: 24px;
    padding: 15px 17px;
    border-radius: 14px;
  }

  .setup-page .fitai-bubble strong {
    font-size: 10px;
  }

  .setup-page .fitai-bubble p {
    font-size: 11px;
  }

  .academy-values {
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    border-radius: 16px;
    padding: 24px 22px;
  }

  .academy-values > p {
    margin-bottom: 14px;
    font-size: 14px;
  }

  .academy-values > div {
    height: 100%;
    align-items: center;
  }

  .academy-values b {
    font-size: 34px;
  }

  .academy-values span {
    gap: 6px;
    font-size: 14px;
  }

  .academy-values small {
    font-size: 11px;
  }
}

@media (max-width: 900px) {
  .setup-page::before { background-position: 60% center; }
  .setup-page .setup-topbar-actions { display: none; }
  .setup-layout { grid-template-columns: 1fr; }
  .setup-rail {
    position: static;
    top: auto;
    right: auto;
    width: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .setup-guide { grid-row: span 2; }
}

@media (max-width: 620px) {
  .setup-main.page-width { padding: calc(72px + 22px) 14px 32px; }
  .setup-hero h1 { font-size: 2.2rem; }
  .setup-form { grid-template-columns: 1fr; }
  .setup-form { grid-auto-rows: auto; }
  .setup-page .setup-actions { grid-column: auto; }
  .setup-rail { grid-template-columns: 1fr; }
  .setup-page .setup-guide { min-height: 230px; }
  .setup-page .choice-grid--baseline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setup-page .choice-grid--baseline .choice-pill:nth-last-child(2),
  .setup-page .choice-grid--baseline .choice-pill:last-child { grid-column: auto; }
  .setup-page .choice-grid--activities,
  .setup-page .choice-grid--goal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Dashboard reference redesign ---- */
.dashboard-redesign {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(4, 15, 34, 0.28), rgba(4, 15, 34, 0.76)),
    url("../images/indoor/hall-background-desktop-no-bike.png") center / cover fixed no-repeat;
  color: #f8ecd3;
}

.dashboard-redesign .dashboard-topbar {
  position: relative;
  inset: auto;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
  height: 64px;
  padding: 0 clamp(24px, 4vw, 64px);
  background: rgba(4, 17, 38, 0.93);
}

.dashboard-redesign .dashboard-topbar .academy-brand img {
  width: 38px;
  height: 38px;
}

.dashboard-redesign .dashboard-topbar .academy-brand strong { font-size: 18px; }
.dashboard-redesign .dashboard-topbar .academy-brand small { font-size: 7px; }

.dashboard-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.2vw, 34px);
}

.dashboard-redesign .dashboard-nav .academy-nav-link {
  position: relative;
  font-size: 12px;
}

.dashboard-redesign .dashboard-nav .academy-nav-link.is-active { color: #f3c95d !important; }
.dashboard-redesign .dashboard-nav .academy-nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -16px;
  width: 4px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #f3c95d;
  box-shadow: 0 0 8px #f3c95d;
}

.dashboard-redesign .dashboard-topbar > .language-picker { justify-self: end; }
.dashboard-redesign .dashboard-topbar .language-switch {
  width: 96px;
  height: 34px;
  font-size: 11px;
}

.dashboard-shell {
  width: min(1540px, calc(100% - 64px));
  max-width: none;
  margin: 0 auto;
  padding: 22px 0 24px;
}

.dashboard-heading-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  min-height: 166px;
  gap: 34px;
  align-items: center;
}

.dashboard-heading-copy { max-width: 720px; }
.dashboard-kicker {
  margin: 0 0 7px;
  color: #efc75e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
}

.dashboard-heading-copy h1 {
  margin: 0 0 7px;
  color: #fff4dc;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.25rem, 3vw, 3.2rem);
  line-height: 1;
  white-space: nowrap;
}

.dashboard-heading-copy > p:last-child {
  max-width: 650px;
  margin: 0;
  color: rgba(255, 244, 220, 0.88);
  font-size: 14px;
  line-height: 1.45;
}

.dashboard-hero-guide {
  position: relative;
  align-self: stretch;
  min-height: 166px;
  padding: 22px 195px 20px 24px;
  border: 1px solid rgba(222, 177, 75, 0.55);
  border-radius: 16px;
  background: rgba(4, 21, 48, 0.82);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
  overflow: visible;
}

.dashboard-hero-guide--copy-only {
  padding-right: 24px;
}

.dashboard-hero-guide blockquote {
  margin: 0 0 12px;
  color: #efc75e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-style: italic;
  line-height: 1.25;
}

.dashboard-hero-guide > span {
  color: rgba(255, 238, 192, 0.7);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.dashboard-hero-guide > img {
  position: absolute;
  z-index: 2;
  right: 4px;
  bottom: -22px;
  width: 205px;
  height: 210px;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 12px 12px rgba(0, 0, 0, 0.4));
}

.dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px;
  border: 1px solid rgba(222, 177, 75, 0.45);
  border-radius: 14px;
  background: rgba(255, 250, 239, 0.97);
  color: #0b1e3d;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.dashboard-metric {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  min-height: 100px;
  align-items: center;
  padding: 13px 18px;
  border-right: 1px solid rgba(11, 30, 61, 0.12);
}

.dashboard-metric:last-child { border-right: 0; }
.dashboard-metric > img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.dashboard-metric div { display: grid; align-content: center; }
.dashboard-metric span { font-size: 11px; font-weight: 700; }
.dashboard-metric strong {
  margin: 2px 0 0;
  font-size: 27px;
  line-height: 1;
}
.dashboard-metric strong em { font-size: 13px; font-style: normal; }
.dashboard-metric strong.dashboard-focus { font-size: 17px; line-height: 1.15; }
.dashboard-metric small { margin-top: 7px; color: #3b785c; font-size: 10px; }
.dashboard-metric small b { color: #16815a; }

.dashboard-charts-grid,
.dashboard-lower-grid {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.dashboard-charts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard-lower-grid { grid-template-columns: 1.05fr 0.92fr 1.12fr; }

.dashboard-panel {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid rgba(222, 177, 75, 0.35);
  border-radius: 14px;
  background: rgba(255, 250, 239, 0.97);
  color: #0b1e3d;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
}

.dashboard-chart-card { min-height: 250px; }
.dashboard-recent-card,
.dashboard-distribution-card,
.dashboard-recommendation-card { min-height: 235px; }

.dashboard-panel-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.dashboard-panel-heading > div { display: flex; gap: 9px; align-items: flex-start; }
.dashboard-panel-heading img { width: 24px; height: 24px; object-fit: contain; flex: none; }
.dashboard-panel-heading span { display: grid; }
.dashboard-panel-heading strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.1;
}
.dashboard-panel-heading small { margin-top: 3px; color: #627086; font-size: 10px; }
.dashboard-panel-heading .dashboard-period {
  flex: none;
  display: inline-flex;
  padding: 6px 9px;
  border: 1px solid rgba(11, 30, 61, 0.12);
  border-radius: 7px;
  color: #41516a;
  background: #fffdf8;
  font-size: 10px;
}

.dashboard-bar-chart {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  height: 185px;
  padding: 8px 8px 0;
  align-items: end;
  background: repeating-linear-gradient(to bottom, transparent 0 43px, rgba(11, 30, 61, 0.08) 44px);
}

.dashboard-bar-column {
  display: grid;
  grid-template-rows: 18px 1fr 25px;
  height: 100%;
  align-items: end;
  justify-items: center;
  gap: 3px;
}
.dashboard-bar-column > span { font-size: 10px; font-weight: 800; }
.dashboard-bar-column > i {
  display: block;
  width: min(44px, 68%);
  height: var(--bar-height);
  min-height: 5px;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, #214a83, #0d2b57);
  box-shadow: 0 5px 10px rgba(13, 43, 87, 0.18);
}
.dashboard-bar-column > small { color: #56657b; font-size: 9px; }

.dashboard-line-chart { height: 186px; }
.dashboard-line-chart svg { display: block; width: 100%; height: 155px; overflow: visible; }
.dashboard-chart-gridlines line { stroke: rgba(11, 30, 61, 0.11); stroke-width: 1; }
.dashboard-response-line {
  fill: none;
  stroke: #214a83;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dashboard-response-dot { fill: #214a83; stroke: #fffdf8; stroke-width: 2; }
.dashboard-response-labels { display: flex; justify-content: space-around; color: #5e6c80; font-size: 9px; }
.dashboard-empty { color: #68768a; font-size: 12px; }

.dashboard-session-list,
.dashboard-distribution-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dashboard-session-list li {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) auto auto;
  gap: 9px;
  min-height: 42px;
  align-items: center;
  padding: 6px 3px;
  border-top: 1px solid rgba(11, 30, 61, 0.09);
}
.dashboard-session-list li:first-child { border-top: 0; }
.dashboard-session-list img { width: 23px; height: 23px; object-fit: contain; }
.dashboard-session-list div { display: grid; }
.dashboard-session-list strong { font-size: 11px; }
.dashboard-session-list small { margin-top: 3px; color: #6a7789; font-size: 9px; }
.dashboard-session-list > li > span { color: #485970; font-size: 10px; white-space: nowrap; }
.dashboard-session-list em {
  min-width: 42px;
  padding: 5px 7px;
  border-radius: 999px;
  background: #d8f1e6;
  color: #176548;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  text-align: center;
}

.dashboard-distribution-layout {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.dashboard-donut { position: relative; width: 155px; height: 155px; }
.dashboard-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dashboard-donut circle { fill: none; stroke-width: 17; }
.dashboard-donut-bg { stroke: #e8e1d5; }
.dashboard-donut-segment { transform-origin: 60px 60px; }
.dashboard-donut > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}
.dashboard-donut > span strong { font: 700 24px/1 Georgia, serif; }
.dashboard-donut > span small { margin-top: 3px; color: #6b7483; font-size: 9px; }
.dashboard-distribution-list { display: grid; gap: 8px; }
.dashboard-distribution-list li {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  font-size: 10px;
}
.dashboard-distribution-list li i { width: 7px; height: 7px; border-radius: 50%; background: var(--legend-color); }
.dashboard-distribution-list li strong { font-size: 10px; }

.dashboard-recommendation-layout {
  display: grid;
  grid-template-columns: 48% minmax(0, 1fr);
  min-height: 177px;
  overflow: hidden;
  border-radius: 10px;
  background: #f2eadb;
}
.dashboard-recommendation-photo { width: 100%; height: 100%; min-height: 177px; object-fit: cover; }
.dashboard-recommendation-copy { display: flex; flex-direction: column; padding: 13px; }
.dashboard-recommendation-copy > strong { font: 700 16px/1.2 Georgia, serif; }
.dashboard-recommendation-copy > p { margin: 5px 0 9px; color: #5f6c7d; font-size: 10px; }
.dashboard-recommendation-meta { display: grid; gap: 6px; }
.dashboard-recommendation-meta span { display: flex; gap: 6px; align-items: center; font-size: 10px; }
.dashboard-recommendation-meta img { width: 16px; height: 16px; object-fit: contain; }
.dashboard-start-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 32px;
  margin-top: auto;
  border-radius: 999px;
  background: linear-gradient(180deg, #f0c95f, #d5a13b);
  color: #151006;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}
.dashboard-start-button img { width: 13px; height: 13px; object-fit: contain; }

.dashboard-footer {
  padding: 10px clamp(24px, 4vw, 64px);
  background: rgba(4, 17, 38, 0.94);
}

@media (max-width: 1100px) {
  .dashboard-redesign .dashboard-topbar { grid-template-columns: 1fr auto; }
  .dashboard-nav { display: none; }
  .dashboard-heading-row { grid-template-columns: 1fr 340px; }
  .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-metric:nth-child(2) { border-right: 0; }
  .dashboard-metric:nth-child(-n + 2) { border-bottom: 1px solid rgba(11, 30, 61, 0.12); }
  .dashboard-lower-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-recommendation-card { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .dashboard-shell { width: calc(100% - 28px); padding-top: 16px; }
  .dashboard-heading-row { grid-template-columns: 1fr; }
  .dashboard-hero-guide { display: none; }
  .dashboard-heading-copy h1 { font-size: 2.25rem; white-space: normal; }
  .dashboard-charts-grid,
  .dashboard-lower-grid { grid-template-columns: 1fr; }
  .dashboard-recommendation-card { grid-column: auto; }
  .dashboard-distribution-layout { grid-template-columns: 140px minmax(0, 1fr); }
  .dashboard-donut { width: 135px; height: 135px; }
}

@media (max-width: 520px) {
  .dashboard-redesign .dashboard-topbar { height: 60px; padding: 0 14px; }
  .dashboard-redesign .dashboard-topbar .academy-brand small { display: none; }
  .dashboard-redesign .dashboard-topbar .language-switch { width: 88px; height: 32px; }
  .dashboard-metrics { grid-template-columns: 1fr; }
  .dashboard-metric { border-right: 0; border-bottom: 1px solid rgba(11, 30, 61, 0.12); }
  .dashboard-metric:last-child { border-bottom: 0; }
  .dashboard-recommendation-layout { grid-template-columns: 1fr; }
  .dashboard-recommendation-photo { height: 145px; min-height: 145px; }
}

/* =========================================================
   2026-09 dashboard book redesign + setup viewport fixes
   ========================================================= */
.dashboard-book-page{min-height:100vh;background:linear-gradient(rgba(2,10,25,.33),rgba(2,10,25,.62)),url('../images/indoor/hall-background-desktop-no-bike.png') center/cover fixed no-repeat;color:#0d1b31;overflow-x:hidden}
.dashboard-book-topbar{height:72px;display:grid;grid-template-columns:minmax(220px,1fr) auto minmax(220px,1fr);align-items:center;padding:0 clamp(22px,4.4vw,72px);background:#061227;border-bottom:1px solid rgba(225,180,74,.45);z-index:100}

/* Shared retractable-header behaviour (header-retract.js), reused on every page. */
.academy-topbar{transition:transform .3s ease}
.academy-topbar.header-hidden{transform:translateY(-100%) !important}
.dashboard-book-links{display:flex;justify-content:center;gap:22px}.dashboard-book-links .academy-nav-link{font-size:13px;letter-spacing:.02em;white-space:nowrap}.dashboard-book-links .academy-nav-link.is-active{color:#fff0c9 !important;text-decoration:underline !important;text-underline-offset:6px;text-decoration-color:rgba(232,200,106,.7)}.dashboard-book-topbar .language-picker{justify-self:end}
.magic-book-shell{min-height:calc(100vh - 72px);display:grid;place-items:center;padding:30px 110px 34px 34px}
.magic-book{position:relative;width:min(1450px,calc(100vw - 180px));min-height:760px;border:10px solid #101b32;border-radius:28px 22px 22px 28px;background:#d8b878;box-shadow:0 28px 70px rgba(0,0,0,.55),inset 0 0 0 2px #d7a83f;isolation:isolate;perspective:none}
.magic-book:before{content:"";position:absolute;inset:10px;border-radius:18px;background:linear-gradient(90deg,#f4dfb4 0%,#fff0cb 48%,#ead0a0 50%,#fff0cb 52%,#f2d9ac 100%);box-shadow:inset 0 0 45px rgba(116,72,22,.25);z-index:-1}.book-spine{position:absolute;top:16px;bottom:16px;left:50%;width:18px;transform:translateX(-50%);background:linear-gradient(90deg,rgba(106,65,25,.16),rgba(84,48,18,.5),rgba(255,243,205,.2));border-radius:50%;z-index:4;pointer-events:none}
/* 3D Realistic Book Page Turn Transition — Physical Parchment Sheet Flip */
.book-flip-stage{position:absolute;inset:0;pointer-events:none;z-index:30;perspective:none;overflow:visible;box-sizing:border-box;isolation:isolate}
/* Underlays are opaque physical-paper crops. This prevents a hidden live view
   from bleeding through translucent cards while the new spread is revealed. */
.book-flip-underlay-page{position:absolute;overflow:hidden;box-sizing:border-box;pointer-events:none;z-index:2;background-color:#f6e3c0;box-shadow:none !important}
.book-flip-underlay-page.underlay-side-right,.book-flip-underlay-page.underlay-side-left{box-shadow:none !important}
.book-flip-leaf{position:absolute;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;will-change:transform;z-index:20}
.book-flip-leaf.is-flipping-left{animation:bookFlipLeftAnim .75s cubic-bezier(.25,1,.45,1) forwards}
.book-flip-leaf.is-flipping-right{animation:bookFlipRightAnim .75s cubic-bezier(.25,1,.45,1) forwards}
.book-flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;box-sizing:border-box}
.book-flip-face.book-flip-front{transform:rotateY(0deg) translateZ(1px);-webkit-transform:rotateY(0deg) translateZ(1px);z-index:2}
.book-flip-face.book-flip-back{transform:rotateY(180deg) translateZ(1px);-webkit-transform:rotateY(180deg) translateZ(1px);z-index:1}
.book-flip-face.face-side-right{border-radius:0 4px 4px 0;background-color:#f6e3c0;box-shadow:none}
.book-flip-face.face-side-left{border-radius:4px 0 0 4px;background-color:#f6e3c0;box-shadow:none}
.book-flip-stage .book-flip-spread-clone{display:grid !important;min-height:0 !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;pointer-events:none !important;background:none !important}
.book-flip-face .book-page,.book-flip-underlay-page .book-page{min-width:0 !important;box-sizing:border-box !important;pointer-events:none !important;background:none !important}
.book-flip-shading{position:absolute;inset:0;pointer-events:none;z-index:40}
.is-flipping-left .book-flip-front .book-flip-shading{background:linear-gradient(to right,rgba(40,20,5,.4) 0%,rgba(40,20,5,.1) 20%,transparent 60%);animation:leafShadingFrontLeft .75s cubic-bezier(.25,1,.45,1) forwards}
.is-flipping-left .book-flip-back .book-flip-shading{background:linear-gradient(to left,rgba(40,20,5,.4) 0%,rgba(40,20,5,.1) 20%,transparent 60%);animation:leafShadingBackLeft .75s cubic-bezier(.25,1,.45,1) forwards}
.is-flipping-right .book-flip-front .book-flip-shading{background:linear-gradient(to left,rgba(40,20,5,.4) 0%,rgba(40,20,5,.1) 20%,transparent 60%);animation:leafShadingFrontRight .75s cubic-bezier(.25,1,.45,1) forwards}
.is-flipping-right .book-flip-back .book-flip-shading{background:linear-gradient(to right,rgba(40,20,5,.4) 0%,rgba(40,20,5,.1) 20%,transparent 60%);animation:leafShadingBackRight .75s cubic-bezier(.25,1,.45,1) forwards}
.book-spine-crease-shadow{position:absolute;width:70px;pointer-events:none;z-index:25;background:radial-gradient(ellipse at center,rgba(35,18,4,.65) 0%,rgba(35,18,4,.2) 50%,transparent 80%);animation:spineCreaseAnim .75s cubic-bezier(.25,1,.45,1) forwards}
.book-flip-cast-shadow{position:absolute;pointer-events:none;z-index:10}
.is-flipping-left ~ .book-flip-cast-shadow{background:linear-gradient(to left,rgba(30,15,3,.45) 0%,rgba(30,15,3,.1) 40%,transparent 80%);animation:castShadowLeft .75s cubic-bezier(.25,1,.45,1) forwards}
.is-flipping-right ~ .book-flip-cast-shadow{background:linear-gradient(to right,rgba(30,15,3,.45) 0%,rgba(30,15,3,.1) 40%,transparent 80%);animation:castShadowRight .75s cubic-bezier(.25,1,.45,1) forwards}
@keyframes bookFlipLeftAnim{0%{transform:rotateY(0deg)}100%{transform:rotateY(-180deg)}}
@keyframes bookFlipRightAnim{0%{transform:rotateY(0deg)}100%{transform:rotateY(180deg)}}
@keyframes spineCreaseAnim{0%{opacity:0;transform:scaleX(.4)}48%{opacity:.9;transform:scaleX(1.2)}100%{opacity:0;transform:scaleX(.4)}}
@keyframes castShadowLeft{0%{opacity:0;transform:scaleX(.1);transform-origin:right}50%{opacity:.8;transform:scaleX(1);transform-origin:right}100%{opacity:0;transform:scaleX(.2);transform-origin:right}}
@keyframes castShadowRight{0%{opacity:0;transform:scaleX(.1);transform-origin:left}50%{opacity:.8;transform:scaleX(1);transform-origin:left}100%{opacity:0;transform:scaleX(.2);transform-origin:left}}
@keyframes leafShadingFrontLeft{0%{opacity:0}48%{opacity:.6}100%{opacity:0}}
@keyframes leafShadingBackLeft{0%{opacity:.5}48%{opacity:.5}100%{opacity:0}}
@keyframes leafShadingFrontRight{0%{opacity:0}48%{opacity:.6}100%{opacity:0}}
@keyframes leafShadingBackRight{0%{opacity:.5}48%{opacity:.5}100%{opacity:0}}
.book-view{display:grid;grid-template-columns:1fr 1fr;min-height:740px}.book-view[hidden]{display:none !important}.book-page{padding:44px 48px 38px;min-width:0;position:relative}.book-page-left{border-right:1px solid rgba(112,75,28,.22)}
.book-kicker{margin:0 0 4px;color:#765729;font-size:11px;font-weight:800;letter-spacing:.14em}.book-page h1,.book-page h2{font-family:Georgia,'Times New Roman',serif;color:#101b31}.book-page h1{margin:0;font-size:44px}.book-page h2{margin:0;font-size:24px}.book-rule{height:2px;margin:10px 0 18px;background:linear-gradient(90deg,#b8862c,transparent)}
.parchment-card{border:1px solid rgba(150,101,35,.42);border-radius:14px;background:rgba(255,245,216,.35);box-shadow:inset 0 0 18px rgba(120,73,22,.05);padding:17px 18px;margin-bottom:16px}.card-title-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:13px}.card-title-row h2{font-size:19px}.card-title-row span{font-size:11px;color:#745b37}
.body-map-card{min-height:460px}.body-map-visual{display:flex;justify-content:center;gap:42px;align-items:end;padding:25px 0 18px}.bunny-body{position:relative;width:160px;height:310px;border:3px solid #9b6830;border-radius:70px 70px 58px 58px;background:#f8e1b1}.bunny-head{position:absolute;width:126px;height:102px;border:3px solid #9b6830;border-radius:50%;background:#f8e1b1;top:-68px;left:15px}.bunny-ear{position:absolute;width:38px;height:100px;border:3px solid #9b6830;border-radius:70% 70% 35% 35%;background:#f8e1b1;top:-142px;z-index:-1}.ear-left{left:25px;transform:rotate(-8deg)}.ear-right{right:25px;transform:rotate(8deg)}.zone{position:absolute;left:18px;right:18px;text-align:center;border-radius:40px;background:#e98542;color:#fff5dc;padding:18px 6px;font-weight:800;font-size:12px;border:2px solid rgba(255,255,255,.72)}.zone.trained{background:#5f9e4f}.zone-upper{top:52px}.zone-core{top:122px}.zone-lower{top:200px;padding:30px 6px}.body-legend{display:flex;gap:20px;justify-content:center;font-size:12px}.body-legend i{display:inline-block;width:14px;height:14px;border-radius:50%;background:#e98542;margin-right:7px;vertical-align:-2px}.body-legend i.trained-dot{background:#5f9e4f}.academy-quote{margin:18px auto 0;max-width:360px;text-align:center;font-family:Georgia,serif;font-style:italic;color:#5d4222}.academy-quote small{display:block;margin-top:8px;font-size:10px;letter-spacing:.12em}
.welcome-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:19px}.welcome-row img{width:100px}.history-row{display:grid;grid-template-columns:26px 1fr auto 74px;gap:9px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(112,75,28,.18)}.history-row:last-child{border-bottom:0}.history-check{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#69a255;color:white}.history-row small{color:#765c37;text-align:right}.dashboard-book-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.identity-card p,.profile-fields p{display:flex;justify-content:space-between;gap:10px;padding:9px 0;margin:0;border-bottom:1px solid rgba(112,75,28,.14)}.identity-card p span,.profile-fields span{color:#735b38}.dashboard-book-page .stats-grid{display:grid;grid-template-columns:1fr 1fr}.dashboard-book-page .stats-grid span{padding:16px 8px;text-align:center;border:1px solid rgba(112,75,28,.12)}.dashboard-book-page .stats-grid b{display:block;font:700 28px Georgia;color:#172139}.dashboard-book-page .stats-grid small{font-size:10px}.book-footer-motto{text-align:center;color:#765729;font-family:Georgia,serif;font-style:italic}
.profile-portrait-wrap{text-align:center;margin:22px auto}.profile-portrait-wrap img{width:220px;height:220px;object-fit:contain;border-radius:50%;border:8px double #bc892d;background:#14223a}.profile-portrait-wrap p{font:italic 18px Georgia;color:#5f4220}.journal-card p{font:italic 18px/1.55 Georgia;color:#5f4220}.level-progress{height:14px;border-radius:99px;background:#ead2a5;overflow:hidden;margin:16px 0}.level-progress i{display:block;height:100%;background:linear-gradient(90deg,#c18a2a,#e4b453)}.favorite-chips{display:flex;flex-wrap:wrap;gap:9px}.favorite-chips span{padding:9px 12px;border:1px solid #ba8d49;border-radius:999px;background:#f6dfac;font-size:12px}.pref-card{min-height:135px}.preference-big-value{font:700 30px Georgia;color:#18243b;margin-top:18px}.book-edit-link{display:inline-block;padding:12px 18px;border-radius:999px;background:#112442;color:#f1cd72;text-decoration:none;font-weight:800}
.activity-timeline>div{display:grid;grid-template-columns:82px 16px 1fr;gap:12px;align-items:start;padding:8px 0}.activity-timeline>div>span{width:10px;height:10px;border-radius:50%;background:#5d9850;margin-top:4px}.activity-timeline p{margin:0}.activity-timeline small{display:block;color:#755d3b;margin-top:3px}.summary-strip,.achievement-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 16px}.summary-strip span,.achievement-summary span{border:1px solid rgba(130,87,31,.3);border-radius:10px;padding:12px;text-align:center;background:rgba(255,244,212,.35);font-size:11px}.summary-strip b,.achievement-summary b{display:block;font:700 26px Georgia}.book-bars{height:180px;display:flex;align-items:end;gap:12px}.book-bars span{flex:1;height:100%;display:grid;grid-template-rows:auto 1fr auto;align-items:end;text-align:center}.book-bars i{display:block;width:70%;margin:auto;background:#c99844;border-radius:6px 6px 0 0}.book-bars small{font-size:9px}.dist-book-row{display:grid;grid-template-columns:140px 1fr 54px;gap:10px;align-items:center;margin:10px 0;font-size:11px}.dist-book-row>i{height:9px;background:#e9d2a7;border-radius:99px;overflow:hidden}.dist-book-row>i b{display:block;height:100%;background:#7f9d55}
.badge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.badge{text-align:center;opacity:.38}.badge.is-unlocked{opacity:1}.badge b{display:grid;place-items:center;width:78px;height:88px;margin:auto;border-radius:45% 45% 50% 50%;background:#8b7047;border:5px double #ba8528;color:#fff1c8;font:700 27px Georgia}.badge.is-unlocked b{background:#173761}.badge strong,.badge small{display:block;margin-top:7px}.badge small{font-size:9px;color:#6d5433}.streak-row{display:flex;justify-content:space-around}.streak-medal{opacity:.35;text-align:center;font-size:34px}.streak-medal.is-unlocked{opacity:1}.streak-medal b{display:block;font-size:11px}.achievement-summary{grid-template-columns:1fr 1fr}.title-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.title-cards>span{padding:20px 10px;background:#102442;color:#f2ce70;border:3px double #ba8528;border-radius:8px;text-align:center;font:700 16px Georgia}.title-cards small{display:block;font:400 8px Arial;margin-top:6px}.progress-badges{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:center}.progress-badges span{font-size:26px}.progress-badges b,.progress-badges small{display:block;font-size:11px}.book-empty{color:#795f3d;font-style:italic}
.book-tabs{position:relative;margin-left:-6px;margin-top:90px;display:grid;gap:12px;width:160px;flex:0 0 auto}.book-tabs button{display:flex;align-items:center;height:66px;padding:0 16px;border:2px solid #b9852d;border-left:0;border-radius:0 12px 12px 0;background:#101f3a;color:#f0cc73;text-align:left;font-weight:800;cursor:pointer;box-shadow:4px 7px 14px rgba(0,0,0,.3)}.book-tabs button.is-active{background:#173058;box-shadow:0 0 0 2px #e1b44e inset,0 0 20px rgba(229,179,66,.4)}.book-tabs button span{margin-left:8px}.book-tab-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:22px;height:22px;font-size:17px;line-height:1;margin-left:0!important}.book-tab-icon+span{margin-left:8px}.book-tab-icon--img img{width:20px;height:20px;object-fit:contain;display:block;filter:brightness(0) saturate(100%) invert(82%) sepia(41%) saturate(521%) hue-rotate(358deg) brightness(96%) contrast(92%)}
.quest-recommended-name{margin:12px 0 6px;font:700 26px Georgia,serif;color:#18243b}.quest-recommended-detail{margin:0 0 16px;color:#5f4220;font-size:13px;line-height:1.5}.quest-start-link{margin-top:4px}.quest-path-card p{margin:0 0 14px;color:#5f4220;font-size:13px;line-height:1.5}.quest-path-card+.quest-path-card{margin-top:16px}

/* Quests page — "Recommended Quest" / "Outdoor Main Quest" spread */
.quest-plan-page { display: flex; flex-direction: column; }
.quest-plan-kicker { margin: 0 0 2px; }
.quest-plan-subline { margin: 0 0 22px; color: #6b4a27; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.quest-prep-card { padding: 12px 16px 14px; }
.quest-prep-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 8px;
  color: #8a5f22;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.quest-prep-icon { font-size: 14px; }
.quest-prep-hero {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.quest-prep-rabbit { width: 46px; height: 46px; object-fit: contain; }
.quest-prep-hero h2 { margin: 0; font-size: 19px; color: #18243b; }
.quest-prep-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 10px;
  padding: 8px 0;
  border-top: 1px solid rgba(112,75,28,.16);
  border-bottom: 1px solid rgba(112,75,28,.16);
  font-size: 12px;
  font-weight: 700;
  color: #5f4220;
}
.quest-prep-stats em { font-style: normal; margin-right: 4px; color: #b8842a; }
.quest-step-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 4px 0 12px;
}
.quest-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
  flex: 1;
  min-width: 0;
}
.quest-step-badge {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-24px);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #b8842a;
  color: #fff8e6;
  font-size: 9px;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.quest-step img { width: 40px; height: 40px; object-fit: contain; }
.quest-step p { margin: 0; font-size: 10px; font-weight: 700; color: #5f4220; text-align: center; }
.quest-step p small { display: block; font-size: 9px; font-weight: 400; color: #8a7350; }
.quest-step-arrow { color: #b8842a; font-size: 14px; flex: 0 0 auto; }
.quest-start-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin-top: 6px;
  padding: 11px;
  border-radius: 999px;
  background: linear-gradient(180deg,#e2b658,#c8963a);
  box-shadow: 0 8px 18px rgba(150,105,20,.32);
  color: #2a1c05;
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
  text-align: center;
}
.quest-why-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 10px 0;
  font-size: 12px;
}
.quest-why-row strong { display: block; color: #18243b; font-size: 12px; }
.quest-why-row p { margin: 2px 0 0; color: #5f4220; line-height: 1.4; }
.book-view[data-book-view="quests"] { grid-template-rows: 1fr auto; }
.quest-journey-row {
  grid-column: 1 / -1;
  align-self: end;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 10px 0 22px;
  padding: 12px 28px 0;
  border-top: 1px solid rgba(112,75,28,.2);
}
.quest-journey-label {
  flex: 0 0 auto;
  margin: 0;
  color: #8a5f22;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.quest-journey-steps {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 11px;
  font-weight: 700;
  color: #5f4220;
}
.quest-journey-steps span { display: flex; align-items: center; gap: 5px; }
.quest-journey-steps i {
  font-style: normal;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #eadcb8;
  color: #6b4a27;
  font-size: 9px;
  display: grid;
  place-items: center;
}
.quest-journey-sep { color: #b8842a; }
.quest-journey-links { display: flex; gap: 16px; margin-left: auto; }
.quest-journey-links a { font-size: 11px; font-weight: 700; color: #8a5f22; text-decoration: none; }
.quest-journey-links a:hover { text-decoration: underline; }

.quest-outdoor-page { display: flex; flex-direction: column; }
.quest-outdoor-card { padding: 14px 16px; }
.quest-outdoor-place {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 2px;
  font-size: 17px;
  font-weight: 800;
  color: #18243b;
  font-family: Georgia, serif;
}
.quest-outdoor-meta { margin: 0 0 10px; font-size: 12px; color: #6b4a27; }
.quest-outdoor-map {
  height: 130px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: linear-gradient(180deg, #dfeadc, #cfe3cc);
  border: 1px solid rgba(112,75,28,.18);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.quest-outdoor-map img { width: 100%; height: 100%; object-fit: cover; }
.quest-outdoor-map img.quest-outdoor-map-fallback { width: 64px; height: 64px; object-fit: contain; opacity: .85; }
.quest-outdoor-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.quest-outdoor-chips span {
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(107,157,85,.14);
  color: #3f6b32;
  font-size: 11px;
  font-weight: 700;
}
.quest-outdoor-note { margin: 0 0 12px; font-size: 11px; color: #6b4a27; font-style: italic; }
.quest-choose-link { display: block; margin-top: 8px; text-align: center; font-size: 12px; font-weight: 700; color: #8a5f22; text-decoration: none; }
.quest-choose-link:hover { text-decoration: underline; }
@media(max-width:1100px){.magic-book-shell{padding:88px 20px 20px;flex-direction:column}.magic-book{width:100%;min-height:0;height:auto;max-height:none}.book-view{grid-template-columns:1fr}.book-spine{display:none}.book-page-left{border-right:0;border-bottom:1px solid rgba(112,75,28,.25)}.book-tabs{position:sticky;left:auto;top:auto;bottom:0;width:auto;margin:12px 0 0;grid-template-columns:repeat(4,1fr);gap:0;z-index:20}.book-tabs button{height:58px;border-radius:0;border-left:1px solid #b9852d;font-size:11px}.dashboard-book-links{display:none}.dashboard-book-topbar{grid-template-columns:1fr auto}.magic-book:before{background:#f6dfb4}}
@media(max-width:680px){.magic-book-shell{padding:82px 10px 10px}.book-page{padding:30px 20px}.book-page h1{font-size:34px}.dashboard-book-mini-grid,.badge-grid,.title-cards,.progress-badges{grid-template-columns:1fr 1fr}.body-map-visual{gap:16px;transform:scale(.82);margin:-20px}.book-tabs button{justify-content:center}.book-tabs button span:not(.book-tab-icon){display:none}}

/* Setup: content should flow naturally instead of forcing three oversized viewport rows. */
@media (min-width:901px){
  .setup-main.page-width{width:min(1500px,calc(100% - 72px));max-width:1500px;padding:calc(72px + 22px) 0 34px}
  .setup-layout{grid-template-columns:minmax(0,1.7fr) minmax(340px,.72fr);gap:30px;align-items:start}
  .setup-form{height:auto !important;grid-template-rows:none !important;grid-auto-rows:auto !important;gap:14px}
  .setup-page .setup-card{height:auto !important;min-height:190px}
  .setup-page .setup-actions{height:auto !important;padding-bottom:8px}
  .setup-rail{height:auto !important;grid-template-rows:auto auto auto;position:sticky;top:78px}
  .setup-page .setup-guide{height:310px;min-height:310px}
  .academy-values{height:auto}
}
.setup-page .setup-footer{position:relative!important;bottom:auto!important;margin-top:0}

/* =========================================================
   2026-09-14 onboarding validation states
   ========================================================= */
.setup-save-btn:disabled,
.setup-save-btn[aria-disabled="true"] {
  cursor: not-allowed;
  filter: grayscale(.45) brightness(.82);
  opacity: .62;
  box-shadow: none !important;
  transform: none !important;
}
.setup-completion-hint {
  margin: 8px 0 0;
  text-align: center;
  color: rgba(253,248,238,.72);
  font-size: 12px;
  font-weight: 700;
}
.setup-completion-hint.is-ready { color: #f2c75c; }
.setup-card.needs-attention {
  animation: setupAttention 720ms ease;
  box-shadow: 0 0 0 3px rgba(225,171,53,.72), 0 18px 36px rgba(0,0,0,.28) !important;
}
@keyframes setupAttention {
  0%,100% { transform: translateX(0); }
  22% { transform: translateX(-5px); }
  44% { transform: translateX(5px); }
  66% { transform: translateX(-3px); }
  88% { transform: translateX(3px); }
}

/* =========================================================
   2026-09-14 refined dashboard book — closer to visual brief
   ========================================================= */
.dashboard-book-page {
  background:
    linear-gradient(180deg, rgba(3,10,24,.16), rgba(3,10,24,.46)),
    url('../images/indoor/hall-background-desktop-no-bike.png') center / cover fixed no-repeat;
}
.magic-book-shell {
  --book-h: min(760px, calc(100vh - 108px));
  min-height: 100vh;
  padding: 88px 32px 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.magic-book {
  width: min(1440px, calc(100vw - 234px));
  height: var(--book-h);
  min-height: var(--book-h);
  max-height: var(--book-h);
  flex: 0 0 auto;
  border: 0;
  border-radius: 26px 20px 20px 26px;
  background: url('../images/dashboard/book_masked.png') center / 100% 100% no-repeat;
  box-shadow: 0 34px 80px rgba(0,0,0,.56);
  box-sizing: border-box;
  padding: 58px 100px 62px;
}
.magic-book:before {
  content: none;
}
.book-spine {
  display: none;
}

.magic-book::after {
  content: none;
}
.book-view {
  min-height: 0;
  height: 100%;
  column-gap: 26px;
}
.book-page {
  padding: 10px 28px 10px;
  overflow: auto;
  max-height: 100%;
}
.book-page-left { border-right: 0; }
.book-page h1 { font-size: 41px; letter-spacing: -.025em; }
.book-page h2 { letter-spacing: -.015em; }
.book-kicker { color: #765324; letter-spacing: .13em; }
.book-rule { margin: 9px 0 16px; background: linear-gradient(90deg,#a87322 0 55%,transparent); }

.dashboard-page-heading {
  display: flex;
  align-items: center;
  gap: 15px;
}
.dashboard-page-heading h1 { line-height: 1; }
.dashboard-page-heading .book-kicker { margin: 8px 0 0; }
.dashboard-compass-mark {
  width: 55px;
  height: 55px;
  flex: 0 0 55px;
  display: grid;
  place-items: center;
  border: 2px solid #b8842a;
  border-radius: 50%;
  color: #b8842a;
  font-size: 34px;
  font-family: Georgia, serif;
  box-shadow: 0 0 0 4px rgba(184,132,42,.08);
}

.parchment-card {
  border-color: rgba(145,95,30,.45);
  background: rgba(255,241,203,.27);
  box-shadow: inset 0 0 22px rgba(122,71,17,.045);
}

.anatomy-body-map-card {
  min-height: 0;
  padding: 7px 16px 6px;
  position: relative;
  overflow: hidden;
}
.anatomy-body-map-card:before,
.anatomy-body-map-card:after {
  content: "✦";
  position: absolute;
  color: rgba(170,117,30,.52);
  font-size: 18px;
}
.anatomy-body-map-card:before { left: 12px; top: 10px; }
.anatomy-body-map-card:after { right: 12px; bottom: 10px; }
.body-map-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 2px 4px 0;
}
.body-map-heading h2 {
  margin: 0 0 4px;
  font-size: 21px;
}
.body-map-heading p {
  margin: 0;
  color: #755c39;
  font: italic 12px/1.35 Georgia, serif;
}
.body-map-visual.anatomy-body-map {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  justify-items: center;
  padding: 1px 4px 4px;
  min-height: 0;
}
.anatomy-figure {
  margin: 0;
  width: 100%;
  display: grid;
  justify-items: center;
  align-content: end;
}
.anatomy-bunny {
  display: block;
  width: min(100%, 118px);
  height: 200px;
  overflow: visible;
  filter: drop-shadow(0 4px 2px rgba(107,63,18,.07));
}
.anatomy-figure figcaption {
  margin-top: -2px;
  font: 13px Georgia, serif;
  color: #67451f;
}
.bunny-base .ear-shell,
.bunny-base .head-shell,
.bunny-base .torso-shell,
.bunny-base .arm-shell,
.bunny-base .leg-shell,
.bunny-base .foot-shell,
.bunny-base .tail-shell {
  fill: #f5dca7;
  stroke: #9d672d;
  stroke-width: 3.1;
  stroke-linejoin: round;
}
.bunny-base .cheek-shell {
  fill: none;
  stroke: #9d672d;
  stroke-width: 3;
  stroke-linecap: round;
}
.bunny-base .ear-inner {
  fill: #eab779;
  opacity: .62;
  stroke: none;
}
.muscle-zone {
  stroke: #fff1cf;
  stroke-width: 2.1;
  stroke-linejoin: round;
  transition: fill 180ms ease, filter 180ms ease;
}
.muscle-zone.is-rest { fill: #ef8137; }
.muscle-zone.is-trained { fill: #5a9a52; }
.muscle-zone.is-trained { filter: drop-shadow(0 0 2px rgba(58,121,54,.18)); }
.cardio-heart {
  fill: #f8e2b1;
  stroke: #9c6935;
  stroke-width: 1.4;
  opacity: .9;
}
.cardio-heart.is-trained { fill: #5a9a52; stroke: #fff0ce; }
.tail-shell { fill: #f7e5c0 !important; }
.glute-zone { opacity: .92; }
.body-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: -2px;
  color: #594323;
  font-size: 11px;
}
.body-legend i {
  width: 13px;
  height: 13px;
  margin-right: 6px;
  background: #ef8137;
  border: 1px solid rgba(119,72,21,.15);
}
.body-legend i.trained-dot { background: #5a9a52; }
.dashboard-quote-plaque {
  margin-top: 4px;
  padding: 5px 10px;
  max-width: 360px;
  border: 1px solid rgba(150,102,38,.42);
  border-radius: 8px;
  background: rgba(255,239,198,.22);
  font-size: 13px;
}

.dashboard-welcome-row {
  margin: 5px 0 17px;
  align-items: flex-start;
}
.dashboard-welcome-row h2 {
  margin: 0;
  font-size: 31px;
}
.dashboard-welcome-row .book-kicker { margin: 6px 0 0; }
.dashboard-welcome-row img { width: 92px; margin-top: -12px; }
.dashboard-history-card { margin-bottom: 14px; }
.dashboard-history-card .card-title-row { margin-bottom: 5px; }
.dashboard-history-card .card-title-row h2,
.identity-card .card-title-row h2,
.stats-card .card-title-row h2 { display: flex; align-items: center; gap: 7px; }
.section-title-icon { color: #95651f; font-size: 15px; }
.history-row {
  grid-template-columns: 25px minmax(0,1fr) 72px 88px 12px;
  gap: 8px;
  padding: 9px 0;
  font-size: 12px;
}
.history-row strong { font-size: 12px; }
.history-row b { text-align: center; font-size: 12px; }
.history-row small { text-transform: capitalize; }
.history-arrow { color: #6f532c; font: 22px/1 Georgia, serif; }
.history-check {
  width: 22px;
  height: 22px;
  font-size: 13px;
}
.history-check.is-empty { background: transparent; color: #96764d; border: 1px solid #b49362; }
.history-empty-row {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  color: #7b6240;
  font-style: italic;
  font-size: 12px;
}
.dashboard-book-mini-grid-refined {
  grid-template-columns: 1.06fr .94fr;
  gap: 13px;
}
.dashboard-book-mini-grid-refined .parchment-card { margin-bottom: 0; min-height: 0; }
.identity-card p { padding: 6px 0; font-size: 12px; }
.identity-card p strong { text-align: right; color: #17233a; }
.identity-motto {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(112,75,28,.14);
  text-align: center;
  color: #6b4a27;
  font: italic 13px Georgia, serif;
}
.dashboard-book-page .stats-grid { margin-top: 4px; }
.dashboard-book-page .stats-grid span {
  min-height: 52px;
  padding: 6px 6px 5px;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  justify-content: center;
  column-gap: 7px;
  border-color: rgba(112,75,28,.14);
}
.dashboard-book-page .stats-grid em {
  grid-row: 1 / 3;
  align-self: center;
  color: #b37a25;
  font-style: normal;
  font-size: 18px;
}
.dashboard-book-page .stats-grid b {
  font-size: 25px;
  line-height: 1;
  text-align: left;
}
.dashboard-book-page .stats-grid small {
  font-size: 9px;
  line-height: 1.1;
  text-align: left;
}
.book-footer-motto { margin: 18px 0 0; font-size: 15px; }

.book-tabs {
  margin-left: -45px;
  align-self: center;
  display: flex;
  flex-direction: column;
  width: 158px;
  height: var(--book-h);
  max-height: var(--book-h);
  padding-top: calc(var(--book-h) * 0.108);
  gap: calc(var(--book-h) * 0.0132);
  box-sizing: border-box;
  flex: 0 0 auto;
}
.book-tabs button {
  flex: 1 1 0;
  min-height: 0;
  max-height: 64px;
  padding: 0 14px;
  border-color: #c28c2c;
  background: linear-gradient(180deg,#14233f,#0d1a31);
  color: #efc962;
  box-shadow: 4px 8px 18px rgba(0,0,0,.33), inset 0 0 0 1px rgba(255,213,105,.12);
  font-family: Georgia, serif;
  font-size: 14px;
}
.book-tabs button.is-active {
  background: linear-gradient(180deg,#1b355c,#102647);
  color: #ffe19a;
  box-shadow: 0 0 0 2px #e3b74f inset, 0 0 22px rgba(229,179,66,.42);
}

@media (max-width: 1320px) {
  .magic-book-shell { padding: 88px 26px 20px; }
  .magic-book { width: min(1100px, calc(100vw - 212px)); }
  .book-page { padding: 32px 30px 28px; }
  .anatomy-bunny { width: 180px; height: 330px; }
}
@media (max-width: 1100px) {
  .magic-book-shell { padding: 20px; }
  .magic-book { width: 100%; }
  .book-view { grid-template-columns: 1fr; }
  .anatomy-bunny { width: min(100%, 220px); }
  .dashboard-book-mini-grid-refined { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .dashboard-page-heading { gap: 10px; }
  .dashboard-compass-mark { width: 42px; height: 42px; flex-basis: 42px; font-size: 25px; }
  .body-map-visual.anatomy-body-map { gap: 0; }
  .anatomy-bunny { width: 165px; height: 305px; }
  .dashboard-book-mini-grid-refined { grid-template-columns: 1fr; }
  .history-row { grid-template-columns: 24px 1fr 60px 12px; }
  .history-row small { display: none; }
}

/* Dashboard sub-pages aligned to supplied book references. */
.profile-reference-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:16px;align-items:center;margin:10px 0 14px}.profile-reference-portrait{text-align:center}.profile-medallion{width:210px;height:210px;margin:auto;border-radius:50%;padding:12px;background:radial-gradient(circle,#f8e6bd 0 62%,#17345a 63% 70%,#c99332 71% 75%,transparent 76%);display:grid;place-items:center}.profile-medallion img{width:158px;height:158px;object-fit:contain;border-radius:50%;background:#112442}.profile-reference-portrait p{margin:4px 0 0;color:#654923;font:italic 17px/1.25 Georgia,serif}.profile-identity-reference{margin:0}.profile-identity-reference p{display:flex;justify-content:space-between;gap:12px;padding:12px 0;margin:0;border-bottom:1px solid rgba(112,75,28,.14);font-size:12px}.profile-identity-reference p span{color:#725a37}.profile-journal-reference{margin-top:14px}.profile-journal-reference p{font:italic 16px/1.5 Georgia,serif}.dashboard-welcome-row h2 em{font-weight:400}.level-reference-row{display:grid;grid-template-columns:64px 1fr 1.1fr;gap:14px;align-items:center}.level-emblem{width:58px;height:64px;display:grid;place-items:center;background:#18345c;color:#efc45f;border:5px double #b9842b;border-radius:45% 45% 52% 52%;font-size:28px}.level-reference-row strong,.level-reference-row small{display:block}.level-reference-row strong{font:700 17px Georgia}.level-reference-row small{font-size:11px;color:#6f5431}.level-xp b{display:block;text-align:right;font:700 15px Georgia}.profile-level-reference>p{margin:2px 0 0;color:#674a27;font:italic 12px Georgia}.weekly-focus-reference .focus-reference-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.focus-reference-grid span{padding:12px 8px;border:1px solid rgba(142,96,34,.28);border-radius:18px;text-align:center;font:700 12px/1.15 Georgia}.focus-reference-grid span b{display:inline-block;margin-right:5px;color:#a87422;font-size:22px}.focus-reference-grid span.is-selected{background:#f1d996;box-shadow:inset 0 0 0 2px #c7902c}.favorite-reference-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;text-align:center}.favorite-reference-grid span{display:grid;justify-items:center;gap:5px}.favorite-reference-grid b{width:47px;height:47px;display:grid;place-items:center;border:1px solid rgba(143,96,34,.3);border-radius:50%;font-size:23px;background:rgba(255,242,207,.38)}.favorite-reference-grid small{font-size:9px;text-transform:capitalize}.profile-creed{text-align:center;color:#6c4d27;font:italic 13px/1.4 Georgia,serif}
.preferences-intro{text-align:center;color:#6d4b25;font:italic 17px/1.3 Georgia,serif;margin:8px 0 15px}.preferences-intro small{display:block;margin-top:5px;font:11px/1.35 Arial;color:#7a6040}.preference-reference-card{margin-bottom:12px}.preference-reference-card .card-title-row{display:block}.preference-reference-card .card-title-row h2{font-size:16px}.preference-reference-card .card-title-row span{display:block;margin-top:2px}.preference-tile-grid{display:grid;gap:8px}.preference-activity-grid{grid-template-columns:repeat(5,1fr)}.preference-tile-grid>span{min-height:58px;padding:8px 6px;border:1px solid rgba(143,96,34,.28);border-radius:11px;display:grid;place-items:center;text-align:center;font-size:10px;font-weight:700}.preference-tile-grid>span b{display:block;font-size:22px}.preference-tile-grid>span.is-selected,.environment-reference-grid>span.is-selected{background:#17345a;color:#f5d374;box-shadow:inset 0 0 0 2px #d6a83d}.duration-reference-grid{grid-template-columns:repeat(5,1fr)}.environment-reference-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.environment-reference-grid>span{min-height:84px;padding:8px;border:1px solid rgba(143,96,34,.28);border-radius:11px;display:grid;place-items:center;text-align:center}.environment-reference-grid b{font-size:26px}.environment-reference-grid strong,.environment-reference-grid small{display:block}.environment-reference-grid small{font-size:8px}.time-reference-grid{grid-template-columns:repeat(4,1fr)}.preference-pair-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.triple-reference-grid{grid-template-columns:repeat(3,1fr)}.compact-preference-card{padding:13px 14px}.notification-reference-card{display:grid;grid-template-columns:1fr 1.15fr;gap:15px;align-items:center}.notification-reference-card h2{margin:0;font-size:17px}.notification-reference-card small{font-size:9px;color:#765d3a}.notification-reference-list{display:grid;gap:7px}.notification-reference-list span{display:flex;justify-content:space-between;align-items:center;font-size:10px}.notification-reference-list i{width:30px;height:16px;border-radius:99px;background:#17345a;position:relative}.notification-reference-list i:after{content:"";position:absolute;width:12px;height:12px;right:2px;top:2px;border-radius:50%;background:#dfb74d}.preference-edit-link{float:right;margin-top:2px}
.activity-reference-card{min-height:0}.activity-timeline-reference>div{grid-template-columns:92px 14px 1fr 70px}.activity-timeline-reference>div>b{text-align:right;font-size:11px}.activity-timeline-reference time{white-space:nowrap;font-size:11px}.activity-summary-strip{grid-template-columns:repeat(4,1fr)}.daily-chart-reference{padding:8px 14px}.activity-lower-reference-grid{display:grid;grid-template-columns:1.45fr .7fr;gap:8px}.current-streak-reference{text-align:center}.streak-big{font:700 16px Georgia;color:#8b5d19}.streak-big b{font-size:30px}.streak-big small{display:block;font-size:11px}.streak-dots{color:#c08c30;font-size:11px;letter-spacing:2px}.current-streak-reference p{margin:4px 0 0;font:italic 10px Georgia}.activity-journal-reference p{margin:0;font:italic 11px/1.35 Georgia;color:#654a29}.week-range{color:#6d5230;font:12px Georgia}
.achievement-reference-card{margin-bottom:13px}.achievement-summary-reference{grid-template-columns:repeat(3,1fr)}.achievements-left-reference .badge-grid{gap:8px}.achievements-left-reference .badge b{width:70px;height:80px}.achievements-left-reference .streak-row{gap:6px}.achievements-left-reference .streak-medal{font-size:28px}.achievements-left-reference .streak-medal b{font-size:9px}.achievements-right-reference .progress-badges{grid-template-columns:repeat(5,1fr)}
@media(max-width:1320px){.profile-medallion{width:180px;height:180px}.profile-medallion img{width:135px;height:135px}.favorite-reference-grid{grid-template-columns:repeat(3,1fr)}.activity-reference-card{min-height:460px}}
@media(max-width:1100px){.profile-reference-grid,.preference-pair-grid,.activity-lower-reference-grid{grid-template-columns:1fr}.preference-activity-grid{grid-template-columns:repeat(3,1fr)}.activity-summary-strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.profile-reference-grid{grid-template-columns:1fr}.level-reference-row{grid-template-columns:56px 1fr}.level-xp{grid-column:1/-1}.preference-activity-grid,.duration-reference-grid,.time-reference-grid{grid-template-columns:repeat(2,1fr)}.environment-reference-grid{grid-template-columns:1fr}.notification-reference-card{grid-template-columns:1fr}.achievements-right-reference .progress-badges{grid-template-columns:repeat(2,1fr)}}

/* Compact all book pages so content fits without an internal scrollbar. */
.book-page { overflow: hidden; }
.book-page h1 { font-size: 32px; }
.book-rule { margin: 4px 0 8px; }
.dashboard-page-heading { gap: 8px; }
.dashboard-compass-mark { width: 34px; height: 34px; flex: 0 0 34px; font-size: 20px; }
.book-page h1 { margin: 0 0 2px; }
.body-map-heading { padding: 0; }
.body-legend { margin-top: 2px; }
.parchment-card { padding: 8px 12px; margin-bottom: 7px; }
.summary-strip, .achievement-summary { padding: 0; }
.summary-strip span, .achievement-summary span { padding: 7px; }
.summary-strip b, .achievement-summary b { font-size: 20px; }
.card-title-row { margin-bottom: 7px; }
.card-title-row h2 { font-size: 16px; }
.welcome-row { margin-bottom: 10px; }
.welcome-row img { width: 70px; }
.book-bars { height: 56px; }
.history-row { padding: 6px 0; }
.activity-timeline > div { padding: 4px 0; }
.activity-timeline-reference > div p { margin: 0; font-size: 12px; }
.activity-timeline-reference > div small { font-size: 10px; }
.badge b { width: 62px; height: 70px; font-size: 22px; }
.badge strong, .badge small { margin-top: 4px; }
.title-cards > span { padding: 12px 8px; }
.dashboard-book-mini-grid, .identity-card p, .profile-fields p { gap: 10px; padding: 6px 0; }
.profile-portrait-wrap { margin: 10px auto; }
.profile-portrait-wrap img { width: 150px; height: 150px; }
.level-progress { margin: 10px 0; }
.book-footer-motto { margin: 6px 0 0; }
.quest-recommended-name { margin: 6px 0 4px; }
.quest-recommended-detail { margin: 0 0 10px; }

/* Preferences page is content-heavy — compact it further to fit the fixed book height. */
.preferences-intro { margin: 3px 0 8px; font-size: 13px; }
.preferences-intro small { margin-top: 3px; font-size: 10px; }
.preference-reference-card { margin-bottom: 4px; padding: 7px 12px; }
.preference-reference-card .card-title-row { margin-bottom: 4px; }
.preference-reference-card .card-title-row h2 { font-size: 13px; }
.preference-reference-card .card-title-row span { font-size: 10px; margin-top: 1px; }
.preference-tile-grid { gap: 6px; }
.preference-tile-grid > span { min-height: 38px; padding: 4px 5px; font-size: 9px; }
.preference-tile-grid > span b { font-size: 15px; }
.environment-reference-grid { gap: 6px; }
.environment-reference-grid > span { min-height: 48px; padding: 5px; }
.environment-reference-grid b { font-size: 16px; }
.environment-reference-grid strong { font-size: 11px; }
.environment-reference-grid small { font-size: 7px; }
.preference-pair-grid { gap: 6px; margin-bottom: 0; }
.profile-creed { margin: 4px 0 0; font-size: 11px; }
.notification-reference-card { padding: 8px 12px; gap: 10px; }
.notification-reference-card h2 { font-size: 13px; }
.notification-reference-list { gap: 4px; }
.preference-edit-link { margin-top: 6px; padding: 8px 14px; font-size: 12px; }
.dashboard-welcome-row { margin-bottom: 6px; }
.dashboard-welcome-row h2 { font-size: 19px; }
.dashboard-welcome-row img { width: 55px; }

/* Profile / Dashboard body-map pages — trim oversized fixed-size art and rows. */
.profile-reference-grid { margin: 4px 0 8px; gap: 10px; }
.profile-medallion { width: 128px; height: 128px; padding: 7px; }
.profile-medallion img { width: 96px; height: 96px; }
.profile-reference-portrait p { margin: 3px 0 0; font-size: 13px; }
.profile-identity-reference p { padding: 6px 0; }
.profile-journal-reference { margin-top: 6px; }
.profile-journal-reference p { font-size: 13px; line-height: 1.35; }
.level-reference-row { gap: 10px; }
.level-emblem { width: 44px; height: 48px; font-size: 20px; }
.level-progress { margin: 6px 0; height: 10px; }
.profile-level-reference > p { margin: 1px 0 0; font-size: 11px; }
.weekly-focus-reference .focus-reference-grid { gap: 6px; }
.focus-reference-grid span { padding: 8px 6px; font-size: 11px; }
.focus-reference-grid--single { display: flex !important; justify-content: center; }
.focus-reference-grid--single span { flex: 0 1 160px; }
.favorite-reference-grid b { width: 36px; height: 36px; font-size: 17px; }
.history-row { margin: 0; }
.dashboard-history-card { margin-bottom: 8px; }


.quest-outdoor-map.leaflet-container {
  display: block;
  position: relative;
}
.quest-dest-pin-marker {
  background: transparent;
  border: none;
}


/* ==========================================================================
   UNIFIED QUESTS SPREAD (WARM PARCHMENT PALETTE - NO STARK WHITE)
   ========================================================================== */

.book-view[hidden],
.book-view:not(.is-active) {
  display: none !important;
}

.book-view[data-book-view="quests"].is-active,
.book-view[data-book-view="quests"]:not([hidden]) {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  column-gap: 26px;
  row-gap: 0;
  height: 100%;
  box-sizing: border-box;
}

.book-view[data-book-view="quests"][hidden] {
  display: none !important;
}

.quest-plan-page,
.quest-outdoor-page {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  box-sizing: border-box;
  padding-bottom: 2px;
}

/* Warm, transparent parchment card tone matching the ancient grimoire paper */
.quest-prep-card,
.quest-outdoor-card {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
  padding: 14px 18px 12px !important;
  background: rgba(255, 241, 203, 0.32) !important;
  border: 1.5px solid rgba(145, 95, 30, 0.42) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 0 24px rgba(122, 71, 17, 0.05) !important;
  box-sizing: border-box;
  backdrop-filter: blur(2px);
}

.quest-card-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.quest-prep-heading,
.quest-outdoor-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: #8a5f22;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.quest-prep-hero,
.quest-outdoor-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.quest-outdoor-hero--with-location {
  position: relative;
}
.quest-outdoor-hero--with-location .quest-hero-text {
  min-width: 0;
  padding-right: 58px;
}

.quest-live-location {
  position: absolute;
  top: 50%;
  right: 0;
  width: 50px;
  height: 48px;
  padding: 4px 3px 3px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid rgba(138, 95, 34, .45);
  border-radius: 10px;
  background: rgba(255, 244, 216, .62);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .65), 0 2px 6px rgba(77, 48, 15, .12);
  color: #765228;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.quest-live-location:hover,
.quest-live-location:focus-visible {
  border-color: #9b6c24;
  background: rgba(255, 249, 232, .92);
  box-shadow: 0 0 0 2px rgba(184, 134, 44, .2), 0 3px 8px rgba(77, 48, 15, .14);
  outline: none;
}
.quest-live-location-icon {
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-sizing: border-box;
}
.quest-live-location-icon::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .7;
}
.quest-live-location-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.quest-live-location-label {
  display: block;
  max-width: 44px;
  overflow: hidden;
  color: inherit;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.05;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.quest-live-location.is-locating .quest-live-location-icon {
  animation: questLocationSpin .9s linear infinite;
}
.quest-live-location.is-live {
  border-color: rgba(76, 130, 61, .62);
  background: rgba(221, 239, 207, .82);
  color: #376d2c;
}
.quest-live-location.is-live .quest-live-location-icon::after {
  animation: questLocationPulse 1.45s ease-out infinite;
}
.quest-live-location.is-error {
  border-color: rgba(164, 76, 52, .55);
  color: #944831;
}
.book-flip-stage .quest-live-location,
.book-flip-stage .quest-live-location-icon,
.book-flip-stage .quest-live-location-icon::after {
  animation: none !important;
  transition: none !important;
}
@keyframes questLocationSpin {
  to { transform: rotate(360deg); }
}
@keyframes questLocationPulse {
  0% { box-shadow: 0 0 0 0 rgba(55, 109, 44, .5); }
  75%, 100% { box-shadow: 0 0 0 6px rgba(55, 109, 44, 0); }
}

/* Warm parchment badge with antique gold border */
.quest-glyph-badge {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: rgba(255, 243, 214, 0.62);
  border: 1.5px solid rgba(184, 132, 42, 0.42);
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.45), 0 2px 8px rgba(112, 75, 28, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.quest-glyph-badge--outdoor {
  background: rgba(220, 235, 210, 0.52);
  border: 1.5px solid rgba(107, 157, 85, 0.45);
}

.quest-outdoor-pin-icon {
  font-size: 24px;
  line-height: 1;
}

.quest-prep-glyph {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.quest-hero-text h2 {
  margin: 0;
  font-size: 21px;
  color: #18243b;
  font-family: Georgia, serif;
  line-height: 1.2;
}

.quest-hero-sub {
  margin: 3px 0 0;
  font-size: 12px;
  font-weight: 500;
  color: #7a5830;
}

.quest-prep-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin: 0 0 12px;
  padding: 8px 12px;
  background: rgba(255, 243, 214, 0.38);
  border: 1px solid rgba(184, 132, 42, 0.24);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #5f4220;
}

.quest-section-subtitle {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8a5f22;
  margin-bottom: 6px;
}

.quest-step-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 4px 0 12px;
}

/* Warm parchment step tile - seamlessly blending with antique book paper */
.quest-step-tile {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  background: rgba(255, 245, 222, 0.58);
  border: 1.2px solid rgba(145, 95, 30, 0.34);
  border-radius: 12px;
  padding: 10px 6px 8px;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.4), 0 2px 6px rgba(112, 75, 28, 0.07);
  box-sizing: border-box;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.quest-step-tile:hover {
  transform: translateY(-2px);
  background: rgba(255, 248, 230, 0.78);
  border-color: rgba(184, 132, 42, 0.6);
}

.quest-step-badge {
  position: absolute;
  top: -6px;
  left: 6px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #b8842a;
  color: #fff8e6;
  font-size: 9.5px;
  font-weight: 800;
  display: grid;
  place-items: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

.quest-step-icon-wrap {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  margin-bottom: 4px;
}

.quest-step-icon-wrap img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.quest-step-tile p {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  color: #3b2812;
  text-align: center;
  line-height: 1.2;
}

.quest-step-tile p small {
  display: block;
  font-size: 9.5px;
  font-weight: 500;
  color: #7c5c2d;
  margin-top: 2px;
}

.quest-step-arrow {
  color: #a06e28;
  font-size: 26px !important;
  font-weight: 900 !important;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  user-select: none;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
  padding: 0 4px;
  transform: translateY(-1px);
}

/* Warm parchment why-box */
.quest-why-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 244, 218, 0.48);
  border-left: 3.5px solid #b8842a;
  border-top: 1px solid rgba(184, 132, 42, 0.22);
  border-right: 1px solid rgba(184, 132, 42, 0.22);
  border-bottom: 1px solid rgba(184, 132, 42, 0.22);
  border-radius: 8px;
  margin: 4px 0 10px;
  font-size: 11.5px;
  line-height: 1.45;
  color: #533b1f;
}

.quest-why-lamp {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

.quest-why-box strong {
  display: block;
  color: #2a1c05;
  font-size: 12px;
  margin-bottom: 2px;
}

.quest-why-box p {
  margin: 0;
}

/* Right card map expanded with antique parchment border */
.quest-outdoor-map {
  height: 145px !important;
  margin-bottom: 8px;
  border-radius: 12px;
  background: linear-gradient(180deg, #dfeadc, #cfe3cc);
  border: 1.5px solid rgba(145, 95, 30, 0.42) !important;
  display: block !important;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.12);
}

.quest-outdoor-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.quest-outdoor-chips span {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(107, 157, 85, 0.16);
  border: 1px solid rgba(107, 157, 85, 0.3);
  color: #2f5c22;
  font-size: 11.5px;
  font-weight: 700;
}

.quest-outdoor-note {
  margin: 0 0 8px;
  font-size: 11.5px;
  color: #6b4a27;
  line-height: 1.35;
}

.quest-start-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100% !important;
  margin-top: auto !important;
  padding: 12px 18px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #e2b658, #c8963a) !important;
  box-shadow: 0 6px 16px rgba(150, 105, 20, 0.28) !important;
  color: #2a1c05 !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  text-decoration: none !important;
  text-align: center;
  box-sizing: border-box;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.quest-start-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(150, 105, 20, 0.38) !important;
}

.quest-links-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
}

.quest-choose-link {
  font-size: 12px;
  font-weight: 700;
  color: #8a5f22;
  text-decoration: none;
}
.quest-choose-link:hover {
  text-decoration: underline;
}

.quest-reset-link {
  font-size: 11px;
  font-weight: 600;
  color: #8a7350;
  text-decoration: none;
}
.quest-reset-link:hover {
  color: #3b2812;
  text-decoration: underline;
}


/* ==========================================================================
   DEDICATED TABLET & MOBILE DASHBOARD EXPERIENCE (CODEX MOBILE COMPANION)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TABLET & COMPACT SCREENS (<= 1024px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  /* Topbar */
  .dashboard-book-topbar {
    height: 60px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 16px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 500 !important;
  }
  .dashboard-book-topbar .academy-brand {
    gap: 8px !important;
  }
  .dashboard-book-topbar .academy-brand img {
    width: 32px !important;
    height: 32px !important;
  }
  .dashboard-book-topbar .academy-brand span small {
    display: none !important;
  }
  .dashboard-book-links {
    display: flex !important;
    gap: 12px !important;
  }
  .dashboard-book-links .academy-nav-link {
    font-size: 13px !important;
    padding: 4px 6px !important;
  }

  /* Book Shell Container */
  .magic-book-shell {
    min-height: calc(100vh - 60px) !important;
    padding: 72px 14px 92px !important; /* bottom padding clears the floating dock */
    display: block !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Single-Card Grimoire Transformation */
  .magic-book {
    width: 100% !important;
    max-width: 820px !important;
    margin: 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    background: linear-gradient(180deg, #fbf2de 0%, #f5e4bf 35%, #eccea0 100%) !important;
    border: 2px solid #b88628 !important;
    border-radius: 20px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), inset 0 0 0 1.5px rgba(255, 235, 175, 0.7), inset 0 0 28px rgba(125, 75, 20, 0.12) !important;
    padding: 24px 20px 28px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Book View: Stacks naturally */
  .book-view {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 22px !important;
  }
  .book-view[hidden] {
    display: none !important;
  }

  .book-page {
    padding: 0 !important;
    overflow: visible !important;
    max-height: none !important;
    border: none !important;
  }

  /* Dedicated Floating Mobile Dock Navigation */
  .book-tabs {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    flex: none !important;
    margin: 0 !important;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 6px)) !important;
    background: rgba(6, 17, 39, 0.95) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-top: 1.5px solid rgba(225, 180, 74, 0.55) !important;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.65) !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
    z-index: 9999 !important;
    box-sizing: border-box !important;
  }

  .book-tabs button,
  .book-tabs .book-tab-btn {
    position: relative !important;
    width: 100% !important;
    height: 52px !important;
    padding: 4px 2px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    color: #cbb077 !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    box-shadow: none !important;
    margin: 0 !important;
    font-family: inherit !important;
  }

  .book-tab-icon {
    font-size: 19px !important;
    line-height: 1 !important;
    display: block !important;
    margin: 0 !important;
    transition: transform 0.2s ease !important;
  }
  .book-tab-icon--img img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
  }
  .book-tabs button span:not(.book-tab-icon),
  .book-tabs .book-tab-btn span:not(.book-tab-icon) {
    display: block !important;
    margin: 3px 0 0 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }

  /* Active dock tab item */
  .book-tabs button.is-active,
  .book-tabs .book-tab-btn.is-active {
    background: linear-gradient(180deg, rgba(29, 60, 107, 0.9), rgba(14, 34, 66, 0.95)) !important;
    color: #ffe6a0 !important;
    box-shadow: 0 0 12px rgba(229, 179, 66, 0.5), inset 0 0 0 1.5px #e5b342 !important;
    transform: translateY(-2px) !important;
  }
  .book-tabs button.is-active .book-tab-icon,
  .book-tabs .book-tab-btn.is-active .book-tab-icon {
    transform: scale(1.15) !important;
    color: #ffe6a0 !important;
    filter: drop-shadow(0 0 6px rgba(245, 203, 90, 0.8)) !important;
  }

  /* Quests View Layout on Tablet/Mobile */
  .quest-outdoor-map {
    height: 230px !important;
    margin-bottom: 12px !important;
    border-radius: 12px !important;
  }
  .quest-start-button {
    width: 100% !important;
    min-height: 48px !important;
    padding: 13px 18px !important;
    font-size: 14.5px !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  .quest-prep-stats {
    gap: 8px 16px !important;
    font-size: 11.5px !important;
  }
  .quest-journey-row {
    margin-top: 18px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    background: rgba(255, 244, 218, 0.45) !important;
    border: 1px solid rgba(184, 132, 42, 0.25) !important;
  }
}

/* --------------------------------------------------------------------------
   2. MOBILE PHONES (<= 768px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .magic-book-shell {
    padding: 68px 10px 88px !important;
  }
  .magic-book {
    padding: 18px 12px 22px !important;
    border-radius: 16px !important;
  }

  /* Headings */
  .dashboard-page-heading {
    gap: 10px !important;
    margin-bottom: 8px !important;
  }
  .dashboard-page-heading h1 {
    font-size: 26px !important;
  }
  .welcome-row h2 {
    font-size: 20px !important;
  }
  .welcome-row img {
    width: 64px !important;
  }
  .book-rule {
    margin: 8px 0 14px !important;
  }

  /* Parchment Card Sizing */
  .parchment-card {
    padding: 14px 12px !important;
    border-radius: 14px !important;
    margin-bottom: 14px !important;
  }

  /* Body Map on Mobile */
  .body-map-card {
    min-height: 0 !important;
  }
  .body-map-visual.anatomy-body-map {
    gap: 8px !important;
    padding: 10px 0 !important;
  }
  .anatomy-bunny {
    width: 155px !important;
    height: 275px !important;
  }
  .body-map-tags {
    gap: 6px !important;
  }
  .body-map-tags li {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }

  /* Dashboard Mini Grids */
  .dashboard-book-mini-grid,
  .dashboard-book-mini-grid-refined {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .dashboard-book-page .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Quests Warm-up Steps: Stack Vertically with Downward Arrow */
  .quest-step-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .quest-step-arrow {
    transform: rotate(90deg) !important;
    margin: -2px auto !important;
    padding: 0 !important;
    font-size: 20px !important;
  }
  .quest-step-tile {
    flex-direction: row !important;
    align-items: center !important;
    padding: 8px 12px !important;
    gap: 12px !important;
    text-align: left !important;
  }
  .quest-step-tile p {
    text-align: left !important;
    font-size: 12px !important;
  }
  .quest-step-icon-wrap {
    margin-bottom: 0 !important;
  }

  /* Quests Journey Bottom Row */
  .quest-journey-row {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 10px !important;
  }
  .quest-journey-steps {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  /* Profile on Mobile */
  .profile-reference-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    text-align: center !important;
  }
  .profile-medallion {
    width: 150px !important;
    height: 150px !important;
  }
  .profile-medallion img {
    width: 110px !important;
    height: 110px !important;
  }
  .level-reference-row {
    grid-template-columns: 52px 1fr !important;
    gap: 10px !important;
  }
  .level-xp {
    grid-column: 1 / -1 !important;
    text-align: left !important;
  }
  .focus-reference-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .favorite-reference-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  /* Preferences on Mobile */
  .preference-activity-grid,
  .duration-reference-grid,
  .time-reference-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .environment-reference-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .preference-pair-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .notification-reference-card {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Activity Log on Mobile */
  .activity-summary-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .activity-lower-reference-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .activity-timeline-reference > div {
    grid-template-columns: 75px 12px 1fr auto !important;
    font-size: 11px !important;
    gap: 8px !important;
  }

  /* Achievements on Mobile */
  .achievement-summary-reference {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .achievements-left-reference .badge-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .achievements-right-reference .progress-badges {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .title-cards {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

/* --------------------------------------------------------------------------
   3. EXTRA SMALL SCREENS (<= 480px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
  .dashboard-book-topbar {
    padding: 10px 10px 12px !important;
  }
  .dashboard-book-links {
    gap: 6px !important;
  }
  .dashboard-book-links .academy-nav-link {
    font-size: 13px !important;
    padding: 3px 5px !important;
  }
  .magic-book-shell {
    padding: 64px 6px 84px !important;
  }
  .magic-book {
    padding: 14px 10px 18px !important;
    border-radius: 14px !important;
  }
  .book-tabs button span:not(.book-tab-icon),
  .book-tabs .book-tab-btn span:not(.book-tab-icon) {
    font-size: 9px !important;
  }
  .book-tabs button .book-tab-icon,
  .book-tabs .book-tab-btn .book-tab-icon {
    font-size: 17px !important;
  }
}



/* ==========================================================================
   PREFERENCES FULL-PAGE SPREAD (MATCHING USER REFERENCE & QUESTS HEIGHT)
   ========================================================================== */
.book-view[data-book-view="preferences"] {
  min-height: 0;
  height: 100%;
}

.book-view[data-book-view="preferences"].is-active,
.book-view[data-book-view="preferences"]:not([hidden]) {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  min-height: 0 !important;
  height: 100% !important;
}

.preferences-page-fill {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  padding: 10px 28px !important;
  box-sizing: border-box !important;
}

.pref-left-top,
.pref-right-top {
  flex: 0 0 auto;
}

.preferences-page-heading {
  margin-bottom: 3px;
}

.preferences-quote-banner {
  text-align: center;
  padding: 7px 12px;
  margin: 3px 0 7px;
  border-top: 1px dashed rgba(184, 134, 44, 0.35);
  border-bottom: 1px dashed rgba(184, 134, 44, 0.35);
  background: rgba(248, 239, 218, 0.38);
  border-radius: 6px;
}
.preferences-quote-title {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: #6d4b25;
  margin: 0 0 2px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.preferences-quote-subtitle {
  font-size: 10px;
  color: #7a6040;
  margin: 0;
  line-height: 1.35;
}

.pref-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 auto;
  justify-content: space-around;
}

/* Blocks / Parchment Cards */
.pref-block-card {
  padding: 7px 13px;
  margin: 0;
  border: 1px solid rgba(143, 96, 34, 0.32);
  border-radius: 11px;
  background: rgba(255, 252, 244, 0.76);
  box-shadow: 0 2px 8px rgba(92, 60, 20, 0.04);
}

.pref-card-header {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 6px;
}
.pref-badge-icon {
  width: 30px;
  height: 30px;
  border: 1.5px solid #8e622b;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: #765228;
  background: rgba(235, 219, 184, 0.52);
  flex-shrink: 0;
  box-shadow: inset 0 1px 2px rgba(90, 50, 10, 0.12);
}
.pref-badge-icon .pref-svg-icon {
  width: 19px;
  height: 19px;
  fill: currentColor;
}
.pref-header-text h2 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 14px;
  font-weight: 700;
  color: #17243c;
  letter-spacing: -0.01em;
}
.pref-header-sub {
  margin: 1px 0 0;
  font-size: 10px;
  color: #765d3a;
}

/* Preferred Activities Row */
.pref-activities-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.pref-activity-tile {
  position: relative;
  height: 62px;
  padding: 5px 3px;
  border: 1px solid rgba(143, 96, 34, 0.28);
  border-radius: 9px;
  background: rgba(255, 251, 242, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #765228;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}
.pref-activity-tile:hover {
  transform: translateY(-1px);
  border-color: #b8862c;
  background: rgba(255, 255, 255, 0.95);
}
.pref-activity-tile .pref-tile-icon {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  color: inherit;
}
.pref-activity-tile .pref-tile-icon .pref-svg-icon {
  width: 21px;
  height: 21px;
  fill: currentColor;
}
.pref-activity-tile .pref-tile-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pref-activity-tile .pref-tile-name {
  font-size: 9.5px;
  font-weight: 700;
  color: inherit;
  white-space: nowrap;
}
.pref-activities-row-full {
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.pref-activities-row-full .pref-activity-tile {
  height: auto;
  min-height: 48px;
  padding: 4px 3px;
  gap: 2px;
}
.pref-activities-row-full .pref-tile-icon {
  width: 18px;
  height: 18px;
}
.pref-activities-row-full .pref-tile-name {
  white-space: normal;
  text-align: center;
  line-height: 1.1;
  font-size: 7.5px;
}
.pref-activity-tile .pref-tile-check {
  display: none;
}
.pref-activity-tile.is-selected {
  background: #102444;
  color: #f6df9a;
  border: 1.5px solid #dfb74d;
  box-shadow: 0 4px 12px rgba(16, 36, 68, 0.35), inset 0 0 10px rgba(223, 183, 77, 0.25);
}
.pref-activity-tile.is-selected .pref-tile-check {
  display: grid;
  place-items: center;
  position: absolute;
  top: 3px;
  right: 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #102444;
  border: 1.2px solid #dfb74d;
  color: #dfb74d;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
}

/* Preferred Duration Row */
.pref-duration-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.pref-duration-pill {
  height: 34px;
  border: 1px solid rgba(143, 96, 34, 0.28);
  border-radius: 999px;
  background: rgba(255, 251, 242, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #765228;
  cursor: pointer;
  transition: all 0.2s ease;
  gap: 3px;
}
.pref-duration-pill:hover {
  border-color: #b8862c;
  background: rgba(255, 255, 255, 0.95);
}
.pref-duration-pill .pref-pill-check {
  display: none;
}
.pref-duration-pill.is-selected {
  background: #102444;
  color: #f6df9a;
  border: 1.5px solid #dfb74d;
  box-shadow: 0 3px 10px rgba(16, 36, 68, 0.35);
}
.pref-duration-pill.is-selected .pref-pill-check {
  display: inline-grid;
  place-items: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #dfb74d;
  color: #102444;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  margin-right: 2px;
}

/* Environment Preference Row */
.pref-environment-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.pref-env-card {
  position: relative;
  min-height: 66px;
  padding: 8px 12px;
  border: 1px solid rgba(143, 96, 34, 0.28);
  border-radius: 11px;
  background: rgba(255, 251, 242, 0.85);
  display: flex;
  align-items: center;
  gap: 11px;
  color: #765228;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.pref-env-card:hover {
  border-color: #b8862c;
  background: rgba(255, 255, 255, 0.95);
}
.pref-env-card .pref-env-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: inherit;
}
.pref-env-card .pref-env-icon .pref-svg-icon {
  width: 32px;
  height: 32px;
  fill: currentColor;
}
.pref-env-card .pref-env-info h3 {
  margin: 0 0 2px;
  font-family: Georgia, serif;
  font-size: 14px;
  font-weight: 700;
  color: inherit;
}
.pref-env-card .pref-env-info p {
  margin: 0;
  font-size: 9.5px;
  color: inherit;
  opacity: 0.85;
}
.pref-env-card .pref-circle-radio {
  margin-left: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid rgba(118, 82, 40, 0.45);
  flex-shrink: 0;
  background: transparent;
}
.pref-env-card .pref-circle-check {
  margin-left: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #102444;
  border: 1.5px solid #dfb74d;
  color: #dfb74d;
  font-size: 10px;
  font-weight: 900;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  line-height: 1;
}
.pref-env-card.is-selected {
  background: #102444;
  color: #f6df9a;
  border: 1.5px solid #dfb74d;
  box-shadow: 0 4px 14px rgba(16, 36, 68, 0.38);
}
.pref-environment-row-triple {
  grid-template-columns: repeat(3, 1fr);
}
.pref-environment-row-triple .pref-env-card {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 10px 12px;
  min-height: 96px;
}
.pref-environment-row-triple .pref-env-card .pref-circle-radio,
.pref-environment-row-triple .pref-env-card .pref-circle-check {
  position: absolute;
  top: 8px;
  right: 8px;
  margin-left: 0;
}
.pref-environment-row-triple .pref-env-card .pref-env-icon {
  width: 28px;
  height: 28px;
}
.pref-environment-row-triple .pref-env-card .pref-env-icon .pref-svg-icon {
  width: 26px;
  height: 26px;
}
.pref-environment-row-triple .pref-env-info p {
  font-size: 8.5px;
}

/* Left Page Footer Creed */
.pref-page-footer {
  text-align: center;
  margin-top: 3px;
  padding-top: 4px;
  border-top: 1px solid rgba(184, 134, 44, 0.2);
  flex: 0 0 auto;
}
.pref-creed-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #b8862c;
  font-size: 11px;
  font-family: Georgia, serif;
  font-style: italic;
}
.pref-creed-text {
  margin: 0;
  color: #6d4b25;
}
.pref-creed-author {
  margin: 2px 0 0;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #8a6430;
  text-transform: uppercase;
}
.pref-star-mark {
  color: #d4a742;
  font-size: 10px;
}

/* RIGHT PAGE */
.pref-right-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 2px;
}
.pref-header-quote-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pref-right-quote {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.25;
  color: #17243c;
  margin: 0;
}
.pref-right-quote em {
  font-style: italic;
  color: #6d4b25;
}
.pref-quote-star {
  color: #d4a742;
  font-size: 13px;
}
.pref-crest-wrap {
  width: 55px;
  height: auto;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  align-self: flex-start;
  margin-top: -5px;
}
.pref-crest-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.12));
}

/* Preferred Time Row */
.pref-time-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.pref-time-card {
  position: relative;
  height: 52px;
  padding: 5px 3px;
  border: 1px solid rgba(143, 96, 34, 0.28);
  border-radius: 9px;
  background: rgba(255, 251, 242, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #765228;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.pref-time-card:hover {
  border-color: #b8862c;
  background: rgba(255, 255, 255, 0.95);
}
.pref-time-card .pref-tile-icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: inherit;
}
.pref-time-card .pref-tile-icon .pref-svg-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.pref-time-card .pref-tile-name {
  font-size: 10px;
  font-weight: 700;
  color: inherit;
}
.pref-time-card .pref-tile-check {
  display: none;
}
.pref-time-card.is-selected {
  background: #102444;
  color: #f6df9a;
  border: 1.5px solid #dfb74d;
  box-shadow: 0 4px 12px rgba(16, 36, 68, 0.35);
}
.pref-time-card.is-selected .pref-tile-check {
  display: grid;
  place-items: center;
  position: absolute;
  top: 3px;
  right: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #102444;
  border: 1.2px solid #dfb74d;
  color: #dfb74d;
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
}

/* 2x2 Sensitivity Grid */
.pref-sensitivity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.pref-mini-card {
  padding: 5px 8px;
  border: 1px solid rgba(143, 96, 34, 0.28);
  border-radius: 10px;
  background: rgba(255, 252, 244, 0.75);
  box-shadow: 0 2px 6px rgba(92, 60, 20, 0.04);
  margin: 0;
  box-sizing: border-box;
}
.pref-card-header--compact {
  gap: 6px;
  margin-bottom: 5px;
}
.pref-badge-icon--compact {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border-width: 1.2px;
}
.pref-badge-icon--compact .pref-svg-icon {
  width: 15px;
  height: 15px;
}
.pref-mini-card .pref-header-text h2 {
  font-size: 12px;
}
.pref-mini-card .pref-header-sub {
  font-size: 9px;
}

.pref-triple-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.5px;
}
.pref-tri-pill {
  position: relative;
  min-height: 40px;
  padding: 3px 2px;
  border: 1px solid rgba(143, 96, 34, 0.25);
  border-radius: 7px;
  background: rgba(255, 251, 242, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #765228;
  cursor: pointer;
  transition: all 0.2s ease;
}
.pref-tri-pill:hover {
  border-color: #b8862c;
  background: rgba(255, 255, 255, 0.95);
}
.pref-tri-pill strong {
  font-size: 9px;
  font-weight: 700;
  line-height: 1.15;
  color: inherit;
}
.pref-tri-pill small {
  font-size: 7.5px;
  color: inherit;
  opacity: 0.8;
  margin-top: 1px;
  line-height: 1.05;
}
.pref-tri-pill .pref-tri-check {
  display: none;
}
.pref-tri-pill.is-selected {
  background: #102444;
  color: #f6df9a;
  border: 1.2px solid #dfb74d;
  box-shadow: 0 2px 8px rgba(16, 36, 68, 0.3);
}
.pref-tri-pill.is-selected .pref-tri-check {
  display: grid;
  place-items: center;
  position: absolute;
  top: 2px;
  right: 2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #102444;
  border: 1px solid #dfb74d;
  color: #dfb74d;
  font-size: 6px;
  font-weight: 900;
  line-height: 1;
}

/* Right Page Footer Motto */
.pref-right-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3px;
  padding-top: 4px;
  border-top: 1px solid rgba(184, 134, 44, 0.2);
  flex: 0 0 auto;
}
.pref-motto-row {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #b8862c;
  font-size: 10.5px;
  font-family: Georgia, serif;
  font-style: italic;
}
.pref-footer-motto {
  margin: 0;
  color: #6d4b25;
}
.preference-edit-link {
  font-size: 10.5px;
  font-weight: 700;
  color: #8a5f22;
  text-decoration: none;
  transition: color 0.2s;
}
.preference-edit-link:hover {
  color: #102444;
  text-decoration: underline;
}

/* Responsive Overrides */
@media (max-width: 900px) {
  .book-view[data-book-view="preferences"].is-active,
  .book-view[data-book-view="preferences"]:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .preferences-page-fill {
    min-height: 0 !important;
    height: auto !important;
    padding: 14px 12px !important;
  }
  .pref-activities-row {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .pref-duration-row {
    flex-wrap: wrap !important;
  }
  .pref-environment-row {
    grid-template-columns: 1fr !important;
  }
  .pref-time-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .pref-sensitivity-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   Dashboard tab only — scale content up to use the full book page height
   (other tabs are already tuned to fill it; Dashboard had spare room).
   ========================================================================== */
.book-view[data-book-view="dashboard"] .book-rule,
.book-view[data-book-view="preferences"] .book-rule,
.book-view[data-book-view="quests"] .book-rule { margin: 8px 0 12px; }
.book-view[data-book-view="dashboard"] .dashboard-page-heading,
.book-view[data-book-view="preferences"] .dashboard-page-heading,
.book-view[data-book-view="quests"] .dashboard-page-heading { gap: 14px; margin-bottom: 0; }
.book-view[data-book-view="dashboard"] .dashboard-compass-mark,
.book-view[data-book-view="preferences"] .dashboard-compass-mark,
.book-view[data-book-view="quests"] .dashboard-compass-mark { width: 44px; height: 44px; flex: 0 0 44px; font-size: 26px; }
.book-view[data-book-view="dashboard"] .book-page h1,
.book-view[data-book-view="preferences"] .book-page h1,
.book-view[data-book-view="quests"] .book-page h1 { font-size: 38px; }

.book-view[data-book-view="dashboard"] .anatomy-body-map-card { padding: 16px 22px 16px; }
.book-view[data-book-view="dashboard"] .body-map-heading h2 { font-size: 24px; }
.book-view[data-book-view="dashboard"] .body-map-heading p { font-size: 14px; }
.book-view[data-book-view="dashboard"] .body-map-visual.anatomy-body-map { gap: 22px; padding: 12px 4px 10px; }
.book-view[data-book-view="dashboard"] .anatomy-bunny { width: 150px; height: 254px; }
.book-view[data-book-view="dashboard"] .anatomy-figure figcaption { font-size: 15px; margin-top: 2px; }
.book-view[data-book-view="dashboard"] .body-legend { margin-top: 14px; font-size: 13px; }

.book-view[data-book-view="dashboard"] .dashboard-quote-plaque {
  margin-top: 20px;
  padding: 14px 20px;
  max-width: 400px;
  font-size: 16px;
}

.book-view[data-book-view="dashboard"] .dashboard-welcome-row { margin-bottom: 30px; }
.book-view[data-book-view="dashboard"] .dashboard-welcome-row h2 { font-size: 25px; }
.book-view[data-book-view="dashboard"] .dashboard-identity-card { padding: 14px 18px; margin-bottom: 12px; }
.book-view[data-book-view="dashboard"] .dashboard-identity-card .card-title-row { margin-bottom: 4px; }
.book-view[data-book-view="dashboard"] .dashboard-identity-card p { padding: 6px 0; font-size: 13px; }
.book-view[data-book-view="dashboard"] .dashboard-history-card { margin-bottom: 14px; }
.book-view[data-book-view="dashboard"] .dashboard-history-card .card-title-row { margin-bottom: 8px; }
.book-view[data-book-view="dashboard"] .dashboard-history-card .card-title-row h2 { font-size: 17px; }
.book-view[data-book-view="dashboard"] .history-row { padding: 12px 0; font-size: 14px; }
.book-view[data-book-view="dashboard"] .history-row strong,
.book-view[data-book-view="dashboard"] .history-row b { font-size: 14px; }
.book-view[data-book-view="dashboard"] .history-check { width: 27px; height: 27px; font-size: 15px; }

.book-view[data-book-view="dashboard"] .dashboard-book-mini-grid-refined { gap: 18px; }
.book-view[data-book-view="dashboard"] .identity-card .card-title-row,
.book-view[data-book-view="dashboard"] .stats-card .card-title-row { margin-bottom: 8px; }
.book-view[data-book-view="dashboard"] .identity-card .card-title-row h2,
.book-view[data-book-view="dashboard"] .stats-card .card-title-row h2 { font-size: 16px; }
.book-view[data-book-view="dashboard"] .identity-card p { padding: 11px 0; font-size: 14px; }
.book-view[data-book-view="dashboard"] .identity-motto { margin-top: 14px; padding-top: 14px; font-size: 15px; }
.book-view[data-book-view="dashboard"] .dashboard-book-page .stats-grid { margin-top: 8px; }
.book-view[data-book-view="dashboard"] .dashboard-book-page .stats-grid span { min-height: 68px; padding: 10px 8px; }
.book-view[data-book-view="dashboard"] .dashboard-book-page .stats-grid em { font-size: 23px; }
.book-view[data-book-view="dashboard"] .dashboard-book-page .stats-grid b { font-size: 30px; }
.book-view[data-book-view="dashboard"] .dashboard-book-page .stats-grid small { font-size: 11px; }
.book-view[data-book-view="dashboard"] .book-footer-motto { margin-top: 14px; font-size: 17px; }
.book-view[data-book-view="dashboard"] .dashboard-stats-card { margin-top: 10px; }
.book-view[data-book-view="dashboard"] .dashboard-stats-card .stats-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
.card-title-row .dashboard-view-all {
  cursor: pointer;
  color: #a5691c;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.card-title-row .dashboard-view-all:hover { color: #7d4f12; }

/* ==========================================================================
   Profile / Activity Log / Achievements tabs — same "fill the page" pass.
   ========================================================================== */
.book-view[data-book-view="profile"] .book-rule,
.book-view[data-book-view="activity"] .book-rule,
.book-view[data-book-view="achievements"] .book-rule { margin: 8px 0 12px; }
.book-view[data-book-view="profile"] .dashboard-page-heading,
.book-view[data-book-view="activity"] .dashboard-page-heading,
.book-view[data-book-view="achievements"] .dashboard-page-heading { gap: 14px; }
.book-view[data-book-view="profile"] .dashboard-compass-mark,
.book-view[data-book-view="activity"] .dashboard-compass-mark,
.book-view[data-book-view="achievements"] .dashboard-compass-mark { width: 44px; height: 44px; flex: 0 0 44px; font-size: 26px; }
.book-view[data-book-view="profile"] .book-page h1,
.book-view[data-book-view="activity"] .book-page h1,
.book-view[data-book-view="achievements"] .book-page h1 { font-size: 38px; }
.book-view[data-book-view="achievements"] .dashboard-welcome-row,
.book-view[data-book-view="quests"] .dashboard-welcome-row { margin-bottom: 30px; }
/* Profile and Activity Log's left page has an extra "Back to Dashboard" row,
   and Preferences' left page has an extra quote banner, that the right page
   has no equivalent of — compensate here so both columns' first card still
   lines up, rather than leaving the right side sitting visibly higher. */
.book-view[data-book-view="profile"] .dashboard-welcome-row { margin-bottom: 77px; }
.book-view[data-book-view="activity"] .dashboard-welcome-row { margin-bottom: 73px; }
.book-view[data-book-view="preferences"] .dashboard-welcome-row { margin-bottom: 29px; }
.book-view[data-book-view="profile"] .dashboard-welcome-row h2,
.book-view[data-book-view="achievements"] .dashboard-welcome-row h2,
.book-view[data-book-view="activity"] .dashboard-welcome-row h2,
.book-view[data-book-view="preferences"] .dashboard-welcome-row h2,
.book-view[data-book-view="quests"] .dashboard-welcome-row h2 { font-size: 25px; }

/* --- Profile --- */
.book-view[data-book-view="profile"] .profile-reference-grid { gap: 22px; margin: 16px 0 20px; }
.book-view[data-book-view="profile"] .profile-medallion { width: 240px; height: 240px; padding: 14px; }
.book-view[data-book-view="profile"] .profile-medallion img { width: 184px; height: 184px; }
.book-view[data-book-view="profile"] .profile-reference-portrait p { font-size: 19px; margin-top: 8px; }
.book-view[data-book-view="profile"] .profile-identity-reference p { padding: 15px 0; font-size: 14px; }
.book-view[data-book-view="profile"] .profile-journal-reference { margin-top: 22px; }
.book-view[data-book-view="profile"] .journal-card .card-title-row h2 { font-size: 18px; }
.book-view[data-book-view="profile"] .profile-journal-reference p { font-size: 18px; line-height: 1.6; }
.book-view[data-book-view="profile"] .level-reference-row { gap: 18px; }
.book-view[data-book-view="profile"] .level-emblem { width: 70px; height: 76px; font-size: 32px; }
.book-view[data-book-view="profile"] .level-reference-row strong { font-size: 20px; }
.book-view[data-book-view="profile"] .level-reference-row small { font-size: 13px; }
.book-view[data-book-view="profile"] .level-xp b { font-size: 17px; }
.book-view[data-book-view="profile"] .level-progress { height: 16px; margin: 10px 0; }
.book-view[data-book-view="profile"] .profile-level-reference > p { font-size: 14px; margin-top: 6px; }
.book-view[data-book-view="profile"] .level-card.profile-level-reference { padding: 16px 18px; }
.book-view[data-book-view="profile"] .weekly-focus-reference,
.book-view[data-book-view="profile"] .favorite-reference-card { padding: 14px 18px; margin-bottom: 14px; }
.book-view[data-book-view="profile"] .weekly-focus-reference .focus-reference-grid { gap: 14px; margin-top: 6px; }
.book-view[data-book-view="profile"] .focus-reference-grid span { padding: 16px 10px; font-size: 14px; }
.book-view[data-book-view="profile"] .focus-reference-grid span b { font-size: 26px; }
.book-view[data-book-view="profile"] .favorite-reference-grid { gap: 12px; margin-top: 6px; }
.book-view[data-book-view="profile"] .favorite-reference-grid b { width: 56px; height: 56px; font-size: 27px; }
.book-view[data-book-view="profile"] .favorite-reference-grid small { font-size: 11px; }
.book-view[data-book-view="profile"] .profile-creed { font-size: 16px; margin-top: 10px; }

/* --- Activity Log --- */
.book-view[data-book-view="activity"] .activity-reference-card { padding: 16px 20px; }
.book-view[data-book-view="activity"] .activity-reference-card .card-title-row { margin-bottom: 10px; }
.book-view[data-book-view="activity"] .activity-reference-card .card-title-row h2 { font-size: 18px; }
.book-view[data-book-view="activity"] .activity-timeline-reference > div { padding: 12px 0; }
.book-view[data-book-view="activity"] .activity-timeline-reference time,
.book-view[data-book-view="activity"] .activity-timeline-reference > div > b { font-size: 14px; }
.book-view[data-book-view="activity"] .activity-timeline-reference > div p { font-size: 15px; }
.book-view[data-book-view="activity"] .activity-timeline-reference > div small { font-size: 12px; }
.book-view[data-book-view="activity"] .dashboard-quote-plaque { margin-top: 20px; padding: 14px 20px; max-width: 400px; font-size: 16px; }
.book-view[data-book-view="activity"] .activity-summary-strip { gap: 12px; }
.book-view[data-book-view="activity"] .summary-strip span,
.book-view[data-book-view="activity"] .achievement-summary span { padding: 14px; }
.book-view[data-book-view="activity"] .summary-strip b,
.book-view[data-book-view="activity"] .achievement-summary b { font-size: 26px; }
.book-view[data-book-view="activity"] .daily-chart-reference { padding: 16px 20px; margin-top: 14px; }
.book-view[data-book-view="activity"] .book-bars { height: 90px; }
.book-view[data-book-view="activity"] .activity-lower-reference-grid { gap: 14px; margin-top: 14px; }
.book-view[data-book-view="activity"] .activity-lower-reference-grid .parchment-card { padding: 14px 18px; }
.book-view[data-book-view="activity"] .dist-book-row { font-size: 13px; margin: 14px 0; }
.book-view[data-book-view="activity"] .streak-big { font-size: 19px; }
.book-view[data-book-view="activity"] .streak-big b { font-size: 38px; }
.book-view[data-book-view="activity"] .streak-big small { font-size: 14px; }
.book-view[data-book-view="activity"] .streak-dots { font-size: 14px; }
.book-view[data-book-view="activity"] .current-streak-reference p { font-size: 13px; margin-top: 8px; }
.book-view[data-book-view="activity"] .activity-journal-reference { padding: 14px 18px; margin-top: 14px; }
.book-view[data-book-view="activity"] .activity-journal-reference p { font-size: 15px; }

/* --- Achievements --- */
.book-view[data-book-view="achievements"] .achievement-reference-card { padding: 12px 16px; margin-bottom: 12px; }
.book-view[data-book-view="achievements"] .achievement-reference-card .card-title-row { margin-bottom: 6px; }
.book-view[data-book-view="achievements"] .achievement-reference-card .card-title-row h2 { font-size: 15px; }
.book-view[data-book-view="achievements"] .achievement-reference-card .card-title-row span { font-size: 11px; }
.book-view[data-book-view="achievements"] .achievements-left-reference .badge-grid { gap: 10px; margin-top: 4px; }
.book-view[data-book-view="achievements"] .achievements-left-reference .badge b { width: 58px; height: 64px; font-size: 22px; }
.book-view[data-book-view="achievements"] .badge strong { font-size: 12px; margin-top: 5px; }
.book-view[data-book-view="achievements"] .badge small { font-size: 9px; }
.book-view[data-book-view="achievements"] .achievements-left-reference .streak-row { gap: 8px; margin-top: 4px; }
.book-view[data-book-view="achievements"] .achievements-left-reference .streak-medal { font-size: 26px; }
.book-view[data-book-view="achievements"] .achievements-left-reference .streak-medal b { font-size: 10px; }
.book-view[data-book-view="achievements"] .achievement-summary-reference { gap: 12px; margin: 12px 0; }
.book-view[data-book-view="achievements"] .achievement-summary-reference span { padding: 14px; }
.book-view[data-book-view="achievements"] .achievement-summary-reference b { font-size: 24px; }
.book-view[data-book-view="achievements"] .title-cards { gap: 10px; margin-top: 6px; }
.book-view[data-book-view="achievements"] .title-cards > span { padding: 16px 10px; font-size: 15px; }
.book-view[data-book-view="achievements"] .title-cards small { font-size: 9px; margin-top: 6px; }
.book-view[data-book-view="achievements"] .achievements-right-reference .progress-badges { gap: 10px; margin-top: 6px; }
.book-view[data-book-view="achievements"] .progress-badges span { font-size: 26px; }
.book-view[data-book-view="achievements"] .progress-badges b,
.book-view[data-book-view="achievements"] .progress-badges small { font-size: 11px; }
.book-view[data-book-view="achievements"] .book-footer-motto { margin-top: 12px; font-size: 14px; }
.title-cards > span.is-locked { opacity: .4; background: #4b4436; color: #d8cba8; }
.progress-badges span.is-locked { opacity: .45; }
.achievements-left-reference .badge-grid { grid-template-columns: repeat(4, 1fr); }

/* Editable Virtual Identity (Profile) */
.identity-edit-btn {
  border: 0;
  background: transparent;
  color: #a5691c;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.identity-edit-btn:hover { color: #7d4f12; }
.identity-edit-form { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.identity-edit-form[hidden] { display: none; }
.identity-edit-form label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 10px;
  color: #735b38;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.identity-edit-form input,
.identity-edit-form select {
  font: 13px/1.3 Georgia, serif;
  padding: 6px 8px;
  border: 1px solid rgba(112,75,28,.35);
  border-radius: 7px;
  background: rgba(255,255,255,.7);
  color: #18243b;
}
.identity-edit-actions { display: flex; gap: 8px; margin-top: 2px; }
.identity-save-btn,
.identity-cancel-btn {
  flex: 1;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(112,75,28,.3);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.identity-save-btn { background: #102444; color: #f1cd72; border-color: #102444; }
.identity-cancel-btn { background: transparent; color: #6b4a27; }

/* Journal (Profile, local-cache entries) */
.card-title-row .journal-add-toggle {
  cursor: pointer;
  color: #a5691c;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.card-title-row .journal-add-toggle:hover { color: #7d4f12; }
.journal-entries { display: flex; flex-direction: column; gap: 8px; }
.journal-entry { margin: 0; }
.journal-entry time { display: block; font-size: 9px; color: #8a7350; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.journal-empty { color: #795f3d; font-style: italic; margin: 0; }
.journal-add-form { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.journal-add-form[hidden] { display: none; }
.journal-add-form textarea {
  font: 13px/1.4 Georgia, serif;
  padding: 8px 10px;
  border: 1px solid rgba(112,75,28,.35);
  border-radius: 9px;
  background: rgba(255,255,255,.7);
  color: #18243b;
  resize: vertical;
}
.journal-form-actions { display: flex; gap: 8px; }
.journal-save-btn,
.journal-cancel-btn {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(112,75,28,.3);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.journal-save-btn { background: #102444; color: #f1cd72; border-color: #102444; }
.journal-cancel-btn { background: transparent; color: #6b4a27; }


/* ==========================================================================
   Dashboard book overflow fixes
   Let each spread grow naturally so the lower content is never clipped.
   ========================================================================== */
.dashboard-book-page .magic-book-shell {
  display: block;
  min-height: calc(100vh - 72px);
  padding-top: 30px;
  padding-bottom: 42px;
}

.dashboard-book-page .magic-book {
  margin: 0 auto;
  height: auto !important;
  min-height: 760px;
  overflow: visible !important;
}

.dashboard-book-page .book-view,
.dashboard-book-page .book-view[data-book-view="preferences"],
.dashboard-book-page .book-view[data-book-view="quests"] {
  height: auto !important;
  min-height: 0 !important;
  align-items: start;
}

.dashboard-book-page .book-page,
.dashboard-book-page .preferences-page-fill,
.dashboard-book-page .quest-plan-page,
.dashboard-book-page .quest-outdoor-page,
.dashboard-book-page .profile-left-page,
.dashboard-book-page .profile-right-page,
.dashboard-book-page .activity-left-reference,
.dashboard-book-page .activity-right-reference,
.dashboard-book-page .achievements-left-reference,
.dashboard-book-page .achievements-right-reference {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.dashboard-book-page .preferences-page-fill,
.dashboard-book-page .quest-plan-page,
.dashboard-book-page .quest-outdoor-page {
  justify-content: flex-start !important;
}

.dashboard-book-page .book-subnav-row {
  display: flex;
  justify-content: flex-start;
  margin: 0 0 12px;
}

.dashboard-book-page .book-back-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid rgba(145, 99, 37, 0.35);
  border-radius: 999px;
  background: rgba(255, 245, 220, 0.8);
  color: #6a481f;
  font: 700 12px/1.2 Arial, sans-serif;
  cursor: pointer;
}

.dashboard-book-page .book-back-button:hover,
.dashboard-book-page .book-back-button:focus-visible {
  background: #17345a;
  color: #f5d374;
  outline: none;
}

.dashboard-book-page .quest-journey-row {
  grid-column: 1 / -1;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.dashboard-book-page .quest-journey-steps {
  flex: 1 1 360px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  min-width: 0;
}

.dashboard-book-page .quest-journey-steps span,
.dashboard-book-page .quest-journey-sep {
  white-space: normal;
}

.dashboard-book-page .quest-journey-links {
  flex: 0 0 auto;
}

@media (max-width: 1320px) {
  .dashboard-book-page .magic-book-shell {
    padding-right: 34px;
  }

  .dashboard-book-page .magic-book {
    width: min(1380px, calc(100vw - 120px));
  }
}

@media (max-width: 900px) {
  .dashboard-book-page .quest-journey-row {
    align-items: flex-start;
  }
}

/* ==========================================================================
   Desktop book navigation placement
   Keep the section navigation beside the open book while allowing long
   spreads to extend vertically without pushing the navigation underneath.
   ========================================================================== */
@media (min-width: 1101px) {
  .dashboard-book-page .magic-book-shell {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 0 !important;
    width: 100%;
    min-height: calc(100vh - 72px);
    padding: 30px 28px 42px !important;
    box-sizing: border-box;
    overflow-x: hidden !important;
  }

  .dashboard-book-page .magic-book {
    flex: 0 1 auto;
    width: min(1450px, calc(100vw - 220px)) !important;
    max-width: 1450px !important;
    margin: 0 !important;
  }

  .dashboard-book-page .book-tabs {
    position: sticky !important;
    top: 96px !important;
    align-self: flex-start !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 170px !important;
    width: 170px !important;
    height: auto !important;
    max-height: none !important;
    margin: 88px 0 0 -60px !important;
    padding: 0 !important;
    gap: 12px !important;
    z-index: 30;
  }

  .dashboard-book-page .book-tabs button {
    flex: 0 0 auto !important;
    width: 100%;
    height: 66px !important;
    max-height: none !important;
  }

  .dashboard-book-page .book-view[data-book-view="quests"] {
    grid-template-rows: auto auto !important;
  }

  .dashboard-book-page .quest-journey-row {
    align-self: auto !important;
    margin: 10px 22px 20px !important;
    padding: 12px 16px !important;
    border: 1px solid rgba(112, 75, 28, 0.2);
    border-radius: 12px;
    background: rgba(255, 244, 218, 0.38);
  }
}

@media (min-width: 1101px) and (max-width: 1399px) {
  .dashboard-book-page .magic-book-shell {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .dashboard-book-page .magic-book {
    width: calc(100vw - 190px) !important;
  }

  .dashboard-book-page .book-tabs {
    flex-basis: 155px !important;
    width: 155px !important;
    margin-left: -58px !important;
  }
}

/* ==========================================================================
   V10 dashboard book composition
   The quest journey stays inside the parchment book and the open book keeps
   a comfortable gap below the top navigation on desktop screens.
   ========================================================================== */
@media (min-width: 1101px) {
  .dashboard-book-page .magic-book-shell {
    align-items: center !important;
    padding-top: 42px !important;
    padding-bottom: 48px !important;
  }

  /*
   * Keep the book and its tab rail in one stage. The stage is centred in the
   * viewport below the top bar, so extra vertical space on 4K displays is
   * shared above and below instead of collecting beneath the book.
   */
  .dashboard-book-page .magic-book-stage {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    max-width: 100%;
  }

  /*
   * The tab rail contributes 110px to the flex row (170px wide with a
   * -60px overlap), which previously pulled the book 55px left of the
   * viewport centre. Move both pieces together so the book spine sits on
   * the true centre line without changing the rail's overlap.
   */
  .dashboard-book-page .magic-book,
  .dashboard-book-page .book-tabs {
    transform: translateX(55px);
  }

  .dashboard-book-page .magic-book {
    position: relative;
    overflow: visible !important;
  }

  .dashboard-book-page .book-view[data-book-view="quests"] {
    position: relative !important;
    grid-template-rows: auto !important;
    padding-bottom: 78px !important;
  }

  .dashboard-book-page .quest-journey-row {
    position: absolute !important;
    left: 22px !important;
    right: 22px !important;
    bottom: 16px !important;
    width: auto !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 10px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px 24px !important;
    border: 1px solid rgba(112, 75, 28, 0.24) !important;
    border-radius: 12px !important;
    background: rgba(255, 241, 205, 0.72) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
    z-index: 8;
  }

  .dashboard-book-page .quest-journey-steps {
    flex: 1 1 auto !important;
  }
}

@media (min-width: 1101px) and (max-width: 1399px) {
  /*
   * Pull the compact rail farther over the book so it keeps a safe gap from
   * the viewport edge at 1366px. Its remaining row footprint is 83px
   * (155px - 72px overlap), so half of that keeps the book itself centred.
   */
  .dashboard-book-page .magic-book,
  .dashboard-book-page .book-tabs {
    transform: translateX(41.5px);
  }

  .dashboard-book-page .book-tabs {
    margin-left: -72px !important;
  }
}

@media (max-width: 1100px) {
  /* Preserve the existing stacked/tablet layout without an extra box. */
  .dashboard-book-page .magic-book-stage {
    display: contents;
  }
}

/* ==========================================================================
   V8 desktop viewport composition
   Restore the proven V8 sizing and centring rules for the Home book. Later
   V9 overflow rules remain available to small screens, while desktop and 4K
   displays use the V8 viewport-bound book geometry.
   ========================================================================== */
@media (min-width: 1101px) {
  .dashboard-book-page .magic-book-shell {
    --book-h: min(760px, calc(100vh - 108px));
    min-height: 100vh !important;
    padding: 88px 32px 20px !important;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    overflow-x: hidden !important;
  }

  .dashboard-book-page .magic-book {
    position: relative;
    width: min(1440px, calc(100vw - 234px)) !important;
    height: var(--book-h) !important;
    min-height: var(--book-h) !important;
    max-height: var(--book-h) !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  .dashboard-book-page .book-view,
  .dashboard-book-page .book-view[data-book-view="preferences"],
  .dashboard-book-page .book-view[data-book-view="quests"] {
    height: 100% !important;
    min-height: 0 !important;
    align-items: stretch;
  }

  .dashboard-book-page .book-page,
  .dashboard-book-page .preferences-page-fill,
  .dashboard-book-page .quest-plan-page,
  .dashboard-book-page .quest-outdoor-page,
  .dashboard-book-page .profile-left-page,
  .dashboard-book-page .profile-right-page,
  .dashboard-book-page .activity-left-reference,
  .dashboard-book-page .activity-right-reference,
  .dashboard-book-page .achievements-left-reference,
  .dashboard-book-page .achievements-right-reference {
    height: auto !important;
    max-height: 100% !important;
    overflow: auto !important;
  }

  .dashboard-book-page .book-tabs {
    position: relative !important;
    top: auto !important;
    align-self: center !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    width: 158px !important;
    height: var(--book-h) !important;
    max-height: var(--book-h) !important;
    margin: 0 0 0 -45px !important;
    padding: calc(var(--book-h) * 0.108) 0 0 !important;
    gap: calc(var(--book-h) * 0.0132) !important;
    box-sizing: border-box;
    transform: none !important;
  }

  .dashboard-book-page .book-tabs button {
    flex: 1 1 0 !important;
    width: 100%;
    min-height: 0 !important;
    height: auto !important;
    max-height: 64px !important;
  }
}

/* V11 fit-to-window composition, applied to v9's two desktop pages. */
@media (min-width: 901px) {
  body.setup-fit {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: 92px;
    box-sizing: border-box;
  }
  body.setup-fit .setup-main.page-width {
    width: 1500px;
    max-width: none;
    margin: 0 auto;
    padding: 0 0 12px;
    flex: 0 0 auto;
  }
  body.setup-fit .setup-rail { position: static; }
  body.setup-fit .academy-footer { margin-top: auto; }
}

@media (min-width: 1101px) {
  body.dashboard-book-page.page-fit {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding-top: 72px;
    box-sizing: border-box;
    overflow: hidden;
  }
  body.dashboard-book-page.page-fit .magic-book-shell {
    flex: 0 0 auto;
    width: 1700px !important;
    min-height: 0 !important;
    padding: 28px !important;
  }
  body.dashboard-book-page.page-fit .magic-book {
    width: 1450px !important;
    max-width: 1450px !important;
  }
  body.dashboard-book-page.page-fit .book-tabs {
    position: static !important;
    margin: 88px 0 0 -60px !important;
  }

  /* Keep page scrolling available when content is long, without the visible
     draggable scrollbar crossing the parchment artwork. */
  body.dashboard-book-page .book-page {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  body.dashboard-book-page .book-page::-webkit-scrollbar {
    display: none;
  }
}

/* The journal field is editable, but its browser resize grip is not part of
   the book design and can look like a stray draggable control. */
.journal-add-form textarea { resize: none; }