/* ==========================================================
   neur0doku-pages.css

   Merged shell layer for the "screen" pages — Home, Dailies,
   Quests, Leaderboards, Random, Account. Each gets its own
   commented section below. These six are all the same species
   (topbar, a content list or card, maybe a note line) and are
   individually thin, so one shared file lets the browser cache
   it once across every page navigation instead of re-fetching a
   bespoke stylesheet per page.

   Play is NOT part of this file — it's a different kind of page
   (interactive grid, drag-painting, its own zoom transform, and
   eventually its own player-purchased theming layer) and stays
   in neur0doku-play.css so the six lighter pages never pay load
   cost for rules only Play needs.

   A section here is content that's currently unique to ONE page.
   The moment a second page needs the same pattern, promote it to
   neur0doku-components.css (reusable pieces) or
   neur0doku-modals.css (modal shell) instead of copying it into
   a second section here.

   Colors come from neur0doku-theme.css (--nd-*) exclusively.
   LOAD ORDER: neur0doku-theme.css, neur0doku-components.css,
   neur0doku-modals.css (if the page opens a modal), then this
   file.
   ========================================================== */


/* ==========================================================
   HOME
   ========================================================== */

.neur0doku-home {
  max-width: 420px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nd-topbar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
}

.nd-topbar-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* The one exception to components.css's shared 60%/contain icon-btn
   img sizing: this button holds an actual avatar photo, not a glyph
   icon, so it should fill the button edge-to-edge like a portrait
   instead of sitting inset with padding around it. */
#nd-profile-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Guild shield badge next to the profile avatar. Deliberately NOT
   .nd-icon-btn — no card background, border, or shadow, just a plain
   badge. Single-use today; if a second plain (non-card) icon badge
   shows up elsewhere, promote this to components.css. */
.nd-icon-plain {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.nd-icon-plain:hover { text-decoration: none; transform: translateY(-1px); }
.nd-icon-plain:focus-visible { outline: 2px solid var(--nd-focus); outline-offset: 2px; border-radius: 0.4rem; }
.nd-icon-plain img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.nd-logo {
  text-align: center;
  font-family: ui-rounded, 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 800;
  font-size: 2.4rem;
  letter-spacing: 0.01em;
  color: var(--nd-accent);
  margin: 0 0 1rem;
}
.nd-logo .nd-zero {
  display: inline-block;
  transform: translateY(-0.06em);
}

.nd-mascot {
  width: min(62vw, 240px);
  height: auto;
  margin: 0.25rem 0 1.75rem;
}

.nd-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Quiet secondary link to the account page — not in the original
   mockup, so intentionally understated rather than styled as a
   third action button. */
.nd-account-link {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--nd-text-soft);
  text-decoration: none;
}
.nd-account-link:hover { text-decoration: underline; }
.nd-account-link:focus-visible { outline: 2px solid var(--nd-focus); outline-offset: 2px; }

/* ---- Settings modal content: sound / voice / haptics toggles ----
   Single-use today (only Settings). Promote .nd-toggle-switch to
   components.css if a second page ever needs an on/off control. */

.nd-toggle-row {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.4rem;
}
.nd-toggle-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  background: var(--nd-surface-soft);
  border: 1px solid var(--nd-border);
  border-radius: 1rem;
  padding: 1rem 0.5rem 0.75rem;
}
.nd-toggle-icon { width: 1.9rem; height: 1.9rem; color: var(--nd-text); }
.nd-toggle-icon svg { width: 100%; height: 100%; }
.nd-toggle-label { font-size: 0.7rem; color: var(--nd-text-soft); font-weight: 600; }

.nd-toggle-switch {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border: none;
  background: var(--nd-off);
  color: #fff;
  border-radius: 999px;
  padding: 0.3rem 0.6rem 0.3rem 0.35rem;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  transition: background 0.15s ease;
}
.nd-toggle-switch .nd-toggle-track {
  width: 1.6rem;
  height: 0.9rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.15);
  position: relative;
  flex-shrink: 0;
}
.nd-toggle-switch .nd-toggle-thumb {
  position: absolute;
  top: 0.09rem;
  left: 0.09rem;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}
.nd-toggle-switch.is-on { background: linear-gradient(180deg, var(--nd-on), var(--nd-on-2)); }
.nd-toggle-switch.is-on .nd-toggle-thumb { transform: translateX(0.68rem); }
.nd-toggle-switch .nd-toggle-state { min-width: 1.3rem; text-align: left; }
.nd-toggle-switch:focus-visible { outline: 2px solid var(--nd-focus); outline-offset: 2px; }

.nd-feedback-btn {
  display: block;
  width: 100%;
  background: transparent;
  border: 1.5px solid var(--nd-accent);
  color: var(--nd-accent);
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 0.8rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  margin-bottom: 1.25rem;
}
.nd-feedback-btn:hover { background: var(--nd-surface-soft); }
.nd-feedback-btn:focus-visible { outline: 2px solid var(--nd-focus); outline-offset: 2px; }

.nd-modal-links {
  display: flex;
  justify-content: center;
  gap: 1.1rem;
  margin-bottom: 0.6rem;
}
.nd-link-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--nd-text);
  text-decoration: underline;
  cursor: pointer;
}
.nd-link-btn:focus-visible { outline: 2px solid var(--nd-focus); outline-offset: 2px; }

.nd-version {
  text-align: center;
  font-size: 0.75rem;
  color: var(--nd-text-soft);
  margin: 0;
}

#legal-modal-text {
  color: var(--nd-text-soft);
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 0;
}

/* ---- Profile modal content ---- */

.nd-profile-preview-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.nd-profile-preview {
  width: 4.75rem;
  height: 4.75rem;
  flex-shrink: 0;
  border-radius: 1rem;
  overflow: hidden;
  border: 2px solid var(--nd-on);
  background: var(--nd-surface-soft);
}
.nd-profile-preview img { width: 100%; height: 100%; object-fit: cover; }

.nd-profile-name-field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--nd-surface-soft);
  border: 1px solid var(--nd-border);
  border-radius: 0.9rem;
  padding: 0.3rem 0.3rem 0.3rem 0.75rem;
}
.nd-profile-name-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--nd-text);
  font-family: ui-rounded, 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 0.4rem 0;
}
.nd-profile-name-input:disabled { color: var(--nd-text); opacity: 1; }
.nd-profile-name-input:focus { outline: none; }
.nd-profile-edit-btn {
  flex-shrink: 0;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.65rem;
  border: 1px solid var(--nd-button-border);
  background: var(--nd-button-bg);
  color: var(--nd-button-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.95rem;
}
.nd-profile-edit-btn:hover { background: var(--nd-button-bg-hover); }
.nd-profile-edit-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.nd-profile-edit-btn:focus-visible,
.nd-profile-name-input:focus-visible { outline: 2px solid var(--nd-focus); outline-offset: 2px; }

.nd-profile-note {
  font-size: 0.72rem;
  color: var(--nd-text-soft);
  margin: -0.75rem 0 1rem;
  line-height: 1.4;
  min-height: 1em;
}

/* Profile's own folder-style tabs (Avatar/Frame, then Faces/Theme as a
   --secondary row below). Scoped under #profile-modal on purpose: Quests
   (see the QUESTS section below, once migrated) uses the SAME class name
   .nd-tab-btn for a visually different standalone pill toggle. Without
   this scope, whichever rule appeared later in this merged file would
   win on BOTH pages once they share one stylesheet. */
#profile-modal .nd-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
#profile-modal .nd-tabs--secondary { margin-bottom: 1rem; }
#profile-modal .nd-tab-btn {
  flex: 1;
  border: 1px solid var(--nd-button-border);
  background: var(--nd-surface-soft);
  color: var(--nd-text-soft);
  font-family: ui-rounded, 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.6rem 0.5rem;
  border-radius: 0.9rem 0.9rem 0 0;
  cursor: pointer;
}
/* Faces/Theme sit BELOW the preview box (Avatar/Frame sit above it) —
   so their bevel has to point the opposite way to still read as
   "attached to the same box": flat where they meet the box (top),
   rounded on the outward edge (bottom). Previously this shared the
   primary tabs' top-rounded shape uniformly, which looked attached
   to nothing on this row. */
#profile-modal .nd-tabs--secondary .nd-tab-btn {
  border-radius: 0 0 0.75rem 0.75rem;
  font-size: 0.8rem;
  padding: 0.5rem;
}
#profile-modal .nd-tab-btn.is-active {
  background: var(--nd-button-bg);
  color: var(--nd-button-ink);
  border-color: var(--nd-button-border);
}
#profile-modal .nd-tab-btn:focus-visible { outline: 2px solid var(--nd-focus); outline-offset: 2px; }

.nd-avatar-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.4rem;
  background: var(--nd-surface-soft);
  border: 1px solid var(--nd-border);
  border-radius: 1rem;
  padding: 0.75rem;
  /* Was 1.25rem — tightened to match the 0.6rem gap already used
     above the box (#profile-modal .nd-tabs's own margin-bottom), so
     the box sits symmetrically between both tab rows instead of
     hugging the top pair. Shared by both #avatar-grid and
     #faces-pool-grid (same class), so this applies to both tabs. */
  margin-bottom: 0.6rem;
}
.nd-avatar-option {
  position: relative;
  aspect-ratio: 1;
  border-radius: 0.6rem;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  background: var(--nd-surface);
}
.nd-avatar-option img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nd-avatar-option.is-selected { border-color: var(--nd-on); }
.nd-avatar-option .nd-avatar-check {
  position: absolute;
  bottom: 0.1rem;
  right: 0.1rem;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--nd-on);
  color: #fff;
  font-size: 0.5rem;
  display: none;
  align-items: center;
  justify-content: center;
}
.nd-avatar-option.is-selected .nd-avatar-check { display: flex; }
.nd-avatar-option:focus-visible { outline: 2px solid var(--nd-focus); outline-offset: 2px; }

.nd-placeholder-panel {
  background: var(--nd-surface-soft);
  border: 1px dashed var(--nd-border);
  border-radius: 1rem;
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--nd-text-soft);
  font-size: 0.82rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

/* ---- Board Order — persistent block below BOTH Faces and Theme ----
   Not scoped to a single tab panel: Faces (tap a pool face) and,
   eventually, Theme (tap a swatch to preview) both act on this same
   block, so it lives outside the tab-panel [hidden] toggling entirely.
   Click-to-equip/unequip/single-face-select only this pass — see
   index-home.html's renderFaces() for the wiring. Dragging to reorder
   is a later addition on top of the same underlying setEquippedOrder()
   calls; nothing here should need to change shape for that, just gain
   drag handlers alongside the existing click handlers. */

.nd-board-order { margin-bottom: 0.6rem; }

.nd-faces-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--nd-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 0.4rem;
}

/* Two 5-column dot rows bracket the slot grid — top row toggles
   slots 1-5 as the single-face source, bottom row toggles 6-10.
   Kept OUTSIDE the tile rows (rather than one dot per tile) so a
   slot's dot never has to overlap art from the row it doesn't
   belong to. Every column always gets a cell (see renderFaces) even
   when that slot is locked/empty/has no dot, so the 5-wide alignment
   with the slot grid below never shifts. */
.nd-face-dot-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.4rem;
}
.nd-face-dot-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0.85rem;
}
.nd-face-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  /* Placeholder color (site's existing accent blue); revisit once real
     per-theme colors exist. Dim "off" state, bright accent "on" — the
     small-indicator-light look. Purely a status readout now — the
     tile itself is the actual control, so no hover/focus states here. */
  background: var(--nd-off);
}
.nd-face-dot.is-active {
  background: var(--nd-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--nd-accent) 30%, transparent 70%);
}

.nd-face-slot-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.4rem;
  margin: 0.3rem 0;
}
.nd-face-slot {
  position: relative;
  aspect-ratio: 1;
  border-radius: 0.6rem;
  background: var(--nd-surface-soft);
  border: 1px solid var(--nd-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.nd-face-slot.is-locked { opacity: 0.55; }
.nd-face-slot.is-filled { cursor: pointer; }
.nd-face-slot.is-filled:focus-visible { outline: 2px solid var(--nd-focus); outline-offset: 2px; }
.nd-face-slot-lock { font-size: 0.9rem; }
.nd-face-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The border-highlight itself — the visual confirmation that THIS
   slot's face is the one being shown everywhere. 2px so it reads
   clearly against the existing 1px --nd-border on every other slot. */
.nd-face-slot.is-single-source { border: 2px solid var(--nd-accent); }

.nd-face-slot-remove {
  position: absolute;
  top: 0.1rem;
  right: 0.1rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: none;
  background: var(--nd-danger);
  color: #fff;
  font-size: 0.65rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.nd-face-slot-remove:focus-visible { outline: 2px solid var(--nd-focus); outline-offset: 1px; }
.nd-face-slot-num {
  position: absolute;
  bottom: 0.1rem;
  left: 0.1rem;
  font-size: 0.6rem;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 0.3rem;
  padding: 0 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .nd-icon-plain {
    transition: none;
  }
}


/* ==========================================================
   ACCOUNT

   Small remainder — the header/card/form-row/stats-card shell
   moved to neur0doku-components.css once Custom Puzzle turned
   out to reuse it. What's left here is the stuff nothing else
   currently needs: the "last opened" line, the stats grid, the
   back link, and the Story-progress list.
   ========================================================== */

.nd-account-current {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--nd-text-soft);
}

.nd-account-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.nd-account-stat {
  background: var(--nd-bg);
  border-radius: 0.7rem;
  padding: 0.6rem;
  text-align: center;
}
.nd-account-stat .value {
  display: block;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--nd-accent);
}
.nd-account-stat .label {
  font-size: 0.75rem;
  color: var(--nd-text-soft);
}

.nd-account-back {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--nd-text-soft);
  text-decoration: none;
}
.nd-account-back:hover { text-decoration: underline; }

.nd-story-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 16rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.nd-story-row-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0.75rem;
  border-radius: 0.6rem;
  background: var(--nd-bg);
  color: var(--nd-text);
  text-decoration: none;
  font-size: 0.85rem;
}
.nd-story-row-link:hover { background: var(--nd-surface-soft); }
.nd-story-row-time {
  font-variant-numeric: tabular-nums;
  color: var(--nd-text-soft);
  font-weight: 700;
}
.nd-story-row-next .nd-story-row-link {
  background: transparent;
  border: 1px dashed var(--nd-border);
  color: var(--nd-text-soft);
  font-weight: 700;
  justify-content: center;
}
.nd-story-row-next .nd-story-row-link:hover { background: var(--nd-bg); }


/* ==========================================================
   LEADERBOARDS

   Topbar, standings list, and archive panel moved to
   neur0doku-components.css once Random turned out to share them.
   What's left here is Leaderboards-specific: the Daily/Weekly
   period toggle, the tier pill row, and the promo card linking to
   Random (Random itself has no tier picker — fixed 10×10 board,
   single track — so it never needed these).
   ========================================================== */

.nd-lb-period-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

.nd-lb-period-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.55rem 0.4rem;
  border-radius: 999px;
  border: 1px solid var(--nd-border);
  background: var(--nd-surface);
  color: var(--nd-text-soft);
  font-family: ui-rounded, 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 2px 6px var(--nd-shadow);
}
.nd-lb-period-tab:hover { text-decoration: none; }
.nd-lb-period-tab.is-active {
  background: var(--nd-button-bg);
  border-color: var(--nd-button-border);
  color: var(--nd-button-ink);
}
.nd-lb-period-tab:focus-visible { outline: 2px solid var(--nd-focus); outline-offset: 2px; }

.nd-lb-tier-row {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding-bottom: 0.15rem;
  margin-bottom: 0.75rem;
  scrollbar-width: none;
}
.nd-lb-tier-row::-webkit-scrollbar { display: none; }

.nd-lb-tier-pill {
  flex-shrink: 0;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--nd-border);
  background: var(--nd-surface);
  color: var(--nd-text-soft);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.nd-lb-tier-pill.is-active {
  background: var(--nd-accent);
  border-color: var(--nd-accent);
  color: var(--nd-surface);
}
.nd-lb-tier-pill:focus-visible { outline: 2px solid var(--nd-focus); outline-offset: 2px; }

.nd-lb-extreme-card {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--nd-button-bg);
  border: 1px solid var(--nd-button-border);
  border-radius: 1rem;
  padding: 0.9rem 1rem;
  margin-bottom: 1rem;
  text-decoration: none;
  box-shadow: 0 4px 10px var(--nd-shadow);
}
.nd-lb-extreme-card:hover { text-decoration: none; transform: translateY(-1px); }
.nd-lb-extreme-icon { font-size: 1.6rem; flex-shrink: 0; }
.nd-lb-extreme-copy { flex: 1; }
.nd-lb-extreme-title {
  font-family: ui-rounded, 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: var(--nd-button-ink);
}
.nd-lb-extreme-sub {
  font-size: 0.75rem;
  color: var(--nd-button-ink);
  opacity: 0.75;
}
.nd-lb-extreme-arrow { color: var(--nd-button-ink); font-size: 1.1rem; }


/* ==========================================================
   RANDOM ("Extreme Challenge")

   Wrapper/topbar/list/archive all reused from neur0doku-components.css
   via the shared .neur0doku-leaderboards / .nd-lb-* classes — this
   page has no wrapper or topbar rules of its own anymore. What's
   left is genuinely unique to Random: the fixed-board badge, the
   monthly-progress card, and the start-attempt CTA.
   ========================================================== */

.nd-rx-board-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--nd-surface);
  border: 1px solid var(--nd-border);
  border-radius: 1rem;
  padding: 0.9rem 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px var(--nd-shadow);
  text-align: center;
}
.nd-rx-board-badge .nd-rx-emoji { font-size: 1.4rem; }
.nd-rx-board-badge-copy {
  font-family: ui-rounded, 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--nd-text);
}
.nd-rx-board-badge-sub {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--nd-text-soft);
  margin-top: 0.15rem;
}

.nd-rx-progress-card {
  background: var(--nd-surface);
  border: 1px solid var(--nd-border);
  border-radius: 1rem;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px var(--nd-shadow);
}
.nd-rx-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.5rem;
}
.nd-rx-progress-label {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--nd-text);
}
.nd-rx-progress-count {
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--nd-accent);
}
.nd-rx-progress-track {
  width: 100%;
  height: 0.6rem;
  border-radius: 999px;
  background: var(--nd-off);
  overflow: hidden;
}
.nd-rx-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--nd-on), var(--nd-accent));
  transition: width 0.3s ease;
}
.nd-rx-progress-hint {
  margin: 0.55rem 0 0;
  font-size: 0.75rem;
  color: var(--nd-text-soft);
  line-height: 1.4;
}

.nd-rx-start-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
  border-radius: 999px;
  border: 1px solid var(--nd-button-border);
  background: var(--nd-button-bg);
  color: var(--nd-button-ink);
  font-family: ui-rounded, 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 10px var(--nd-shadow);
}
.nd-rx-start-btn:hover {
  background: var(--nd-button-bg-hover);
  text-decoration: none;
  transform: translateY(-1px);
}
.nd-rx-start-btn:focus-visible { outline: 2px solid var(--nd-focus); outline-offset: 2px; }

.nd-rx-section-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--nd-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 1.1rem 0 0.5rem;
}