:root {
  --bg: #101412;
  --surface: #18201d;
  --surface-2: #222824;
  --surface-strong: #151b18;
  --text: #f4f0e8;
  --muted: #b6afa4;
  --line: #353a34;
  --gold: #d9b760;
  --rose: #d77c73;
  --teal: #64b6a5;
  --ink: #101412;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
}

* {
  box-sizing: border-box;
}

body {
  position: relative;
  overflow-x: hidden;
  margin: 0;
  min-height: 100vh;
  padding:
    env(safe-area-inset-top, 0)
    env(safe-area-inset-right, 0)
    env(safe-area-inset-bottom, 0)
    env(safe-area-inset-left, 0);
  background:
    linear-gradient(180deg, rgba(16, 20, 18, 0.92), rgba(16, 20, 18, 1)),
    repeating-linear-gradient(90deg, rgba(217, 183, 96, 0.05) 0 1px, transparent 1px 92px);
  color: var(--text);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Noto Sans TC", sans-serif;
  letter-spacing: 0;
}

button {
  font: inherit;
}

button:disabled {
  cursor: wait;
  opacity: 0.64;
}

button[data-paid-ai-unavailable="true"]:disabled,
.tarot-sanctuary-action-card.unavailable:disabled,
.reading-commerce-cta.unavailable:disabled {
  cursor: not-allowed;
  opacity: 0.58;
  filter: saturate(0.55);
}

body.standalone-locked .app-shell {
  display: none;
}

.standalone-auth {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding:
    max(28px, env(safe-area-inset-top, 0))
    max(16px, env(safe-area-inset-right, 0))
    max(28px, env(safe-area-inset-bottom, 0))
    max(16px, env(safe-area-inset-left, 0));
}

.standalone-auth[hidden] {
  display: none;
}

.standalone-auth-panel {
  width: min(100%, 440px);
  padding: 26px;
  border: 1px solid rgba(217, 183, 96, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(160deg, rgba(34, 40, 36, 0.96), rgba(16, 20, 18, 0.98)),
    radial-gradient(circle at 80% 0%, rgba(100, 182, 165, 0.18), transparent 38%);
  box-shadow: var(--shadow);
}

.standalone-auth-copy {
  margin: 12px 0 18px;
  color: var(--muted);
  line-height: 1.65;
}

.standalone-auth-api-note {
  margin: -6px 0 16px;
  padding: 10px 12px;
  border: 1px solid rgba(217, 183, 96, 0.32);
  border-radius: 8px;
  background: rgba(217, 183, 96, 0.08);
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.48;
}

.standalone-auth-api-note[hidden] {
  display: none;
}

.auth-segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.64);
}

.auth-segmented button {
  min-height: 40px;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.auth-segmented button.active {
  color: var(--ink);
  background: var(--gold);
}

.standalone-auth-form {
  display: grid;
  gap: 13px;
  margin-top: 18px;
}

.standalone-auth-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.9rem;
}

.standalone-auth-form input {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: rgba(16, 20, 18, 0.76);
}

.standalone-auth-form input:focus {
  outline: 2px solid rgba(100, 182, 165, 0.42);
  border-color: rgba(100, 182, 165, 0.78);
}

.standalone-auth-form[data-mode="login"] .standalone-register-only {
  display: none;
}

.standalone-auth-help,
.standalone-auth-security,
.standalone-auth-status,
.standalone-auth-error {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
}

.standalone-auth-help {
  color: var(--muted);
}

.standalone-auth-security {
  padding: 10px 12px;
  border: 1px solid rgba(100, 182, 165, 0.24);
  border-radius: 8px;
  color: rgba(244, 240, 232, 0.82);
  background: rgba(100, 182, 165, 0.08);
}

.standalone-auth-status {
  min-height: 1.3em;
  color: var(--teal);
}

.standalone-auth-status[data-tone="working"] {
  color: var(--gold);
}

.standalone-auth-error {
  min-height: 1.3em;
  color: var(--rose);
}

.standalone-telegram-link {
  display: inline-flex;
  margin-top: 16px;
  color: var(--teal);
  text-decoration: none;
}

.standalone-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(244, 240, 232, 0.12);
}

.standalone-legal-links a {
  color: rgba(244, 240, 232, 0.68);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
}

.standalone-legal-links a:hover,
.standalone-legal-links a:focus-visible {
  color: var(--teal);
}

.standalone-guest-button {
  width: 100%;
  min-height: 50px;
  margin-top: 4px;
  font-size: 1rem;
  box-shadow: 0 14px 30px rgba(217, 183, 96, 0.14);
}

#standalone-guest-help {
  margin-top: 8px;
  text-align: center;
}

.standalone-account-options {
  margin-top: 18px;
  border-top: 1px solid rgba(244, 240, 232, 0.12);
}

.standalone-account-options > summary {
  min-height: 44px;
  padding: 14px 2px 8px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
}

.standalone-account-options[open] > summary {
  color: var(--gold);
}

.standalone-account-options-body {
  padding-top: 10px;
}

.app-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 860px);
  min-height: 100vh;
  margin: 0 auto;
  padding:
    max(18px, env(safe-area-inset-top, 0))
    max(14px, env(safe-area-inset-right, 0))
    max(28px, env(safe-area-inset-bottom, 0))
    max(14px, env(safe-area-inset-left, 0));
}

.topbar,
.section-heading,
.action-row,
.tabs {
  display: flex;
  align-items: center;
}

.topbar,
.section-heading {
  justify-content: space-between;
  gap: 16px;
}

.topbar-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.topbar-logout {
  min-height: 42px;
  padding-inline: 12px;
}

.eyebrow,
.muted,
.status-pill {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.status-pill {
  display: inline-flex;
  margin-top: 8px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(34, 40, 36, 0.72);
}

.status-pill.online {
  color: var(--teal);
  border-color: rgba(100, 182, 165, 0.6);
}

.status-pill.offline {
  color: var(--rose);
  border-color: rgba(215, 124, 115, 0.55);
}

.account-pill {
  display: inline-flex;
  margin: 8px 0 0;
  padding: 3px 8px;
  border: 1px solid rgba(100, 182, 165, 0.36);
  border-radius: 999px;
  color: rgba(244, 240, 232, 0.82);
  background: rgba(100, 182, 165, 0.08);
  font-size: 0.82rem;
}

.account-pill[hidden] {
  display: none;
}

h1,
h2,
h3,
p {
  letter-spacing: 0;
}

h1 {
  margin: 2px 0 0;
  font-size: 1.7rem;
  line-height: 1.12;
}

h2 {
  margin: 3px 0 0;
  font-size: 1.25rem;
}

h3 {
  margin: 4px 0 8px;
  font-size: 1.1rem;
}

.icon-button,
.primary-button,
.secondary-button,
.danger-button,
.product-button,
.reader-button,
.settings-link {
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}

.icon-button {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  background: var(--surface);
  color: var(--gold);
  border-color: var(--line);
  font-size: 1.1rem;
}

.tabs {
  position: sticky;
  top: 0;
  z-index: 3;
  gap: 8px;
  margin: 18px 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(24, 32, 29, 0.94);
  backdrop-filter: blur(12px);
}

.tab {
  min-width: 0;
  height: 42px;
  flex: 1;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  white-space: nowrap;
}

.tab span {
  display: inline-block;
  margin-right: 4px;
  color: var(--gold);
}

.tab.active {
  background: var(--gold);
  color: var(--ink);
}

.tab.active span {
  color: var(--ink);
}

.tabs-more {
  position: relative;
  flex: 0 0 112px;
}

.tabs-more summary {
  display: grid;
  height: 42px;
  grid-template-columns: auto auto;
  gap: 4px;
  place-content: center;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}

.tabs-more summary::-webkit-details-marker {
  display: none;
}

.tabs-more summary span:first-child {
  color: var(--gold);
}

.tabs-more.active summary,
.tabs-more[open] summary {
  border-color: rgba(217, 183, 96, 0.3);
  background: rgba(217, 183, 96, 0.08);
  color: var(--text);
}

.tabs-more-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 8;
  display: grid;
  width: min(220px, calc(100vw - 32px));
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(217, 183, 96, 0.26);
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.98);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.36);
}

.tabs-more-panel .tab {
  display: flex;
  align-items: center;
  width: 100%;
  flex: none;
  justify-content: flex-start;
  padding-inline: 10px;
  text-align: left;
}

.tabs-more-group {
  display: grid;
  gap: 4px;
}

.tabs-more-group + .tabs-more-group {
  padding-top: 7px;
  border-top: 1px solid rgba(244, 240, 232, 0.08);
}

.tabs-more-group > strong {
  padding: 2px 10px;
  color: rgba(244, 240, 232, 0.48);
  font-size: 0.68rem;
  line-height: 1.4;
}

.tab[data-priority="core"]:not(.active) {
  color: var(--text);
  border-color: rgba(217, 183, 96, 0.28);
  background: rgba(217, 183, 96, 0.08);
}

.tab[data-priority="play"],
.tab[data-priority="meta"] {
  opacity: 0.84;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.secondary-feature-status {
  display: flex;
  min-height: min(42vh, 320px);
  margin: 18px 0 0;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-direction: column;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}

.secondary-feature-status[data-secondary-feature-status="loading"]::before {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  flex: 0 0 auto;
  border: 2px solid rgba(217, 183, 96, 0.24);
  border-top-color: var(--gold);
  border-radius: 50%;
  content: "";
  animation: secondary-feature-spin 0.8s linear infinite;
}

.view[data-secondary-feature-state="loading"],
.view[data-secondary-feature-state="error"] {
  min-height: min(42vh, 320px);
  position: relative;
}

.view[data-secondary-feature-state="loading"] > :not(.secondary-feature-status),
.view[data-secondary-feature-state="error"] > :not(.secondary-feature-status) {
  visibility: hidden;
  pointer-events: none;
}

.view[data-secondary-feature-state="loading"] > .secondary-feature-status,
.view[data-secondary-feature-state="error"] > .secondary-feature-status {
  position: absolute;
  inset: 0;
  min-height: 100%;
  margin: 0;
}

.secondary-feature-status p {
  max-width: 36rem;
  margin: 0;
}

@keyframes secondary-feature-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .secondary-feature-status[data-secondary-feature-status="loading"]::before {
    animation: none;
  }
}

[hidden] {
  display: none !important;
}

.daily-oracle {
  display: grid;
  gap: 16px;
  padding-bottom: 28px;
}

#today-view[data-daily-state="revealed"] .tarot-focus-panel {
  order: 1;
}

#today-view[data-daily-state="revealed"] .daily-date-rail {
  order: 2;
}

#today-view[data-daily-state="revealed"] .daily-weather-panel {
  order: 2;
}

#today-view[data-daily-state="revealed"] .daily-question-card {
  order: 3;
}

#today-view[data-daily-state="revealed"] .daily-question-panel {
  order: 4;
}

#today-view[data-daily-state="revealed"] .daily-return-reminder {
  order: 4;
}

#today-view[data-daily-state="revealed"] .daily-more-panel {
  order: 5;
}

#today-view[data-daily-state="revealed"] .daily-energy-panel {
  order: 0;
}

#today-view[data-daily-state="revealed"] .daily-feature-card {
  order: 2;
}

#today-view[data-daily-state="revealed"] .daily-mini-grid {
  order: 8;
}

#today-view[data-daily-state="revealed"] .daily-overview-card {
  order: 9;
}

#today-view[data-daily-state="revealed"] .daily-context-panel {
  order: 10;
}

#today-view[data-daily-state="revealed"] .daily-section-stack {
  order: 11;
}

#today-view[data-daily-state="fresh"] .daily-date-rail,
#today-view[data-daily-state="fresh"] .daily-more-panel,
#today-view[data-daily-state="fresh"] .daily-ritual {
  display: none;
}

.daily-date-rail {
  display: grid;
  grid-template-columns: repeat(7, minmax(48px, 1fr));
  gap: 8px;
  contain: inline-size;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 0 1px 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.daily-date-rail::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.daily-date-item {
  display: grid;
  min-width: 48px;
  gap: 5px;
  justify-items: center;
  color: rgba(244, 240, 232, 0.46);
  font-weight: 700;
}

.daily-date-item span:first-child {
  font-size: 0.78rem;
}

.daily-date-item span:last-child {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: rgba(244, 240, 232, 0.08);
}

.daily-date-item.active {
  color: var(--text);
}

.daily-date-item.active span:last-child {
  border: 1px solid rgba(244, 240, 232, 0.5);
  background: rgba(244, 240, 232, 0.14);
  box-shadow: 0 0 0 8px rgba(244, 240, 232, 0.06);
}

.daily-date-item.checked span:last-child {
  color: var(--ink);
  background: rgba(217, 183, 96, 0.82);
}

.daily-date-item.active.checked span:last-child {
  border-color: rgba(255, 250, 241, 0.72);
  box-shadow:
    0 0 0 8px rgba(244, 240, 232, 0.08),
    0 0 18px rgba(217, 183, 96, 0.28);
}

.tarot-focus-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(217, 183, 96, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(33, 39, 35, 0.94), rgba(13, 17, 16, 0.92)),
    radial-gradient(circle at 12% 0, rgba(217, 183, 96, 0.18), transparent 34%);
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.22);
}

.tarot-focus-panel {
  --reader-accent: var(--gold);
  --reader-glow: rgba(217, 183, 96, 0.22);
  --daily-reader-position: center 28%;
  --daily-reader-mobile-position: center top;
  --reader-look-x: 0;
  --reader-look-y: 0;
  position: relative;
  isolation: isolate;
  min-height: max(560px, calc(100svh - 190px));
  overflow: hidden;
  padding: 0;
  border-color: rgba(217, 183, 96, 0.28);
  background:
    linear-gradient(180deg, rgba(8, 10, 11, 0.05), rgba(8, 10, 11, 0.84)),
    linear-gradient(120deg, rgba(25, 31, 28, 0.96), rgba(12, 15, 16, 0.98));
  box-shadow:
    0 24px 68px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(244, 240, 232, 0.06);
}

.daily-weather-panel {
  min-width: 0;
  border-block: 1px solid rgba(100, 182, 165, 0.2);
  background: rgba(9, 13, 12, 0.32);
}

.daily-weather-disclosure > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px 12px;
  align-items: center;
  min-height: 50px;
  padding: 9px 2px;
  list-style: none;
  cursor: pointer;
}

.daily-weather-disclosure > summary::-webkit-details-marker {
  display: none;
}

.daily-weather-disclosure > summary > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.daily-weather-disclosure > summary strong,
.daily-weather-disclosure > summary small {
  overflow-wrap: anywhere;
}

.daily-weather-disclosure > summary strong {
  color: #fff8e8;
  font-size: 0.9rem;
}

.daily-weather-disclosure > summary small {
  color: rgba(244, 240, 232, 0.56);
  font-size: 0.72rem;
  line-height: 1.4;
}

.daily-weather-disclosure > summary em {
  color: var(--teal);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 900;
}

.daily-weather-disclosure > summary::after {
  content: "+";
  width: 18px;
  color: var(--gold);
  font-size: 1rem;
  text-align: center;
}

.daily-weather-disclosure[open] > summary::after {
  content: "-";
}

.daily-weather-body {
  display: grid;
  gap: 12px;
  padding: 4px 2px 14px;
}

.daily-weather-body > p,
.daily-weather-status {
  margin: 0;
  color: rgba(244, 240, 232, 0.62);
  font-size: 0.76rem;
  line-height: 1.55;
}

.daily-weather-search {
  display: grid;
  gap: 7px;
}

.daily-weather-search label {
  color: #fff8e8;
  font-size: 0.78rem;
  font-weight: 800;
}

.daily-weather-search > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.daily-weather-search input {
  box-sizing: border-box;
  min-width: 0;
  height: 40px;
  padding: 0 11px;
  border: 1px solid rgba(100, 182, 165, 0.32);
  border-radius: 6px;
  outline: none;
  background: rgba(8, 11, 10, 0.72);
  color: #fff8e8;
  font: inherit;
  font-size: 0.86rem;
}

.daily-weather-search input:focus {
  border-color: color-mix(in srgb, var(--teal) 76%, #fff8e8);
  box-shadow: 0 0 0 2px rgba(100, 182, 165, 0.14);
}

.daily-weather-search button,
.daily-weather-results button {
  border: 1px solid rgba(100, 182, 165, 0.34);
  border-radius: 6px;
  background: rgba(100, 182, 165, 0.12);
  color: #fff8e8;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 900;
  cursor: pointer;
}

.daily-weather-search button {
  min-width: 74px;
  padding: 0 12px;
}

.daily-weather-search button:disabled,
.daily-weather-results button:disabled,
.daily-weather-remove:disabled {
  cursor: wait;
  opacity: 0.5;
}

.daily-weather-results {
  display: grid;
  gap: 6px;
}

.daily-weather-results button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 7px 10px;
  text-align: left;
}

.daily-weather-results button:hover,
.daily-weather-results button:focus-visible {
  border-color: rgba(217, 183, 96, 0.58);
  background: rgba(217, 183, 96, 0.12);
}

.daily-weather-results button span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.daily-weather-results button small {
  color: var(--teal);
  font-size: 0.7rem;
}

.daily-weather-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  justify-content: space-between;
}

.daily-weather-footer a,
.daily-weather-remove {
  color: rgba(244, 240, 232, 0.62);
  font-size: 0.72rem;
}

.daily-weather-footer a:hover,
.daily-weather-footer a:focus-visible {
  color: var(--teal);
}

.daily-weather-remove {
  padding: 0;
  border: 0;
  background: transparent;
  color: #e7a39b;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}

.daily-weather-paused {
  padding-left: 10px;
  border-left: 2px solid rgba(217, 183, 96, 0.48);
}

.tarot-focus-panel[data-home-state="fresh"] {
  min-height: clamp(410px, calc(100svh - 260px), 520px);
}

.tarot-focus-panel[data-home-density="focused"] {
  min-height: clamp(390px, calc(100svh - 310px), 480px);
}

.tarot-focus-panel[data-home-compactness="launch-simple"] {
  min-height: clamp(360px, calc(100svh - 330px), 450px);
}

.tarot-focus-panel[data-reader="selene"],
.reading-reader-strip[data-reader="selene"],
.reading-draw-ritual[data-reader="selene"],
.reading-result[data-reader="selene"],
.tarot-focus-panel[data-reader="gentle"],
.reading-reader-strip[data-reader="gentle"],
.reading-pick-stage[data-reader="gentle"],
.reading-draw-ritual[data-reader="gentle"],
.reading-result[data-reader="gentle"] {
  --reader-accent: #8bc7d2;
  --reader-glow: rgba(139, 199, 210, 0.24);
  --daily-reader-position: center 24%;
  --daily-reader-mobile-position: center top;
  --daily-reader-revealed-mobile-position: 25% top;
  --reading-reader-position: center 22%;
  --reading-reader-mobile-position: center 22%;
  --reading-reader-mobile-scale: 1;
}

.tarot-focus-panel[data-reader="mira"],
.reading-reader-strip[data-reader="mira"],
.reading-draw-ritual[data-reader="mira"],
.reading-result[data-reader="mira"],
.tarot-focus-panel[data-reader="clear"],
.reading-reader-strip[data-reader="clear"],
.reading-pick-stage[data-reader="clear"],
.reading-draw-ritual[data-reader="clear"],
.reading-result[data-reader="clear"] {
  --reader-accent: #d9b760;
  --reader-glow: rgba(217, 183, 96, 0.24);
}

.tarot-focus-panel[data-reader="nyra"],
.reading-reader-strip[data-reader="nyra"],
.reading-draw-ritual[data-reader="nyra"],
.reading-result[data-reader="nyra"],
.tarot-focus-panel[data-reader="mystic"],
.reading-reader-strip[data-reader="mystic"],
.reading-pick-stage[data-reader="mystic"],
.reading-draw-ritual[data-reader="mystic"],
.reading-result[data-reader="mystic"] {
  --reader-accent: #d77c73;
  --reader-glow: rgba(215, 124, 115, 0.22);
}

.tarot-focus-panel[data-reader="rowan"],
.reading-reader-strip[data-reader="rowan"],
.reading-draw-ritual[data-reader="rowan"],
.reading-result[data-reader="rowan"],
.tarot-focus-panel[data-reader="earth"],
.reading-reader-strip[data-reader="earth"],
.reading-pick-stage[data-reader="earth"],
.reading-draw-ritual[data-reader="earth"],
.reading-result[data-reader="earth"] {
  --reader-accent: #84bc89;
  --reader-glow: rgba(132, 188, 137, 0.2);
}

.tarot-focus-panel[data-reader="radiant"],
.reading-reader-strip[data-reader="radiant"],
.reading-pick-stage[data-reader="radiant"],
.reading-draw-ritual[data-reader="radiant"],
.reading-result[data-reader="radiant"] {
  --reader-accent: #f0c86d;
  --reader-glow: rgba(240, 200, 109, 0.24);
}

.tarot-focus-panel[data-reader="shadow"],
.reading-reader-strip[data-reader="shadow"],
.reading-pick-stage[data-reader="shadow"],
.reading-draw-ritual[data-reader="shadow"],
.reading-result[data-reader="shadow"] {
  --reader-accent: #a99bd8;
  --reader-glow: rgba(169, 155, 216, 0.24);
}

.tarot-focus-panel[data-reader="tide"],
.reading-reader-strip[data-reader="tide"],
.reading-pick-stage[data-reader="tide"],
.reading-draw-ritual[data-reader="tide"],
.reading-result[data-reader="tide"] {
  --reader-accent: #76c6bf;
  --reader-glow: rgba(118, 198, 191, 0.22);
}

.tarot-focus-panel[data-reader="celestial"],
.reading-reader-strip[data-reader="celestial"],
.reading-pick-stage[data-reader="celestial"],
.reading-draw-ritual[data-reader="celestial"],
.reading-result[data-reader="celestial"] {
  --reader-accent: #8fb6ff;
  --reader-glow: rgba(143, 182, 255, 0.2);
}

.tarot-focus-panel[data-reader="lunar"],
.reading-reader-strip[data-reader="lunar"],
.reading-pick-stage[data-reader="lunar"],
.reading-draw-ritual[data-reader="lunar"],
.reading-result[data-reader="lunar"] {
  --reader-accent: #d6d0ff;
  --reader-glow: rgba(214, 208, 255, 0.22);
}

.tarot-focus-panel[data-reader="fae"],
.reading-reader-strip[data-reader="fae"],
.reading-pick-stage[data-reader="fae"],
.reading-draw-ritual[data-reader="fae"],
.reading-result[data-reader="fae"] {
  --reader-accent: #a7d37d;
  --reader-glow: rgba(167, 211, 125, 0.2);
}

.tarot-focus-panel[data-reader="raven"],
.reading-reader-strip[data-reader="raven"],
.reading-pick-stage[data-reader="raven"],
.reading-draw-ritual[data-reader="raven"],
.reading-result[data-reader="raven"] {
  --reader-accent: #b7a6e8;
  --reader-glow: rgba(183, 166, 232, 0.23);
}

.tarot-focus-panel[data-reader="crystal"],
.reading-reader-strip[data-reader="crystal"],
.reading-pick-stage[data-reader="crystal"],
.reading-draw-ritual[data-reader="crystal"],
.reading-result[data-reader="crystal"] {
  --reader-accent: #9ad8e5;
  --reader-glow: rgba(154, 216, 229, 0.22);
}

.tarot-focus-panel[data-reader="vivyy"],
.reading-reader-strip[data-reader="vivyy"],
.reading-pick-stage[data-reader="vivyy"],
.reading-draw-ritual[data-reader="vivyy"],
.reading-result[data-reader="vivyy"] {
  --reader-accent: #f3a6c8;
  --reader-glow: rgba(243, 166, 200, 0.25);
  --daily-reader-position: center 24%;
  --daily-reader-mobile-position: center top;
  --reading-reader-position: center 22%;
  --reading-reader-mobile-position: center 22%;
  --reading-reader-mobile-scale: 1;
}

.tarot-focus-panel[data-reader="summer"],
.reading-reader-strip[data-reader="summer"],
.reading-pick-stage[data-reader="summer"],
.reading-draw-ritual[data-reader="summer"],
.reading-result[data-reader="summer"] {
  --reader-accent: #f1b866;
  --reader-glow: rgba(241, 184, 102, 0.25);
  --daily-reader-position: 54% 20%;
  --daily-reader-mobile-position: 54% top;
  --reading-reader-position: 54% 20%;
  --reading-reader-mobile-position: 54% 20%;
  --reading-reader-mobile-scale: 1;
}

.tarot-focus-panel[data-reader="bell"],
.reading-reader-strip[data-reader="bell"],
.reading-pick-stage[data-reader="bell"],
.reading-draw-ritual[data-reader="bell"],
.reading-result[data-reader="bell"] {
  --reader-accent: #f7d8a6;
  --reader-glow: rgba(247, 216, 166, 0.24);
  --daily-reader-position: 57% 20%;
  --daily-reader-mobile-position: 57% top;
  --reading-reader-position: 57% 20%;
  --reading-reader-mobile-position: 57% 20%;
  --reading-reader-mobile-scale: 1;
}

.tarot-focus-panel[data-reader="zoe"],
.reading-reader-strip[data-reader="zoe"],
.reading-pick-stage[data-reader="zoe"],
.reading-draw-ritual[data-reader="zoe"],
.reading-result[data-reader="zoe"] {
  --reader-accent: #e9c26e;
  --reader-glow: rgba(95, 146, 210, 0.24);
  --daily-reader-position: 62% 20%;
  --daily-reader-mobile-position: 62% top;
  --reading-reader-position: 62% 20%;
  --reading-reader-mobile-position: 62% 20%;
  --reading-reader-mobile-scale: 1;
}

.tarot-focus-panel[data-reader="sunshine"],
.reading-reader-strip[data-reader="sunshine"],
.reading-pick-stage[data-reader="sunshine"],
.reading-draw-ritual[data-reader="sunshine"],
.reading-result[data-reader="sunshine"] {
  --reader-accent: #f1c86a;
  --reader-glow: rgba(241, 200, 106, 0.25);
  --daily-reader-position: 60% 20%;
  --daily-reader-mobile-position: 60% top;
  --reading-reader-position: 60% 20%;
  --reading-reader-mobile-position: 60% 20%;
  --reading-reader-mobile-scale: 1;
}

.tarot-focus-panel::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background:
    radial-gradient(circle at 52% 34%, transparent 0 22%, rgba(6, 8, 10, 0.22) 48%, rgba(6, 8, 10, 0.82) 100%),
    linear-gradient(90deg, rgba(5, 7, 9, 0.82), rgba(5, 7, 9, 0.2) 48%, rgba(5, 7, 9, 0.78)),
    linear-gradient(180deg, rgba(5, 7, 9, 0.18), rgba(5, 7, 9, 0.78));
  pointer-events: none;
}

.tarot-focus-panel::after {
  position: absolute;
  inset: auto 0 0;
  z-index: 0;
  height: 36%;
  content: "";
  background:
    linear-gradient(180deg, transparent, rgba(7, 9, 10, 0.94)),
    linear-gradient(90deg, rgba(217, 183, 96, 0.12), rgba(100, 182, 165, 0.08));
  pointer-events: none;
}

.tarot-focus-panel[data-demo-reader="true"]::before,
.tarot-focus-panel[data-partner-ref]:not([data-partner-ref=""])::before {
  background:
    radial-gradient(circle at 52% 34%, transparent 0 24%, rgba(6, 8, 10, 0.12) 50%, rgba(6, 8, 10, 0.58) 100%),
    linear-gradient(90deg, rgba(5, 7, 9, 0.62), rgba(5, 7, 9, 0.08) 48%, rgba(5, 7, 9, 0.54)),
    linear-gradient(180deg, rgba(5, 7, 9, 0.08), rgba(5, 7, 9, 0.64));
}

.tarot-sanctuary-demo-badge {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 10px;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 64%, transparent);
  border-radius: 999px;
  color: #fff6de;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0;
  background: color-mix(in srgb, var(--reader-accent) 18%, rgba(8, 10, 11, 0.72));
  box-shadow: 0 0 20px var(--reader-glow);
}

.tarot-sanctuary {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: inherit;
  grid-template-columns: minmax(0, 1fr) minmax(176px, 0.46fr);
  grid-template-rows: minmax(0, 1fr) auto auto auto auto;
  grid-template-areas:
    "copy status"
    "actions status"
    "path-proof status"
    "funnel status"
    "note status";
  gap: 12px 18px;
  align-items: end;
  padding: 24px;
}

.tarot-sanctuary-copy {
  grid-area: copy;
  align-self: start;
  max-width: 34rem;
  padding-top: 10px;
}

.tarot-sanctuary-copy h2 {
  margin: 6px 0 0;
  max-width: 10em;
  color: #fffaf1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.95rem, 5vw, 3.35rem);
  font-weight: 700;
  line-height: 0.98;
  text-wrap: balance;
  text-shadow: 0 18px 42px rgba(0, 0, 0, 0.5);
}

.tarot-sanctuary-title-mobile {
  display: none;
}

.tarot-sanctuary-copy p:not(.daily-kicker) {
  max-width: 31rem;
  margin: 18px 0 0;
  color: rgba(244, 240, 232, 0.86);
  font-size: 1.02rem;
  line-height: 1.68;
}

.tarot-sanctuary-copy small {
  display: inline-flex;
  margin-top: 14px;
  padding: 6px 10px;
  border: 1px solid rgba(244, 240, 232, 0.16);
  border-radius: 999px;
  color: rgba(244, 240, 232, 0.76);
  background: rgba(16, 20, 18, 0.42);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.25;
}

.tarot-starter-route {
  display: grid;
  width: min(100%, 31rem);
  gap: 8px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(244, 240, 232, 0.16);
  border-radius: 8px;
  background: rgba(8, 10, 11, 0.64);
  backdrop-filter: blur(10px);
}

.tarot-starter-route > span {
  color: var(--gold);
  font-size: 0.76rem;
  font-weight: 900;
}

.tarot-starter-route ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tarot-starter-route li {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  color: rgba(244, 240, 232, 0.86);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.25;
}

.tarot-starter-route b {
  display: inline-grid;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  background: var(--gold);
  font-size: 0.68rem;
}

.tarot-sanctuary-referral {
  display: grid;
  max-width: 28rem;
  margin-top: 16px;
  gap: 8px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 46%, transparent);
  border-radius: 8px;
  background: rgba(8, 10, 11, 0.62);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(12px);
}

.tarot-sanctuary-referral span {
  color: #fff6de;
  font-size: 0.86rem;
  font-weight: 900;
}

.tarot-sanctuary-referral strong {
  color: rgba(244, 240, 232, 0.78);
  font-size: 0.82rem;
  line-height: 1.45;
}

.tarot-sanctuary-referral button {
  min-height: 38px;
  width: fit-content;
  padding: 0 14px;
}

.tarot-sanctuary-reader {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  min-height: 0;
  pointer-events: none;
}

.tarot-sanctuary-reader::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background:
    radial-gradient(circle at 50% 30%, var(--reader-glow), transparent 32%),
    linear-gradient(180deg, rgba(5, 7, 9, 0.02), rgba(5, 7, 9, 0.58) 74%, rgba(5, 7, 9, 0.94));
  animation: readerAuraPulse 7.8s ease-in-out infinite;
}

.tarot-sanctuary-reader::after {
  position: absolute;
  inset: 10% 14% auto auto;
  z-index: 1;
  width: 34%;
  height: 44%;
  content: "";
  border-radius: 50%;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--reader-accent) 24%, transparent), transparent 62%),
    radial-gradient(circle at 30% 28%, rgba(244, 240, 232, 0.14), transparent 38%);
  opacity: 0.7;
  filter: blur(16px);
  transform: translate3d(calc(var(--reader-look-x, 0) * -7px), calc(var(--reader-look-y, 0) * -5px), 0);
  animation: readerHaloDrift 11s ease-in-out infinite;
}

.tarot-sanctuary-reader img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--daily-reader-position, center 28%);
  border: 0;
  border-radius: 0;
  filter: saturate(1.04) contrast(1.02);
  animation: readerIdleBreath 8.2s ease-in-out infinite;
  will-change: transform, filter;
}

.tarot-focus-panel.reader-motion-active .tarot-sanctuary-reader img {
  filter: saturate(1.1) contrast(1.04) brightness(1.02);
}

.tarot-sanctuary-reader span {
  position: absolute;
  z-index: 2;
  left: 24px;
  bottom: 138px;
  padding: 6px 10px;
  border: 1px solid rgba(217, 183, 96, 0.28);
  border-radius: 999px;
  color: #fffaf1;
  background: rgba(16, 20, 18, 0.54);
  font-size: 0.78rem;
  font-weight: 900;
  backdrop-filter: blur(10px);
}

.tarot-sanctuary-status {
  position: relative;
  z-index: 3;
  grid-area: status;
  align-self: center;
  display: grid;
  gap: 10px;
}

.tarot-sanctuary-signal {
  display: grid;
  min-height: 92px;
  gap: 5px;
  padding: 11px 12px;
  border: 1px solid rgba(244, 240, 232, 0.12);
  border-radius: 8px;
  color: var(--text);
  text-align: left;
  background: rgba(16, 20, 18, 0.78);
  backdrop-filter: blur(12px);
  cursor: pointer;
}

.tarot-sanctuary-signal.daily,
.tarot-sanctuary-signal.free {
  border-color: color-mix(in srgb, var(--reader-accent) 54%, transparent);
  background: linear-gradient(135deg, var(--reader-glow), rgba(16, 20, 18, 0.82));
}

.tarot-sanctuary-signal.paid {
  border-color: rgba(217, 183, 96, 0.42);
  background: linear-gradient(135deg, rgba(217, 183, 96, 0.14), rgba(16, 20, 18, 0.82));
}

.tarot-sanctuary-signal.blocked {
  border-color: rgba(215, 124, 115, 0.48);
  background: linear-gradient(135deg, rgba(215, 124, 115, 0.16), rgba(16, 20, 18, 0.82));
}

.tarot-sanctuary-signal span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.tarot-sanctuary-signal strong {
  color: #fffaf1;
  font-size: 0.98rem;
  line-height: 1.24;
}

.tarot-sanctuary-signal small {
  overflow: hidden;
  color: rgba(244, 240, 232, 0.66);
  font-size: 0.72rem;
  line-height: 1.32;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tarot-sanctuary-actions {
  grid-area: actions;
  position: relative;
  z-index: 3;
  display: grid;
  max-width: 720px;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.92fr) minmax(0, 0.92fr);
  gap: 8px;
  align-self: end;
}

.tarot-sanctuary-actions[data-home-cta-mode="primary-plus-two"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tarot-sanctuary-actions[data-home-cta-mode="primary-plus-two"] .tarot-sanctuary-action-card[data-home-action-priority="primary"] {
  grid-column: 1 / -1;
}

.tarot-sanctuary-actions[data-home-simplified-mode="core-first"] .tarot-sanctuary-action-card[data-home-visual-role="extension"],
.tarot-focus-panel[data-home-layout="core-3"] .tarot-sanctuary-action-card.reader {
  min-height: 46px;
}


.tarot-focus-panel[data-home-compactness="launch-simple"] .tarot-sanctuary-actions {
  max-width: min(100%, 560px);
  gap: 6px;
}

.tarot-focus-panel[data-home-compactness="launch-simple"] .tarot-sanctuary-action-card:not([data-home-action-priority="primary"]) {
  min-height: 44px;
  padding-block: 7px;
}

.tarot-focus-panel[data-home-compactness="launch-simple"] .tarot-sanctuary-action-card:not([data-home-action-priority="primary"]) small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tarot-sanctuary-actions button {
  min-height: 58px;
}

.tarot-sanctuary-action-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  height: auto;
  min-width: 0;
  padding-block: 10px;
  text-align: left;
  white-space: normal;
}

.tarot-sanctuary-action-card span {
  grid-column: 2;
  grid-row: 1;
  width: fit-content;
  max-width: 100%;
  padding: 3px 7px;
  border: 1px solid rgba(16, 20, 18, 0.18);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.12;
  white-space: nowrap;
}

.tarot-sanctuary-action-card strong {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  font-size: 0.92rem;
  line-height: 1.18;
}

.tarot-sanctuary-action-card small {
  grid-column: 1 / -1;
  color: rgba(244, 240, 232, 0.68);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.32;
}

.tarot-sanctuary-path-promise {
  grid-column: 1 / -1;
  display: -webkit-box;
  overflow: hidden;
  color: color-mix(in srgb, var(--reader-accent) 68%, rgba(244, 240, 232, 0.74));
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.28;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tarot-sanctuary-path-label {
  grid-column: 1 / -1;
  width: fit-content;
  max-width: 100%;
  color: color-mix(in srgb, var(--reader-accent) 72%, #fff8e8);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tarot-sanctuary-action-card.primary-button small {
  color: rgba(16, 20, 18, 0.74);
}

.tarot-sanctuary-action-card.primary-button .tarot-sanctuary-path-label {
  color: rgba(16, 20, 18, 0.72);
}

.tarot-sanctuary-action-card.primary-button .tarot-sanctuary-path-promise {
  color: rgba(16, 20, 18, 0.7);
}

.tarot-sanctuary-action-card.reader {
  width: 100%;
  min-height: 58px;
  padding: 10px 12px;
  border-color: color-mix(in srgb, var(--reader-accent) 40%, rgba(244, 240, 232, 0.14));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 62%, rgba(16, 20, 18, 0.66)), rgba(16, 20, 18, 0.64)),
    rgba(16, 20, 18, 0.64);
}

.tarot-sanctuary-action-card.reader strong {
  color: color-mix(in srgb, var(--reader-accent) 74%, #fff8e8);
}

.tarot-sanctuary-action-card.deep {
  border-color: color-mix(in srgb, var(--gold) 46%, rgba(244, 240, 232, 0.14));
  background:
    radial-gradient(circle at 100% 0, rgba(217, 183, 96, 0.18), transparent 42%),
    linear-gradient(135deg, rgba(217, 183, 96, 0.12), color-mix(in srgb, var(--reader-glow) 42%, rgba(16, 20, 18, 0.68))),
    rgba(16, 20, 18, 0.64);
}

.tarot-sanctuary-action-card.deep span {
  color: var(--ink);
  background: var(--gold);
}

.tarot-sanctuary-action-card.deep strong {
  color: #fff8e8;
}

.tarot-sanctuary-action-card.primary-button span {
  color: var(--ink);
  background: rgba(16, 20, 18, 0.08);
}

.tarot-sanctuary-action-card.secondary-button span {
  color: var(--gold);
  border-color: rgba(217, 183, 96, 0.28);
  background: rgba(217, 183, 96, 0.1);
}

.tarot-sanctuary-action-card.commerce,
.tarot-sanctuary-action-card.ready {
  border-color: rgba(100, 182, 165, 0.5);
  background:
    linear-gradient(135deg, rgba(100, 182, 165, 0.2), rgba(217, 183, 96, 0.14)),
    rgba(16, 20, 18, 0.62);
}

.tarot-sanctuary-action-card.commerce span,
.tarot-sanctuary-action-card.ready span {
  color: var(--ink);
  background: rgba(100, 182, 165, 0.92);
}

.tarot-sanctuary-action-card.commerce strong,
.tarot-sanctuary-action-card.ready strong {
  color: var(--text);
}

.tarot-sanctuary-action-card.primary-button.commerce small,
.tarot-sanctuary-action-card.primary-button.ready small {
  color: rgba(244, 240, 232, 0.72);
}

.tarot-sanctuary-action-card.primary-button.commerce .tarot-sanctuary-path-label,
.tarot-sanctuary-action-card.primary-button.ready .tarot-sanctuary-path-label,
.tarot-sanctuary-action-card.primary-button.commerce .tarot-sanctuary-path-promise,
.tarot-sanctuary-action-card.primary-button.ready .tarot-sanctuary-path-promise {
  color: color-mix(in srgb, var(--reader-accent) 72%, #fff8e8);
}

.tarot-sanctuary-primary {
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.34),
    0 0 0 4px rgba(217, 183, 96, 0.08);
}

/* Retired value-strip hooks stay hidden and named for rollback/static contracts. */
.tarot-sanctuary-path-proof,
.tarot-sanctuary-path-proof span,
.tarot-sanctuary-path-proof [data-home-path-cost-tone="paid"] em,
.tarot-sanctuary-funnel,
.tarot-sanctuary-funnel-routes,
.tarot-sanctuary-funnel-summary-meta,
.tarot-sanctuary-route-cost,
.tarot-sanctuary-funnel[data-home-funnel-visibility="compact"],
.tarot-sanctuary-funnel[data-home-funnel-visibility="compact"] .tarot-sanctuary-funnel-routes b,
.tarot-focus-panel[data-home-density="focused"] .tarot-sanctuary-funnel[data-home-funnel-visibility="compact"],
.tarot-sanctuary-funnel[data-home-funnel-visual="decision-rail"] {
  display: none;
}


.tarot-focus-panel[data-home-density="recovery"] .tarot-sanctuary {
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  grid-template-areas:
    "copy status"
    "actions status"
    "proof status"
    "note status";
}

.tarot-focus-panel[data-home-density="recovery"] .tarot-sanctuary-status {
  display: none;
}

.tarot-sanctuary-commerce-proof {
  grid-area: proof;
  display: grid;
  gap: 8px;
  max-width: min(100%, 680px);
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 36%, rgba(217, 183, 96, 0.14));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 34%, rgba(16, 20, 18, 0.58)), rgba(16, 20, 18, 0.62)),
    rgba(16, 20, 18, 0.54);
}

.tarot-sanctuary-commerce-proof > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 30px;
  cursor: pointer;
  list-style: none;
}

.tarot-sanctuary-commerce-proof > summary::-webkit-details-marker {
  display: none;
}

.tarot-sanctuary-commerce-proof > summary::after {
  content: "+";
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 34%, rgba(217, 183, 96, 0.18));
  border-radius: 50%;
  color: var(--gold);
  font-size: 0.86rem;
  font-weight: 950;
}

.tarot-sanctuary-commerce-proof[open] > summary::after {
  content: "-";
}

.tarot-sanctuary-commerce-proof > summary strong {
  min-width: 0;
  color: #fff8e8;
  font-size: 0.76rem;
  line-height: 1.25;
}

.tarot-sanctuary-commerce-proof-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.tarot-sanctuary-commerce-proof-steps > span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 7px;
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(244, 240, 232, 0.045);
}

.tarot-sanctuary-commerce-proof-steps em {
  display: inline-grid;
  grid-row: 1 / span 2;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #1b1710;
  background: color-mix(in srgb, var(--reader-accent) 70%, var(--gold));
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 950;
}

.tarot-sanctuary-commerce-proof-steps strong,
.tarot-sanctuary-commerce-proof-steps small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tarot-sanctuary-commerce-proof-steps strong {
  color: #fff8e8;
  font-size: 0.72rem;
  line-height: 1.2;
}

.tarot-sanctuary-commerce-proof-steps small {
  color: rgba(244, 240, 232, 0.64);
  font-size: 0.64rem;
  font-weight: 780;
  line-height: 1.24;
}

.tarot-sanctuary-note {
  grid-area: note;
  margin: 0;
  color: rgba(244, 240, 232, 0.66);
  line-height: 1.55;
}

.tarot-focus-panel[data-home-state="fresh"] .tarot-sanctuary {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 0.9fr) auto auto auto;
  grid-template-areas:
    "copy"
    "actions"
    "path-proof"
    "funnel";
  align-content: end;
  gap: 8px;
  padding: 18px;
}

.tarot-focus-panel[data-home-layout="value-first"] .tarot-sanctuary-reader span {
  display: none;
}

.tarot-focus-panel[data-home-layout="value-first"][data-home-state="fresh"] .tarot-sanctuary {
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "copy"
    "actions";
}

.tarot-focus-panel[data-home-layout="value-first"] .tarot-sanctuary-actions[data-home-cta-mode="primary-plus-one"] {
  max-width: min(100%, 590px);
  grid-template-columns: 1fr;
}

.tarot-focus-panel[data-home-layout="value-first"] .tarot-sanctuary-actions[data-home-simplified-mode="value-first"] .tarot-sanctuary-path-label,
.tarot-focus-panel[data-home-layout="value-first"] .tarot-sanctuary-actions[data-home-simplified-mode="value-first"] .tarot-sanctuary-path-promise {
  display: none;
}

.tarot-focus-panel[data-home-layout="value-first"][data-home-density="handoff"] .tarot-sanctuary {
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "copy status"
    "note status";
}

.tarot-focus-panel[data-home-state="fresh"] .tarot-sanctuary-copy {
  max-width: min(25rem, 58%);
}

.tarot-focus-panel[data-home-state="fresh"] .tarot-sanctuary-copy h2 {
  max-width: 8.6em;
  font-size: clamp(1.58rem, 3.3vw, 2.45rem);
  line-height: 1.02;
}

.tarot-focus-panel[data-home-state="fresh"] .tarot-sanctuary-copy p:not(.daily-kicker) {
  max-width: 22rem;
  margin-top: 7px;
  font-size: 0.9rem;
  line-height: 1.42;
}

.tarot-focus-panel[data-home-state="fresh"] .tarot-sanctuary-copy small {
  display: none;
}

.tarot-focus-panel[data-home-state="fresh"] .tarot-sanctuary-actions {
  max-width: min(100%, 590px);
}

.tarot-focus-panel[data-home-state="fresh"] .tarot-sanctuary-actions button {
  min-height: 48px;
}

.tarot-focus-panel[data-home-state="fresh"] .tarot-sanctuary-action-card {
  padding-block: 7px;
}

.tarot-focus-panel[data-home-state="fresh"] .tarot-sanctuary-note {
  display: none;
}

.tarot-focus-panel[data-home-state="fresh"] .tarot-sanctuary-status[hidden] {
  display: none;
}

.tarot-focus-panel .tarot-focus-actions {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.daily-loop-panel,
.onboarding-panel,
.npc-consult-panel,
.economy-panel {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid rgba(217, 183, 96, 0.26);
  border-radius: 8px;
  background:
    linear-gradient(140deg, rgba(34, 40, 36, 0.9), rgba(16, 20, 18, 0.88)),
    radial-gradient(circle at 100% 0, rgba(100, 182, 165, 0.12), transparent 36%);
}

.daily-more-panel {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.38);
}

.daily-more-panel[open] {
  padding-bottom: 10px;
  border-color: rgba(217, 183, 96, 0.28);
  background:
    linear-gradient(140deg, rgba(34, 40, 36, 0.72), rgba(16, 20, 18, 0.68)),
    rgba(16, 20, 18, 0.42);
}

.daily-more-panel summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: center;
  min-height: 48px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.daily-more-panel summary::-webkit-details-marker {
  display: none;
}

.daily-more-panel summary::after {
  content: "+";
  color: var(--gold);
  font-weight: 900;
}

.daily-more-panel[open] summary::after {
  content: "−";
}

.daily-more-panel summary span {
  color: #fff8e8;
  font-size: 0.92rem;
  font-weight: 900;
}

.daily-more-panel summary small {
  grid-column: 1 / -1;
  color: rgba(244, 240, 232, 0.62);
  font-size: 0.78rem;
}

.daily-more-panel .daily-loop-panel,
.daily-more-panel .onboarding-panel {
  margin: 0 10px;
}

.daily-more-panel .onboarding-panel:last-child {
  margin-bottom: 0;
}

.daily-loop-heading,
.onboarding-heading {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.daily-loop-heading h2,
.onboarding-heading h3,
.economy-panel h3 {
  margin: 0;
  line-height: 1.25;
}

.daily-loop-heading > span {
  display: grid;
  min-width: 52px;
  min-height: 52px;
  place-items: center;
  border: 1px solid rgba(217, 183, 96, 0.42);
  border-radius: 50%;
  color: var(--gold);
  font-weight: 900;
}

.daily-loop-panel > p,
.onboarding-panel > p,
.economy-panel p,
.npc-consult-copy p,
.npc-consult-copy small {
  margin: 0;
  color: rgba(244, 240, 232, 0.68);
  line-height: 1.55;
}

.daily-loop-steps,
.onboarding-task-list,
.economy-rule-list {
  display: grid;
  gap: 8px;
}

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

.daily-loop-step,
.onboarding-task {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 58px;
  padding: 10px;
  border: 1px solid rgba(244, 240, 232, 0.12);
  border-radius: 8px;
  color: var(--text);
  text-align: left;
  background: rgba(16, 20, 18, 0.48);
}

.daily-loop-step.done,
.onboarding-task.done {
  border-color: rgba(100, 182, 165, 0.48);
  background: rgba(100, 182, 165, 0.1);
}

.daily-loop-step.optional,
.onboarding-task.optional {
  border-color: rgba(244, 240, 232, 0.09);
  color: rgba(244, 240, 232, 0.82);
  background: rgba(16, 20, 18, 0.34);
}

.daily-loop-step span,
.onboarding-task span {
  color: var(--gold);
  font-weight: 900;
}

.daily-loop-step strong,
.onboarding-task strong {
  line-height: 1.25;
}

.daily-loop-step em,
.onboarding-task small {
  grid-column: 2;
  width: fit-content;
  padding: 2px 6px;
  border: 1px solid rgba(217, 183, 96, 0.2);
  border-radius: 999px;
  color: rgba(217, 183, 96, 0.86);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.2;
}

.daily-loop-step small {
  grid-column: 2;
  color: var(--muted);
  font-size: 0.75rem;
}

.optional-flow {
  display: grid;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid rgba(244, 240, 232, 0.08);
}

.optional-flow summary {
  width: fit-content;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 800;
}

.optional-flow summary::marker {
  color: var(--gold);
}

.optional-flow p {
  margin: 0;
  color: rgba(244, 240, 232, 0.62);
  line-height: 1.5;
}

.starter-side-lock {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px dashed rgba(217, 183, 96, 0.32);
  border-radius: 8px;
  background: rgba(217, 183, 96, 0.06);
}

.starter-side-lock strong {
  color: var(--gold);
  font-size: 0.86rem;
}

.starter-side-lock p {
  margin: 0;
  color: rgba(244, 240, 232, 0.66);
  font-size: 0.82rem;
  line-height: 1.45;
}

.onboarding-panel[hidden] {
  display: none;
}

.onboarding-heading .secondary-button {
  min-width: 132px;
}

.onboarding-panel > small {
  color: var(--gold);
  font-weight: 900;
}

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

.economy-heading {
  display: grid;
  gap: 4px;
}

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

.economy-resource-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.46);
}

.economy-resource-card.points {
  border-color: rgba(217, 183, 96, 0.3);
}

.economy-resource-card.stardust {
  border-color: rgba(100, 182, 165, 0.32);
}

.economy-resource-card.elements {
  border-color: rgba(244, 240, 232, 0.18);
}

.economy-resource-card span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
}

.economy-resource-card strong {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.25;
}

.economy-resource-card p,
.economy-resource-card small {
  margin: 0;
  color: rgba(244, 240, 232, 0.68);
  line-height: 1.45;
}

.economy-resource-card small {
  color: rgba(217, 183, 96, 0.78);
  font-size: 0.76rem;
}

.economy-resource-card button {
  width: 100%;
  min-height: 36px;
}

.economy-flow {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(100, 182, 165, 0.2);
  border-radius: 8px;
  background: rgba(100, 182, 165, 0.06);
}

.economy-flow > strong {
  color: var(--text);
  font-size: 0.88rem;
}

.economy-flow > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.economy-flow button {
  min-height: 38px;
  padding: 8px;
  border: 1px solid rgba(244, 240, 232, 0.12);
  border-radius: 8px;
  color: rgba(244, 240, 232, 0.82);
  background: rgba(16, 20, 18, 0.42);
}

.economy-flow button:hover,
.economy-flow button:focus-visible {
  border-color: rgba(217, 183, 96, 0.6);
  color: var(--text);
}

.economy-rules .economy-rule-list {
  margin-top: 10px;
}

.economy-rule-list span {
  padding: 9px 10px;
  border: 1px solid rgba(100, 182, 165, 0.2);
  border-radius: 8px;
  color: rgba(244, 240, 232, 0.72);
  background: rgba(100, 182, 165, 0.06);
  line-height: 1.45;
}

.daily-ritual{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 18px;align-items:center;padding:16px 18px;overflow:hidden;border:1px solid rgba(244,240,232,0.16);border-radius:8px;background:radial-gradient(circle at 50% -12%,rgba(217,183,96,0.18),transparent 40%),linear-gradient(145deg,rgba(100,182,165,0.08),rgba(10,13,15,0.58)),rgba(24,32,29,0.9);box-shadow:0 12px 30px rgba(0,0,0,0.2);text-align:left;}
.daily-ritual h2{margin:0;font-size:1.08rem;line-height:1.25;}
.daily-ritual p{max-width:44rem;margin:0;color:var(--muted);font-size:0.88rem;line-height:1.5;}
.ritual-card{position:relative;display:block;width:100%;min-height:0;aspect-ratio:420 / 680;padding:0;border:1px solid rgba(217,183,96,0.44);border-radius:8px;background:linear-gradient(145deg,rgba(217,183,96,0.18),rgba(100,182,165,0.1)),rgba(16,20,18,0.92);box-shadow:0 18px 34px rgba(0,0,0,0.28);cursor:pointer;transition:transform 120ms ease,opacity 240ms ease,border-color 240ms ease,box-shadow 240ms ease;}
.ritual-card span{position:absolute;inset:8px;overflow:hidden;border-radius:6px;background:radial-gradient(circle at 50% 36%,rgba(255,246,212,0.22) 0 9%,transparent 10%),radial-gradient(circle at 50% 50%,rgba(217,183,96,0.22),transparent 34%),linear-gradient(135deg,rgba(100,182,165,0.18),rgba(215,124,115,0.16)),var(--surface);}
.ritual-card span::before,.ritual-card span::after{position:absolute;content:"";border:1px solid rgba(217,183,96,0.34);border-radius:999px;}
.ritual-card span::before{inset:16%;}
.ritual-card span::after{inset:28%;transform:rotate(45deg);}
.ritual-card:hover,.ritual-card:focus-visible,.ritual-card.selected{border-color:rgba(217,183,96,0.9);box-shadow:0 22px 38px rgba(0,0,0,0.34),0 0 0 4px rgba(217,183,96,0.12);}
.daily-draw-reveal{display:grid;justify-items:center;gap:16px;min-height:520px;padding:28px 18px;border:1px solid rgba(244,240,232,0.16);border-radius:8px;background:radial-gradient(circle at 50% 18%,rgba(217,183,96,0.22),transparent 38%),linear-gradient(145deg,rgba(215,124,115,0.1),rgba(10,13,15,0.62)),rgba(24,32,29,0.92);box-shadow:0 20px 48px rgba(0,0,0,0.3);text-align:center;}
.daily-draw-reveal .daily-kicker{margin:0;color:var(--gold);}
.daily-reveal-card{position:relative;width:min(58vw,220px);aspect-ratio:420 / 680;overflow:hidden;border:1px solid rgba(217,183,96,0.55);border-radius:8px;background:rgba(16,20,18,0.82);box-shadow:0 28px 60px rgba(0,0,0,0.38),0 0 0 10px rgba(217,183,96,0.07);animation:dailyRevealCard 880ms cubic-bezier(0.2,0.84,0.28,1) both;}
.daily-reveal-card img{width:100%;height:100%;display:block;object-fit:cover;}
.daily-draw-reveal h2{max-width:34rem;margin:0;font-size:1.45rem;line-height:1.28;}
.daily-draw-reveal p:last-child{margin:0;color:var(--muted);}
.daily-kicker{margin:0 0 14px;color:var(--text);font-weight:800;}
.daily-feature-card,.daily-question-card,.daily-mini-panel,.daily-overview-card,.daily-section-card{border:1px solid rgba(244,240,232,0.16);border-radius:8px;background:linear-gradient(145deg,rgba(255,118,76,0.1),rgba(10,13,15,0.56)),rgba(24,32,29,0.86);box-shadow:0 16px 40px rgba(0,0,0,0.24);}
.daily-card-thumb{position:relative;width:100%;aspect-ratio:420 / 680;overflow:hidden;}
.daily-card-thumb img{width:100%;height:100%;display:block;object-fit:cover;}
.daily-card-sigil{position:absolute;right:6px;bottom:6px;display:grid;width:28px;height:28px;place-items:center;border:1px solid rgba(255,245,211,0.58);border-radius:50%;background:rgba(16,20,18,0.76);color:var(--gold);font-family:Georgia,"Times New Roman",serif;}
.daily-question-card{display:grid;grid-template-columns:72px minmax(0,1fr) 38px;gap:14px;align-items:center;width:100%;padding:18px;border-radius:16px;color:var(--text);background:linear-gradient(115deg,rgba(217,183,96,0.14),rgba(59,103,94,0.1)),rgba(12,17,16,0.92);text-align:left;cursor:pointer;}
.daily-question-card strong,.daily-question-card small{display:block;}
.daily-question-card strong{font-size:1.05rem;line-height:1.35;}
.daily-question-copy{min-width:0;}
.daily-question-card small{margin-top:4px;color:var(--muted);font-size:0.88rem;}
.daily-question-cost{display:inline-flex;max-width:100%;margin-top:9px;padding:4px 8px;border:1px solid rgba(217,183,96,0.34);border-radius:999px;color:var(--gold);font-size:0.74rem;font-style:normal;font-weight:900;line-height:1.3;}
.daily-question-cost.blocked{border-color:rgba(215,124,115,0.46);color:#f2a59c;}
.daily-question-entry-receipt,.daily-question-entry-receipt span{display:none;}
.daily-question-orb{display:block;width:64px;height:64px;border:1px solid rgba(239,204,111,0.5);border-radius:50%;object-fit:cover;object-position:center 18%;box-shadow:0 12px 28px rgba(0,0,0,0.3);}
.daily-chevron{display:grid;width:36px;height:36px;place-items:center;border-radius:50%;background:rgba(244,240,232,0.13);color:var(--text);font-size:1.5rem;}
.daily-question-panel{display:grid;gap:10px;padding:12px;border:1px solid rgba(217,183,96,0.24);border-radius:8px;background:linear-gradient(140deg,rgba(217,183,96,0.11),rgba(16,20,18,0.5)),rgba(16,20,18,0.48);}
.daily-return-reminder{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;max-width:100%;min-width:0;overflow:hidden;padding:10px 12px;border:1px solid rgba(244,240,232,0.14);border-radius:8px;background:rgba(16,20,18,0.54);}
.daily-return-reminder-copy{display:grid;gap:3px;min-width:0;}
.daily-return-reminder-copy strong{color:#fff8e8;font-size:0.82rem;line-height:1.25;}
.daily-return-reminder-copy small,.daily-return-reminder-copy em{color:rgba(244,240,232,0.62);font-size:0.68rem;font-style:normal;line-height:1.35;}
.daily-return-reminder-copy em[data-tone="saved"]{color:#80d5c2;}
.daily-return-reminder-copy em[data-tone="error"]{color:#f0a79f;}
.daily-return-reminder-toggle{position:relative;display:grid;grid-template-columns:38px minmax(0,auto);gap:7px;align-items:center;max-width:100%;min-width:0;min-height:32px;cursor:pointer;}
.daily-return-reminder-toggle input{position:absolute;width:1px;height:1px;opacity:0;}
.daily-return-reminder-toggle span{position:relative;width:38px;height:22px;border:1px solid rgba(244,240,232,0.24);border-radius:999px;background:rgba(244,240,232,0.12);transition:border-color 150ms ease,background 150ms ease;}
.daily-return-reminder-toggle span::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:rgba(255,248,232,0.82);transition:transform 150ms ease,background 150ms ease;}
.daily-return-reminder-toggle input:checked + span{border-color:color-mix(in srgb,var(--reader-accent) 70%,#fff8e8);background:color-mix(in srgb,var(--reader-accent) 58%,rgba(16,20,18,0.3));}
.daily-return-reminder-toggle input:checked + span::after{background:#fff8e8;transform:translateX(16px);}
.daily-return-reminder-toggle input:focus-visible + span{outline:2px solid color-mix(in srgb,var(--reader-accent) 68%,#fff8e8);outline-offset:3px;}
.daily-return-reminder-toggle input:disabled + span{cursor:wait;opacity:0.58;}
.daily-return-reminder-toggle em{display:block;min-width:0;overflow:hidden;color:rgba(255,248,232,0.8);font-size:0.68rem;font-style:normal;font-weight:850;text-overflow:ellipsis;white-space:nowrap;}
.daily-question-head{display:flex;gap:10px;align-items:center;justify-content:space-between;}
.daily-question-head strong{color:#fff8e8;font-size:1rem;}
.daily-question-head span{flex:0 0 auto;color:rgba(244,240,232,0.58);font-size:0.76rem;font-weight:900;}
.daily-question-bridge{display:grid;gap:4px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--reader-accent) 28%,rgba(217,183,96,0.18));border-radius:8px;background:linear-gradient(135deg,color-mix(in srgb,var(--reader-glow) 36%,rgba(16,20,18,0.6)),rgba(16,20,18,0.48)),rgba(16,20,18,0.52);}
.daily-question-bridge strong{color:#fff8e8;font-size:0.92rem;line-height:1.3;}
.daily-question-bridge span{color:rgba(244,240,232,0.7);font-size:0.8rem;line-height:1.45;}
.daily-question-bridge small{overflow:hidden;color:color-mix(in srgb,var(--reader-accent) 76%,#fff8e8);font-size:0.74rem;font-weight:800;line-height:1.4;text-overflow:ellipsis;white-space:nowrap;}
.daily-question-evidence{display:grid;border:1px solid color-mix(in srgb,var(--reader-accent) 26%,rgba(244,240,232,0.1));border-radius:8px;background:linear-gradient(135deg,color-mix(in srgb,var(--reader-glow) 24%,rgba(16,20,18,0.42)),rgba(16,20,18,0.5)),rgba(16,20,18,0.42);}
.daily-question-evidence summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 9px;align-items:center;min-height:58px;padding:9px 10px;cursor:pointer;list-style:none;}
.daily-question-evidence summary::-webkit-details-marker{display:none;}
.daily-question-evidence summary::after{content:"+";grid-column:3;grid-row:1 / span 2;display:inline-grid;width:28px;height:28px;place-items:center;border:1px solid rgba(217,183,96,0.24);border-radius:50%;color:var(--gold);font-size:1rem;font-weight:900;}
.daily-question-evidence[open] summary::after{content:"-";}
.daily-question-evidence summary span{display:inline-flex;min-height:24px;align-items:center;padding:3px 7px;border:1px solid rgba(217,183,96,0.18);border-radius:999px;color:var(--gold);font-size:0.66rem;font-weight:950;background:rgba(217,183,96,0.07);}
.daily-question-evidence summary strong{min-width:0;color:#fff8e8;font-size:0.82rem;line-height:1.22;}
.daily-question-evidence summary small{grid-column:2;color:rgba(244,240,232,0.62);font-size:0.72rem;line-height:1.32;}
.daily-question-evidence-body{display:grid;gap:8px;padding:0 10px 10px;}
.daily-question-ai-receipt{display:grid;gap:9px;padding:10px;border:1px solid color-mix(in srgb,var(--reader-accent) 30%,rgba(100,182,165,0.18));border-radius:8px;background:radial-gradient(circle at 0 0,color-mix(in srgb,var(--reader-glow) 64%,transparent),transparent 42%),linear-gradient(135deg,rgba(100,182,165,0.12),rgba(16,20,18,0.46)),rgba(16,20,18,0.4);}
.daily-question-ai-receipt-head{display:grid;gap:3px;}
.daily-question-ai-receipt-head small{color:color-mix(in srgb,var(--reader-accent) 78%,rgba(244,240,232,0.7));font-size:0.7rem;font-weight:900;line-height:1.2;}
.daily-question-ai-signature{justify-self:start;padding:3px 7px;border:1px solid color-mix(in srgb,var(--reader-accent) 36%,rgba(244,240,232,0.14));border-radius:999px;color:color-mix(in srgb,var(--reader-accent) 76%,#fff8e8);font-size:0.66rem;font-style:normal;font-weight:900;line-height:1.2;background:rgba(244,240,232,0.045);}
.daily-question-ai-receipt-head strong{color:#fff8e8;font-size:0.88rem;line-height:1.32;}
.daily-question-ai-receipt-head span{color:rgba(244,240,232,0.7);font-size:0.76rem;line-height:1.42;overflow-wrap:anywhere;}
.daily-question-ai-receipt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;}
.daily-question-ai-receipt-grid article{display:grid;min-width:0;gap:4px;padding:8px;border:1px solid rgba(244,240,232,0.1);border-radius:8px;background:rgba(244,240,232,0.045);}
.daily-question-ai-receipt-grid small{color:rgba(244,240,232,0.58);font-size:0.68rem;font-weight:900;line-height:1.2;}
.daily-question-ai-receipt-grid span{color:rgba(255,248,232,0.84);font-size:0.74rem;font-weight:820;line-height:1.34;overflow-wrap:anywhere;}
.daily-question-proof{display:grid;gap:8px;padding:10px;border:1px solid color-mix(in srgb,var(--reader-accent) 22%,rgba(244,240,232,0.1));border-radius:8px;background:linear-gradient(135deg,color-mix(in srgb,var(--reader-glow) 26%,rgba(16,20,18,0.42)),rgba(16,20,18,0.42)),rgba(16,20,18,0.34);}
.daily-question-proof > strong{color:color-mix(in srgb,var(--reader-accent) 76%,#fff8e8);font-size:0.78rem;line-height:1.25;}
.daily-question-proof > div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;}
.daily-question-proof article{display:grid;gap:3px;min-width:0;padding:8px;border:1px solid rgba(244,240,232,0.1);border-radius:8px;background:rgba(16,20,18,0.36);}
.daily-question-proof small{color:rgba(244,240,232,0.56);font-size:0.68rem;font-weight:900;line-height:1.2;}
.daily-question-proof span{color:rgba(255,248,232,0.84);font-size:0.76rem;font-weight:850;line-height:1.28;}
.daily-reading-conversion-summary{display:grid;gap:8px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--reader-accent) 34%,rgba(244,240,232,0.12));border-radius:8px;background:radial-gradient(circle at 0 0,color-mix(in srgb,var(--reader-glow) 34%,transparent),transparent 46%),rgba(16,20,18,0.42);}
.daily-reading-conversion-head{display:grid;gap:3px;}
.daily-reading-conversion-head strong{color:#fff8e8;font-size:0.86rem;line-height:1.25;}
.daily-reading-conversion-head span{color:rgba(244,240,232,0.7);font-size:0.76rem;line-height:1.45;}
.daily-reading-conversion-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
.daily-reading-conversion-points article{display:grid;gap:3px;min-width:0;padding:8px;border:1px solid rgba(244,240,232,0.1);border-radius:8px;background:rgba(244,240,232,0.055);}
.daily-reading-conversion-points small{color:color-mix(in srgb,var(--reader-accent) 76%,#fff8e8);font-size:0.66rem;font-weight:900;line-height:1.15;}
.daily-reading-conversion-points strong{color:#fff8e8;font-size:0.74rem;line-height:1.2;}
.daily-reading-conversion-points span{color:rgba(244,240,232,0.64);font-size:0.68rem;line-height:1.32;}
.daily-reading-choice{display:grid;gap:6px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--reader-accent) 30%,rgba(244,240,232,0.12));border-radius:8px;background:linear-gradient(135deg,color-mix(in srgb,var(--reader-glow) 32%,rgba(16,20,18,0.58)),rgba(16,20,18,0.5)),rgba(16,20,18,0.44);}
.daily-reading-choice > strong{color:#fff8e8;font-size:0.86rem;line-height:1.28;}
.daily-reading-choice > span{color:rgba(244,240,232,0.7);font-size:0.78rem;line-height:1.45;}
.daily-reading-decision-detail,.daily-question-details{display:grid;gap:8px;}
.daily-reading-decision-guide{display:grid;gap:8px;padding:10px;border:1px solid color-mix(in srgb,var(--reader-accent) 34%,rgba(244,240,232,0.12));border-radius:8px;background:linear-gradient(135deg,color-mix(in srgb,var(--reader-glow) 54%,rgba(16,20,18,0.5)),rgba(16,20,18,0.62)),rgba(16,20,18,0.6);}
.daily-reading-decision-guide div{display:grid;gap:4px;}
.daily-reading-decision-guide small{color:color-mix(in srgb,var(--reader-accent) 72%,#fff8e8);font-size:0.7rem;font-weight:950;}
.daily-reading-decision-guide strong{color:#fffaf1;font-size:0.9rem;line-height:1.2;}
.daily-reading-decision-guide span,.daily-reading-decision-guide em{color:rgba(244,240,232,0.74);font-size:0.74rem;font-style:normal;font-weight:800;line-height:1.35;}
.daily-reading-decision-guide ul{display:grid;gap:5px;margin:0;padding:0;list-style:none;}
.daily-reading-decision-guide li{padding-left:13px;color:rgba(244,240,232,0.78);font-size:0.72rem;font-weight:850;line-height:1.32;}
.daily-reading-decision-guide li::before{content:"";display:inline-block;width:5px;height:5px;margin:0 8px 1px -13px;border-radius:50%;background:color-mix(in srgb,var(--reader-accent) 72%,#fff8e8);}
.daily-reading-depth{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 9px;align-items:center;padding:8px 10px;border:1px solid color-mix(in srgb,var(--reader-accent) 34%,rgba(244,240,232,0.1));border-radius:8px;background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--reader-glow) 42%,transparent),transparent 48%),rgba(16,20,18,0.42);}
.daily-reading-depth[data-daily-depth-suggestion="deep"]{border-color:color-mix(in srgb,var(--gold) 50%,rgba(244,240,232,0.12));background:radial-gradient(circle at 100% 0,rgba(217,183,96,0.2),transparent 48%),rgba(16,20,18,0.44);}
.daily-reading-depth small{display:inline-flex;align-items:center;min-height:24px;padding:3px 7px;border:1px solid rgba(217,183,96,0.2);border-radius:999px;color:var(--gold);font-size:0.68rem;font-weight:900;line-height:1.2;background:rgba(217,183,96,0.08);}
.daily-reading-depth strong{min-width:0;color:#fff8e8;font-size:0.8rem;line-height:1.25;}
.daily-reading-depth span{grid-column:1 / -1;color:rgba(244,240,232,0.7);font-size:0.75rem;line-height:1.4;}
.daily-reading-paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;}
.daily-reading-path{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 8px;align-content:start;min-height:118px;padding:10px;border:1px solid rgba(244,240,232,0.12);border-radius:8px;color:var(--text);text-align:left;background:rgba(244,240,232,0.06);cursor:pointer;}
.daily-reading-path[data-daily-reading-recommended="true"]{border-color:color-mix(in srgb,var(--reader-accent) 64%,rgba(217,183,96,0.28));background:radial-gradient(circle at 0 0,color-mix(in srgb,var(--reader-glow) 46%,transparent),transparent 44%),rgba(244,240,232,0.065);}
.daily-reading-path.deep{border-color:color-mix(in srgb,var(--gold) 44%,rgba(244,240,232,0.12));background:radial-gradient(circle at 100% 0,rgba(217,183,96,0.14),transparent 42%),rgba(244,240,232,0.06);}
.daily-reading-path.blocked{border-color:rgba(215,124,115,0.34);}
.daily-reading-path:hover,.daily-reading-path:focus-visible{border-color:color-mix(in srgb,var(--reader-accent) 58%,rgba(217,183,96,0.28));outline:2px solid color-mix(in srgb,var(--reader-accent) 24%,transparent);outline-offset:2px;}
.daily-reading-path strong{color:#fff8e8;font-size:0.82rem;line-height:1.25;}
.daily-reading-path small{grid-column:1 / -1;color:rgba(244,240,232,0.66);font-size:0.72rem;font-weight:760;line-height:1.35;}
.daily-reading-path .daily-reading-path-recommended{width:fit-content;padding:2px 6px;border:1px solid color-mix(in srgb,var(--reader-accent) 38%,rgba(244,240,232,0.14));border-radius:999px;color:color-mix(in srgb,var(--reader-accent) 78%,#fff8e8);background:rgba(244,240,232,0.055);font-size:0.64rem;font-weight:950;line-height:1.15;}
.daily-reading-path .daily-reading-path-fit{color:rgba(255,248,232,0.82);font-weight:850;}
.daily-reading-path .daily-reading-path-keep{color:color-mix(in srgb,var(--reader-accent) 70%,rgba(244,240,232,0.56));}
.daily-reading-path-values{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:5px;}
.daily-reading-path-values i{display:inline-flex;min-width:0;max-width:100%;align-items:center;padding:3px 6px;border:1px solid color-mix(in srgb,var(--reader-accent) 28%,rgba(244,240,232,0.12));border-radius:999px;color:rgba(255,248,232,0.82);background:rgba(244,240,232,0.06);font-size:0.66rem;font-style:normal;font-weight:850;line-height:1.15;}
.daily-reading-path.deep .daily-reading-path-values i{border-color:color-mix(in srgb,var(--gold) 34%,rgba(244,240,232,0.12));color:color-mix(in srgb,var(--gold) 72%,#fff8e8);background:rgba(217,183,96,0.1);}
.daily-reading-path-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;}
.daily-reading-path-detail{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 8px;min-width:0;padding:9px;border:1px solid rgba(244,240,232,0.1);border-radius:8px;background:rgba(244,240,232,0.045);}
.daily-reading-path-detail.deep{border-color:color-mix(in srgb,var(--gold) 32%,rgba(244,240,232,0.1));}
.daily-reading-path-detail strong{min-width:0;color:#fff8e8;font-size:0.76rem;line-height:1.25;}
.daily-reading-path-detail em{color:color-mix(in srgb,var(--reader-accent) 72%,#fff8e8);font-size:0.68rem;font-style:normal;font-weight:900;}
.daily-reading-path-detail .daily-reading-path-values,.daily-reading-path-detail small{grid-column:1 / -1;}
.daily-reading-path-detail small{color:rgba(244,240,232,0.68);font-size:0.7rem;line-height:1.32;}
.daily-reading-path em{justify-self:end;color:color-mix(in srgb,var(--reader-accent) 72%,#fff8e8);font-size:0.7rem;font-style:normal;font-weight:900;}
.daily-reading-path span{grid-column:1 / -1;width:fit-content;min-height:26px;display:inline-flex;align-items:center;padding:4px 8px;border:1px solid rgba(217,183,96,0.2);border-radius:999px;color:var(--ink);font-size:0.72rem;font-weight:900;background:var(--gold);}
.daily-reading-path.blocked span{color:#fff4f1;background:rgba(215,124,115,0.78);}
.daily-question-recommendation{display:grid;grid-template-columns:auto minmax(0,0.28fr) minmax(0,1fr);gap:8px;align-items:center;padding:9px 10px;border:1px solid color-mix(in srgb,var(--reader-accent) 26%,rgba(244,240,232,0.1));border-radius:8px;background:linear-gradient(135deg,color-mix(in srgb,var(--reader-glow) 38%,rgba(16,20,18,0.5)),rgba(16,20,18,0.46)),rgba(16,20,18,0.42);}
.daily-question-recommendation small{display:inline-flex;min-height:26px;align-items:center;padding:4px 8px;border:1px solid rgba(217,183,96,0.22);border-radius:999px;color:var(--gold);font-size:0.72rem;font-weight:900;background:rgba(217,183,96,0.08);}
.daily-question-recommendation strong{color:#fff8e8;font-size:0.82rem;line-height:1.25;overflow-wrap:anywhere;}
.daily-question-recommendation span{color:rgba(244,240,232,0.68);font-size:0.78rem;line-height:1.4;}
.daily-paid-reading{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;align-items:center;padding:13px 14px;border:1px solid color-mix(in srgb,var(--gold) 52%,rgba(244,240,232,0.12));border-radius:8px;background:radial-gradient(circle at 100% 0,rgba(217,183,96,0.2),transparent 42%),linear-gradient(135deg,rgba(217,183,96,0.13),rgba(100,182,165,0.08)),rgba(16,20,18,0.56);}
.daily-paid-reading[data-cost-tone="blocked"]{border-color:rgba(215,124,115,0.4);background:linear-gradient(135deg,rgba(215,124,115,0.12),rgba(217,183,96,0.08)),rgba(16,20,18,0.58);}
.daily-paid-reading > span{display:inline-flex;min-height:26px;align-items:center;padding:4px 8px;border:1px solid rgba(217,183,96,0.24);border-radius:999px;color:var(--gold);font-size:0.72rem;font-weight:950;background:rgba(217,183,96,0.08);}
.daily-paid-reading strong{min-width:0;color:#fff8e8;font-size:0.95rem;line-height:1.28;}
.daily-paid-reading p{grid-column:2 / 3;margin:0;color:rgba(244,240,232,0.68);font-size:0.78rem;line-height:1.45;}
.daily-paid-reading-values{grid-column:2 / 3;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;}
.daily-paid-reading-values i{display:inline-flex;align-items:center;min-height:24px;padding:4px 7px;border:1px solid rgba(217,183,96,0.18);border-radius:999px;color:rgba(244,240,232,0.76);font-size:0.68rem;font-style:normal;font-weight:800;line-height:1.2;background:rgba(217,183,96,0.08);}
.daily-paid-reading-plan{grid-column:2 / 3;display:grid;gap:6px;min-width:0;}
.daily-paid-reading-plan > span{color:color-mix(in srgb,var(--gold) 84%,#fff8e8);font-size:0.68rem;font-weight:950;line-height:1.2;}
.daily-paid-reading-plan > div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
.daily-paid-reading-plan i{display:grid;gap:3px;min-width:0;padding:7px;border:1px solid color-mix(in srgb,var(--reader-accent) 34%,rgba(217,183,96,0.16));border-radius:8px;background:color-mix(in srgb,var(--reader-glow) 22%,rgba(16,20,18,0.62));font-style:normal;}
.daily-paid-reading-plan i small{grid-column:auto;color:color-mix(in srgb,var(--reader-accent) 78%,#fff8e8);font-size:0.62rem;font-weight:950;line-height:1.15;}
.daily-paid-reading-plan i strong{min-width:0;color:rgba(255,248,232,0.86);font-size:0.7rem;font-weight:850;line-height:1.32;}
.daily-paid-reading small{grid-column:2 / 3;color:color-mix(in srgb,var(--reader-accent) 76%,#fff8e8);font-size:0.73rem;font-weight:850;line-height:1.3;}
.daily-paid-reading em{grid-column:2 / 3;color:rgba(244,240,232,0.72);font-size:0.72rem;font-style:normal;font-weight:800;line-height:1.38;}
.daily-question-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.daily-question-option{display:grid;min-height:152px;gap:8px;align-content:start;padding:12px;border:1px solid rgba(244,240,232,0.12);border-radius:8px;color:var(--text);text-align:left;background:rgba(16,20,18,0.5);cursor:pointer;}
.daily-question-option:hover{border-color:rgba(217,183,96,0.42);background:rgba(217,183,96,0.1);}
.daily-question-option strong{color:#fff8e8;font-size:0.96rem;line-height:1.32;}
.daily-question-option small{color:rgba(244,240,232,0.62);font-size:0.8rem;line-height:1.45;}
.daily-question-option-context{align-self:end;padding-top:8px;border-top:1px solid rgba(217,183,96,0.16);color:rgba(244,240,232,0.78);font-size:0.76rem;font-weight:700;line-height:1.45;}
.daily-question-footer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding-top:2px;}
.daily-question-footer span{overflow:hidden;color:rgba(244,240,232,0.58);font-size:0.78rem;line-height:1.45;text-overflow:ellipsis;white-space:nowrap;}
.daily-question-footer strong{color:var(--gold);font-size:0.78rem;line-height:1.35;text-align:right;}
.daily-mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.daily-mini-panel{min-height:148px;padding:18px;}
.daily-mini-dot{display:inline-block;width:22px;height:22px;border-radius:50%;vertical-align:middle;}
.daily-mini-dot.calm{background:linear-gradient(135deg,#ffd85a,#65c7ae);}
.daily-mini-dot.alert{background:linear-gradient(135deg,#ff6b67,#d9547b);}
.daily-mini-panel p{display:inline-block;margin:0 0 14px 8px;color:var(--muted);font-weight:700;}
.daily-mini-panel strong{display:block;color:var(--text);line-height:1.72;white-space:pre-line;}
.daily-overview-card{display:grid;grid-template-columns:54px minmax(0,1fr);gap:16px;align-items:center;padding:18px;}
.daily-medal{display:grid;width:48px;height:48px;place-items:center;border-radius:50%;background:radial-gradient(circle at 45% 38%,#fff6da,#ad7765 48%,#2b2725 100%);color:#131614;box-shadow:0 10px 26px rgba(0,0,0,0.28);}
.daily-overview-card p{margin:0;color:var(--muted);font-size:1rem;line-height:1.85;}
.daily-context-panel{display:grid;gap:12px;padding:16px;border:1px solid rgba(100,182,165,0.24);border-radius:8px;background:linear-gradient(150deg,rgba(100,182,165,0.12),rgba(16,20,18,0.5)),rgba(16,20,18,0.54);}
.daily-context-head{display:flex;gap:10px;align-items:center;justify-content:space-between;}
.daily-context-head strong{color:#fff8e8;font-size:1rem;}
.daily-context-head > div{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end;}
.daily-context-head span{flex:0 0 auto;padding:4px 8px;border:1px solid rgba(100,182,165,0.42);border-radius:999px;color:var(--teal);font-size:0.72rem;font-weight:900;}
.daily-reality-tags{display:flex;flex-wrap:wrap;gap:7px;}
.daily-reality-tags span{padding:4px 8px;border:1px solid color-mix(in srgb,var(--reader-accent,var(--teal)) 36%,rgba(244,240,232,0.12));border-radius:999px;color:color-mix(in srgb,var(--reader-accent,var(--teal)) 74%,#fff8e8);font-size:0.72rem;font-weight:900;line-height:1.2;background:rgba(244,240,232,0.04);}
.daily-context-story{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;}
.daily-context-primary{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,0.92fr);gap:12px;align-items:stretch;}
.daily-context-story-item{display:grid;gap:6px;align-content:start;min-width:0;padding:12px 2px;border-bottom:1px solid rgba(244,240,232,0.1);}
.daily-context-story-item small{color:color-mix(in srgb,var(--reader-accent,var(--teal)) 78%,#fff8e8);font-size:0.74rem;font-weight:900;}
.daily-context-story-item p{margin:0;color:rgba(244,240,232,0.78);font-size:0.9rem;line-height:1.65;}
.daily-context-primary .daily-context-hook{align-self:stretch;margin:0;}
.daily-context-evening{padding-left:12px;border-left:2px solid color-mix(in srgb,var(--gold) 64%,transparent);border-bottom:0;}
.daily-narrative-details{border-top:1px solid rgba(244,240,232,0.1);}
.daily-narrative-details > summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;align-items:center;padding:11px 0;list-style:none;cursor:pointer;}
.daily-narrative-details > summary::-webkit-details-marker{display:none;}
.daily-narrative-details > summary::after{grid-column:2;grid-row:1 / span 3;content:"+";color:var(--gold);font-size:1rem;}
.daily-narrative-details[open] > summary::after{content:"−";}
.daily-narrative-details > summary span{color:color-mix(in srgb,var(--reader-accent,var(--teal)) 78%,#fff8e8);font-size:0.7rem;font-weight:900;}
.daily-narrative-details > summary strong{grid-column:1;color:#fff8e8;font-size:0.86rem;line-height:1.35;}
.daily-narrative-details > summary small{grid-column:1;color:rgba(244,240,232,0.58);font-size:0.72rem;line-height:1.4;}
.daily-narrative-details .daily-context-story{padding-bottom:8px;}
.daily-outcome-feedback{display:grid;grid-template-columns:minmax(0,1fr) minmax(158px,48%);gap:5px 9px;align-items:center;margin-top:5px;padding-top:7px;border-top:1px solid rgba(244,240,232,0.1);}
.daily-outcome-feedback-heading{display:grid;gap:2px;}
.daily-outcome-feedback-heading strong{color:#fff8e8;font-size:0.76rem;line-height:1.35;}
.daily-outcome-feedback-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;}
.daily-outcome-feedback-options button{min-width:0;min-height:34px;padding:5px 3px;border:1px solid rgba(217,183,96,0.3);border-radius:6px;background:rgba(8,11,10,0.42);color:rgba(244,240,232,0.8);font:inherit;font-size:0.66rem;font-weight:800;line-height:1.25;overflow-wrap:anywhere;cursor:pointer;}
.daily-outcome-feedback-options button:hover:not(:disabled),.daily-outcome-feedback-options button:focus-visible{border-color:color-mix(in srgb,var(--reader-accent,var(--gold)) 72%,#fff8e8);outline:none;}
.daily-outcome-feedback-options button[aria-pressed="true"]{border-color:var(--gold);background:var(--gold);color:#17160f;}
.daily-outcome-feedback-options button:disabled{cursor:wait;opacity:0.64;}
.daily-outcome-feedback-status{grid-column:1 / -1;color:rgba(244,240,232,0.5);font-size:0.64rem;line-height:1.35;}
.daily-outcome-feedback-status[data-tone="saved"]{color:color-mix(in srgb,var(--reader-accent,var(--teal)) 76%,#fff8e8);}
.daily-outcome-feedback-status[data-tone="error"]{color:#f1a49d;}
.daily-reflection-disclosure{margin-top:6px;padding-top:8px;border-top:1px solid rgba(244,240,232,0.1);}
.daily-reflection-disclosure > summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;align-items:center;list-style:none;color:#fff8e8;cursor:pointer;}
.daily-reflection-disclosure > summary::-webkit-details-marker{display:none;}
.daily-reflection-disclosure > summary::after{grid-column:2;grid-row:1 / span 2;content:"+";color:var(--gold);font-size:1rem;}
.daily-reflection-disclosure[open] > summary::after{content:"-";}
.daily-reflection-disclosure > summary span{font-size:0.82rem;font-weight:900;}
.daily-reflection-disclosure > summary small{grid-column:1;overflow-wrap:anywhere;color:rgba(244,240,232,0.54);font-size:0.68rem;line-height:1.35;}
.daily-reflection-form{display:grid;gap:9px;padding-top:12px;}
.daily-reflection-form label{display:grid;gap:7px;}
.daily-reflection-form label > span{color:#fff8e8;font-size:0.82rem;font-weight:800;}
.daily-reflection-form textarea{box-sizing:border-box;width:100%;min-height:76px;max-height:180px;padding:10px 11px;resize:vertical;border:1px solid rgba(217,183,96,0.28);border-radius:6px;outline:none;background:rgba(8,11,10,0.56);color:#fff8e8;font:inherit;font-size:0.88rem;line-height:1.55;}
.daily-reflection-form textarea::placeholder{color:rgba(244,240,232,0.42);}
.daily-reflection-form textarea:focus{border-color:color-mix(in srgb,var(--reader-accent,var(--gold)) 70%,#fff8e8);box-shadow:0 0 0 2px color-mix(in srgb,var(--reader-accent,var(--gold)) 18%,transparent);}
.daily-reflection-meta{display:flex;gap:10px;align-items:center;justify-content:space-between;min-height:18px;}
.daily-reflection-meta small{color:rgba(244,240,232,0.58);font-size:0.7rem;line-height:1.35;}
.daily-reflection-meta small[data-tone="error"]{color:#f1a49d;}
.daily-reflection-meta span{flex:0 0 auto;color:rgba(244,240,232,0.44);font-size:0.68rem;font-variant-numeric:tabular-nums;}
.daily-reflection-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;justify-content:flex-end;}
.daily-reflection-actions button{min-height:40px;padding:8px 13px;border-radius:6px;font:inherit;font-size:0.78rem;font-weight:900;line-height:1.25;white-space:normal;cursor:pointer;}
.daily-reflection-save{flex:0 1 190px;border:1px solid color-mix(in srgb,var(--reader-accent,var(--gold)) 58%,rgba(244,240,232,0.18));background:color-mix(in srgb,var(--reader-accent,var(--gold)) 24%,rgba(8,11,10,0.72));color:#fff8e8;}
.daily-reflection-delete{flex:0 0 auto;border:1px solid rgba(244,240,232,0.14);background:transparent;color:rgba(244,240,232,0.66);}
.daily-reflection-actions button:disabled,.daily-reflection-form textarea:disabled{cursor:wait;opacity:0.58;}
.daily-context-angle,.daily-context-echo,.daily-context-curated{flex:0 0 auto;padding:4px 8px;border:1px solid rgba(217,183,96,0.4);border-radius:999px;color:var(--gold);font-size:0.72rem;font-style:normal;font-weight:900;}
.daily-context-echo{border-color:color-mix(in srgb,var(--reader-accent,var(--teal)) 42%,rgba(244,240,232,0.14));color:color-mix(in srgb,var(--reader-accent,var(--teal)) 72%,#fff8e8);background:rgba(244,240,232,0.04);}
.daily-context-curated{border-color:rgba(100,182,165,0.4);color:color-mix(in srgb,var(--teal) 76%,#fff8e8);background:rgba(100,182,165,0.08);}
.daily-context-summary{margin:0;padding:10px 12px;border:1px solid color-mix(in srgb,var(--teal) 28%,rgba(244,240,232,0.1));border-radius:8px;color:#fff8e8;font-size:0.95rem;font-weight:800;line-height:1.58;background:linear-gradient(135deg,rgba(100,182,165,0.1),rgba(217,183,96,0.07)),rgba(16,20,18,0.46);}
.daily-context-hook{display:grid;gap:5px;margin:0;padding:10px 12px;border:1px solid color-mix(in srgb,var(--gold) 42%,rgba(244,240,232,0.12));border-radius:8px;background:linear-gradient(135deg,rgba(217,183,96,0.13),color-mix(in srgb,var(--reader-glow,rgba(100,182,165,0.16)) 42%,rgba(16,20,18,0.44))),rgba(16,20,18,0.52);}
.daily-context-hook small{color:color-mix(in srgb,var(--gold) 76%,#fff8e8);font-size:0.72rem;font-weight:900;}
.daily-context-hook strong{color:#fff8e8;font-size:0.94rem;line-height:1.55;}
.daily-context-why{display:grid;gap:10px;padding:12px;border:1px solid color-mix(in srgb,var(--reader-accent,var(--teal)) 34%,rgba(244,240,232,0.1));border-radius:8px;background:linear-gradient(135deg,color-mix(in srgb,var(--reader-glow,rgba(100,182,165,0.16)) 54%,rgba(16,20,18,0.48)),rgba(16,20,18,0.5)),rgba(16,20,18,0.5);}
.daily-context-why-head{display:flex;gap:8px;align-items:baseline;justify-content:space-between;}
.daily-context-why-head strong{color:#fff8e8;font-size:0.95rem;}
.daily-context-signature{flex:0 0 auto;padding:3px 7px;border:1px solid color-mix(in srgb,var(--reader-accent,var(--teal)) 36%,rgba(244,240,232,0.14));border-radius:999px;color:color-mix(in srgb,var(--reader-accent,var(--teal)) 76%,#fff8e8);font-size:0.68rem;font-style:normal;font-weight:900;line-height:1.2;background:rgba(244,240,232,0.045);}
.daily-context-why-head span{max-width:58%;color:rgba(244,240,232,0.62);font-size:0.74rem;font-weight:800;line-height:1.35;text-align:right;}
.daily-context-why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.daily-context-why-grid article{display:grid;gap:6px;min-height:96px;padding:10px;border:1px solid rgba(244,240,232,0.1);border-radius:8px;background:rgba(16,20,18,0.42);}
.daily-context-why-grid small{color:color-mix(in srgb,var(--reader-accent,var(--teal)) 78%,#fff8e8);font-size:0.74rem;font-weight:900;}
.daily-context-why-grid p{margin:0;color:rgba(244,240,232,0.72);font-size:0.82rem;line-height:1.55;}
.daily-context-snapshot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.daily-context-snapshot article{display:grid;min-height:58px;gap:4px;align-content:center;padding:9px 10px;border:1px solid color-mix(in srgb,var(--reader-accent,var(--teal)) 30%,rgba(244,240,232,0.1));border-radius:8px;background:linear-gradient(135deg,color-mix(in srgb,var(--reader-glow,rgba(100,182,165,0.16)) 40%,rgba(16,20,18,0.42)),rgba(16,20,18,0.48)),rgba(16,20,18,0.48);}
.daily-context-snapshot small{color:rgba(244,240,232,0.6);font-size:0.7rem;font-weight:900;line-height:1.2;}
.daily-context-snapshot strong{overflow:hidden;color:color-mix(in srgb,var(--reader-accent,var(--teal)) 76%,#fff8e8);font-size:0.82rem;line-height:1.3;text-overflow:ellipsis;white-space:nowrap;}
.daily-context-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.daily-context-grid article{display:grid;gap:6px;min-height:112px;padding:10px;border:1px solid rgba(244,240,232,0.1);border-radius:8px;background:rgba(16,20,18,0.42);}
.daily-context-grid small{color:var(--gold);font-size:0.74rem;font-weight:900;}
.daily-context-grid p,.daily-context-note{margin:0;color:rgba(244,240,232,0.72);font-size:0.86rem;line-height:1.62;}
.daily-context-note{color:rgba(244,240,232,0.56);font-size:0.78rem;}
.daily-context-details{border-top:1px solid rgba(244,240,232,0.1);}
.daily-context-details summary{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:11px 0 2px;color:rgba(244,240,232,0.72);font-size:0.8rem;font-weight:900;cursor:pointer;list-style:none;}
.daily-context-details summary::-webkit-details-marker{display:none;}
.daily-context-details summary::after{content:"+";flex:0 0 auto;color:var(--gold);font-size:1rem;}
.daily-context-details[open] summary::after{content:"−";}
.daily-context-details summary .daily-context-signature{margin-left:auto;}
.daily-context-details-body{display:grid;gap:10px;padding-top:12px;}
.daily-section-stack{display:grid;gap:14px;}
.daily-section-card{position:relative;overflow:hidden;padding:22px;}
.daily-section-card::after{position:absolute;right:22px;bottom:18px;width:42px;height:42px;content:"";border-radius:12px;background:linear-gradient(135deg,rgba(255,75,114,0.95),rgba(255,210,101,0.88));filter:blur(0.2px);transform:rotate(45deg);opacity:0.86;}
.daily-section-card h3{display:flex;gap:8px;align-items:center;margin:0 0 14px;font-size:1.28rem;}
.daily-section-card h3::before{width:4px;height:28px;content:"";border-radius:999px;background:linear-gradient(180deg,#ff8d68,var(--gold));}
.daily-section-card p{max-width:42rem;margin:0;color:rgba(244,240,232,0.68);font-size:1rem;line-height:1.95;white-space:pre-line;}
.section-note{max-width:46rem;margin:10px 0 0;color:var(--muted);line-height:1.6;}
.action-row{flex-wrap:wrap;gap:10px;margin-top:14px;}
.primary-button,.secondary-button,.danger-button,.product-button,

.reader-button,
.settings-link {
  min-height: 44px;
  padding: 0 16px;
  font-weight: 700;
}

.primary-button {
  background: var(--gold);
  color: var(--ink);
}

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

.danger-button {
  border-color: rgba(215, 124, 115, 0.5);
  background: rgba(215, 124, 115, 0.12);
  color: #ffd9d3;
}

.progress-track {
  height: 10px;
  margin: 14px 0 18px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-2);
}

#deck-progress-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--gold), var(--rose));
  transition: width 220ms ease;
}

.deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.mini-card,
.achievement-item,
.product-card,
.workshop-recipe {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.mini-card {
  display: grid;
  min-height: 282px;
  grid-template-rows: auto auto auto minmax(72px, 1fr) auto;
  justify-items: center;
  align-content: start;
  gap: 7px;
  padding: 12px;
  text-align: center;
  cursor: pointer;
}

.mini-card:not(.locked) {
  box-shadow: inset 0 0 0 1px rgba(217, 183, 96, 0.08);
}

.mini-card[role="button"]:focus-visible {
  outline: none;
  border-color: rgba(217, 183, 96, 0.92);
  box-shadow: 0 0 0 4px rgba(217, 183, 96, 0.2);
}

.mini-card.tier-bronze {
  border-color: rgba(181, 116, 70, 0.78);
}

.mini-card.tier-silver {
  border-color: rgba(198, 211, 224, 0.84);
}

.mini-card.tier-gold {
  border-color: rgba(233, 195, 96, 0.92);
  box-shadow: 0 0 18px rgba(217, 183, 96, 0.14);
}

.mini-card.tier-platinum {
  border-color: rgba(221, 236, 230, 0.95);
  box-shadow: 0 0 20px rgba(178, 235, 220, 0.16);
}

.mini-card.tier-diamond {
  border-color: rgba(136, 226, 255, 0.98);
  box-shadow: 0 0 22px rgba(136, 226, 255, 0.18);
}

.mini-card.tier-rainbowDiamond {
  border-color: transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, #ff6c8d, #f2c66d, #64d3b5, #88e2ff, #d6a4ff) border-box;
  border-width: 2px;
}

.mini-card-image {
  width: min(100%, 92px);
  aspect-ratio: 420 / 680;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.mini-card-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.mini-card strong {
  font-size: 0.9rem;
  line-height: 1.28;
}

.mini-card span {
  color: var(--muted);
  font-size: 0.76rem;
}

.mini-card-meaning {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.48;
}

.collection-chip {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border: 1px solid rgba(217, 183, 96, 0.45);
  border-radius: 999px;
  color: var(--gold) !important;
  font-size: 0.72rem !important;
}

.skin-marker {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border: 1px solid rgba(100, 182, 165, 0.48);
  border-radius: 999px;
  color: var(--teal) !important;
  font-size: 0.7rem !important;
}

.mini-card.locked {
  color: var(--text);
  background: rgba(34, 40, 36, 0.65);
}

.mini-card.locked .mini-card-image {
  opacity: 0.8;
  filter: saturate(0.78) brightness(0.86);
}

.mini-card.locked .collection-chip {
  color: var(--muted) !important;
  border-color: var(--line);
}

.skin-modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(5, 7, 6, 0.78);
  backdrop-filter: blur(14px);
}

.skin-modal-card {
  position: relative;
  display: grid;
  width: min(100%, 900px);
  max-height: min(92vh, 780px);
  grid-template-columns: minmax(210px, 320px) minmax(0, 1fr);
  gap: 20px;
  overflow: auto;
  padding: 18px;
  border: 1px solid rgba(217, 183, 96, 0.42);
  border-radius: 8px;
  background:
    radial-gradient(circle at 10% 0, rgba(217, 183, 96, 0.14), transparent 38%),
    var(--surface);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
}

.skin-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}

.skin-preview {
  align-self: start;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.82);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
}

.skin-preview img {
  width: 100%;
  display: block;
  aspect-ratio: 420 / 680;
  object-fit: cover;
}

.skin-modal-copy {
  min-width: 0;
  padding-right: 42px;
}

.skin-modal-copy h2 {
  margin: 2px 0 8px;
  line-height: 1.25;
}

.skin-modal-copy > p:not(.muted) {
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.6;
}

.skin-pack-options {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.skin-pack-title {
  margin: 0;
  color: rgba(244, 240, 232, 0.72);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
}

.skin-pack-option {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(217, 183, 96, 0.24);
  border-radius: 8px;
  background: rgba(217, 183, 96, 0.08);
}

.skin-pack-cover {
  overflow: hidden;
  border: 1px solid rgba(217, 183, 96, 0.26);
  border-radius: 6px;
  background: rgba(16, 20, 18, 0.72);
}

.skin-pack-cover img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

.skin-pack-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.skin-pack-copy h3 {
  margin: 0;
  font-size: 0.95rem;
}

.skin-pack-copy p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.skin-pack-action {
  width: fit-content;
  min-width: 132px;
}

.skin-options {
  display: grid;
  gap: 10px;
}

.skin-option {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.42);
}

.skin-option.equipped {
  border-color: rgba(100, 182, 165, 0.86);
  box-shadow: inset 0 0 0 1px rgba(100, 182, 165, 0.16);
}

.skin-option-image {
  overflow: hidden;
  border-radius: 6px;
  background: rgba(16, 20, 18, 0.72);
}

.skin-option-image img {
  width: 100%;
  height: 100%;
  display: block;
  aspect-ratio: 420 / 680;
  object-fit: cover;
}

.skin-option-copy {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.skin-option-copy h3 {
  margin: 4px 0;
  font-size: 1rem;
}

.skin-option-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.skin-badge {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 3px 8px;
  border: 1px solid rgba(217, 183, 96, 0.4);
  border-radius: 999px;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 800;
}

.skin-action {
  width: fit-content;
  min-width: 116px;
}

.reader-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.reader-card {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

.reader-card.current {
  border-color: rgba(217, 183, 96, 0.9);
}

.reader-card.selected {
  box-shadow:
    inset 0 0 0 1px rgba(100, 182, 165, 0.38),
    0 14px 34px rgba(0, 0, 0, 0.22);
}

.reader-card.locked {
  background: rgba(34, 40, 36, 0.72);
}

.reader-portrait {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: rgba(16, 20, 18, 0.76);
}

.reader-portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.reader-card.locked .reader-portrait img {
  filter: saturate(0.78) brightness(0.82);
}

.reader-meta {
  display: grid;
  gap: 12px;
  padding: 14px;
}

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

.reader-title-row h3 {
  margin: 0;
  line-height: 1.28;
}

.reader-meta p {
  margin: 0;
  color: var(--muted);
  line-height: 1.56;
}

.reader-level-note {
  color: rgba(244, 240, 232, 0.62);
  line-height: 1.45;
}

.reader-badge {
  width: fit-content;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid rgba(217, 183, 96, 0.45);
  border-radius: 999px;
  color: var(--gold);
  font-size: 0.76rem;
}

.reader-button {
  width: 100%;
  background: var(--gold);
  color: var(--ink);
}

.reader-card-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 8px;
}

.reader-profile-open {
  width: 100%;
  min-height: 44px;
}

.reader-card.locked .reader-button {
  background: var(--teal);
}

.reader-code-panel {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(100, 182, 165, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(100, 182, 165, 0.12), rgba(217, 183, 96, 0.08)),
    rgba(16, 20, 18, 0.74);
}

.reader-code-panel label {
  display: grid;
  gap: 4px;
}

.reader-code-panel label span {
  color: var(--text);
  font-weight: 900;
}

.reader-code-panel label small,
.reader-code-status {
  color: var(--muted);
  line-height: 1.45;
}

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

.reader-code-row input {
  min-height: 44px;
  border-color: rgba(100, 182, 165, 0.36);
}

.reader-code-row button {
  min-width: 108px;
}

.reader-code-status {
  min-height: 1.35em;
  margin: 0;
  font-size: 0.88rem;
}

.reader-code-status[data-mode="online"] {
  color: var(--teal);
}

.reader-code-status[data-mode="offline"] {
  color: #f3a6a6;
}

.reader-profile-panel {
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid rgba(217, 183, 96, 0.32);
  border-radius: 8px;
  background:
    linear-gradient(150deg, rgba(34, 40, 36, 0.94), rgba(16, 20, 18, 0.96)),
    radial-gradient(circle at 88% 0, rgba(100, 182, 165, 0.13), transparent 36%);
}

.reader-profile-panel[hidden] {
  display: none;
}

.reader-profile-layout {
  display: grid;
  grid-template-columns: minmax(168px, 240px) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  padding: 16px;
}

.reader-profile-portrait {
  overflow: hidden;
  border: 1px solid rgba(217, 183, 96, 0.48);
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.74);
}

.reader-profile-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}

.reader-profile-copy {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.reader-profile-heading {
  display: grid;
  gap: 4px;
}

.reader-profile-heading span,
.reader-profile-meta span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.reader-profile-heading h3 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.24;
}

.reader-profile-heading small {
  width: fit-content;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid rgba(217, 183, 96, 0.42);
  border-radius: 999px;
  color: var(--gold);
  font-size: 0.76rem;
}

.reader-profile-copy p {
  margin: 0;
  color: rgba(244, 240, 232, 0.72);
  line-height: 1.65;
}

.reader-profile-copy blockquote {
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid rgba(100, 182, 165, 0.8);
  border-radius: 6px;
  color: #fff6de;
  background: rgba(100, 182, 165, 0.09);
  line-height: 1.62;
}

.reader-profile-voice {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(100, 182, 165, 0.2);
  border-radius: 8px;
  background: rgba(100, 182, 165, 0.07);
}

.reader-profile-voice span {
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.reader-profile-voice p {
  color: rgba(244, 240, 232, 0.78);
}

.reader-profile-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.reader-profile-meta > div {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.45);
}

.reader-profile-meta strong {
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.4;
}

.reader-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.reader-profile-tags em {
  padding: 4px 8px;
  border: 1px solid rgba(217, 183, 96, 0.34);
  border-radius: 999px;
  color: rgba(244, 240, 232, 0.86);
  font-size: 0.76rem;
  font-style: normal;
  line-height: 1.2;
  background: rgba(217, 183, 96, 0.08);
}

.reader-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.reader-profile-action {
  min-width: 168px;
}

.cottage-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
  gap: 14px;
  align-items: start;
  margin-top: 16px;
}

.cottage-scene {
  min-height: 620px;
  overflow: hidden;
  border: 1px solid rgba(217, 183, 96, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(55, 48, 52, 0.9) 0 38%, rgba(38, 43, 38, 0.95) 38% 100%),
    linear-gradient(90deg, rgba(217, 183, 96, 0.12), rgba(100, 182, 165, 0.1));
  box-shadow: inset 0 -120px 120px rgba(0, 0, 0, 0.24), 0 18px 42px rgba(0, 0, 0, 0.26);
}

.cottage-room {
  position: relative;
  min-height: 620px;
  padding: 24px;
}

.cottage-room::before {
  content: "";
  position: absolute;
  inset: auto 8% 0;
  height: 42%;
  background:
    repeating-linear-gradient(90deg, rgba(217, 183, 96, 0.09) 0 1px, transparent 1px 82px),
    linear-gradient(180deg, rgba(16, 20, 18, 0.06), rgba(16, 20, 18, 0.58));
  transform: perspective(460px) rotateX(58deg);
  transform-origin: bottom;
}

.cottage-reader-stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  min-height: 160px;
  align-items: flex-end;
  justify-content: center;
  margin-top: 18px;
}

.cottage-reader-avatar {
  width: min(29%, 132px);
  min-width: 86px;
  margin: 0;
  text-align: center;
  cursor: pointer;
  transition:
    filter 160ms ease,
    transform 160ms ease;
}

.cottage-reader-avatar:hover,
.cottage-reader-avatar:focus-visible {
  filter: brightness(1.08);
  outline: none;
  transform: translateY(-4px);
}

.cottage-reader-avatar img {
  width: 100%;
  aspect-ratio: 3 / 4;
  display: block;
  object-fit: cover;
  border: 1px solid rgba(217, 183, 96, 0.52);
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.82);
}

.cottage-reader-avatar figcaption {
  display: grid;
  gap: 2px;
  margin-top: 6px;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 800;
}

.cottage-reader-avatar figcaption small {
  color: rgba(244, 240, 232, 0.62);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.25;
}

.cottage-reader-note {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 6px;
  max-width: 560px;
  margin: 12px auto 0;
  padding: 12px 14px;
  border: 1px solid rgba(100, 182, 165, 0.24);
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.58);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.cottage-reader-note.active {
  border-color: rgba(217, 183, 96, 0.44);
  background:
    linear-gradient(90deg, rgba(217, 183, 96, 0.1), rgba(100, 182, 165, 0.08)),
    rgba(16, 20, 18, 0.7);
}

.cottage-reader-note span {
  color: var(--teal);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.cottage-reader-note p {
  margin: 0;
  color: rgba(244, 240, 232, 0.76);
  line-height: 1.58;
}

.cottage-reader-note strong {
  color: var(--gold);
  font-size: 0.82rem;
}

.cottage-slot-map {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, minmax(88px, 1fr));
  gap: 12px;
  min-height: 360px;
  margin-top: 18px;
}

.cottage-slot {
  display: grid;
  align-content: center;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px dashed rgba(244, 240, 232, 0.24);
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.42);
}

.cottage-slot.filled {
  border-style: solid;
  background: rgba(34, 40, 36, 0.88);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
}

.cottage-slot span {
  color: var(--muted);
  font-size: 0.76rem;
}

.cottage-slot strong {
  color: var(--text);
  line-height: 1.25;
}

.cottage-slot button {
  width: fit-content;
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid rgba(217, 183, 96, 0.34);
  border-radius: 999px;
  background: rgba(16, 20, 18, 0.56);
  color: var(--gold);
  font-size: 0.74rem;
}

.slot-wall {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.slot-window {
  grid-column: 5 / 7;
  grid-row: 1 / 3;
}

.slot-table {
  grid-column: 2 / 6;
  grid-row: 2 / 4;
}

.slot-center {
  grid-column: 3 / 5;
  grid-row: 4;
}

.slot-door {
  grid-column: 1 / 3;
  grid-row: 3 / 5;
}

.decor-clarity {
  border-color: rgba(244, 212, 120, 0.62);
}

.decor-tide {
  border-color: rgba(100, 182, 165, 0.68);
}

.decor-grounding {
  border-color: rgba(141, 169, 118, 0.68);
}

.decor-cross {
  border-color: rgba(205, 171, 255, 0.62);
}

.cottage-panel {
  display: grid;
  gap: 14px;
}

.cottage-panel > div {
  border: 1px solid rgba(217, 183, 96, 0.24);
  border-radius: 8px;
  padding: 12px;
  background: rgba(34, 40, 36, 0.74);
}

.cottage-panel h3 {
  margin: 0 0 10px;
  font-size: 0.95rem;
}

.cottage-decor-list,
.cottage-reader-list {
  display: grid;
  gap: 10px;
}

.cottage-decor-card,
.cottage-reader-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(244, 240, 232, 0.14);
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.42);
}

.cottage-decor-card.locked {
  opacity: 0.68;
}

.cottage-decor-card.placed,
.cottage-reader-toggle.visible {
  background: rgba(100, 182, 165, 0.12);
}

.cottage-decor-symbol {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(217, 183, 96, 0.38);
  border-radius: 50%;
  color: var(--gold);
  font-weight: 900;
}

.cottage-decor-card h3,
.cottage-reader-toggle h3 {
  margin: 0;
  font-size: 0.92rem;
}

.cottage-decor-card p,
.cottage-reader-toggle p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.cottage-reader-toggle small {
  display: block;
  margin-top: 4px;
  color: rgba(244, 240, 232, 0.62);
  font-size: 0.72rem;
  line-height: 1.42;
}

.cottage-reader-toggle img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border: 1px solid rgba(217, 183, 96, 0.42);
  border-radius: 8px;
}

.cottage-place-button,
.cottage-reader-toggle button {
  min-width: 104px;
}

.cottage-adventure-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cottage-adventure-tags span {
  padding: 5px 9px;
  border: 1px solid rgba(100, 182, 165, 0.42);
  border-radius: 999px;
  color: var(--teal);
  font-size: 0.78rem;
  font-weight: 800;
}

.cottage-adventure-card {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(244, 240, 232, 0.12);
}

.cottage-adventure-copy {
  display: grid;
  gap: 6px;
}

.cottage-adventure-copy p {
  margin: 0;
  color: var(--teal);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.cottage-adventure-copy h3 {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.35;
}

.cottage-adventure-copy > span {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

.cottage-adventure-tags.compact {
  margin-top: 2px;
}

.cottage-adventure-start {
  width: 100%;
  min-height: 44px;
}

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

.adventure-choice-button {
  display: grid;
  width: 100%;
  min-height: 62px;
  justify-items: start;
  gap: 5px;
  text-align: left;
  white-space: normal;
}

.adventure-choice-button strong {
  font-size: 0.9rem;
  line-height: 1.3;
}

.adventure-choice-button span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.adventure-outcome {
  display: grid;
  gap: 6px;
  padding: 10px;
  border-left: 3px solid var(--teal);
  border-radius: 6px;
  background: rgba(100, 182, 165, 0.1);
}

.adventure-outcome strong {
  font-size: 0.92rem;
}

.adventure-outcome p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.adventure-reward-line {
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 900;
}

.achievement-list,
.shop-list,
.workshop-grid {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

body[data-payment-provider="apple_iap_pending"] .shop-list,
body[data-payment-provider="google_play_pending"] .shop-list {
  display: none;
}

.achievement-item,
.product-card,
.workshop-recipe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
}

.achievement-item.done {
  border-color: rgba(100, 182, 165, 0.75);
}

.achievement-badge {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
}

.achievement-copy {
  flex: 1;
}

.achievement-copy p,
.product-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.achievement-copy small {
  display: inline-block;
  margin-top: 6px;
  color: var(--gold);
  font-weight: 800;
}

.product-card.featured {
  border-color: rgba(217, 183, 96, 0.88);
}

.shop-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(217, 183, 96, 0.2);
  border-radius: 8px;
  color: rgba(244, 240, 232, 0.72);
  background: rgba(16, 20, 18, 0.48);
  line-height: 1.5;
}

.shop-channel-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(100, 182, 165, 0.24);
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.5);
}

.shop-channel-panel.attention {
  border-color: rgba(217, 183, 96, 0.72);
  box-shadow: 0 0 0 3px rgba(217, 183, 96, 0.1);
}

.shop-channel-panel.app-unavailable,
.shop-channel-panel.line-unavailable,
.shop-channel-panel.web-unavailable {
  border-color: rgba(215, 124, 115, 0.34);
  background: linear-gradient(135deg, rgba(215, 124, 115, 0.1), rgba(16, 20, 18, 0.52));
}

.shop-channel-panel.telegram {
  border-color: rgba(100, 182, 165, 0.4);
}

.shop-channel-panel.account-link {
  border-color: rgba(217, 183, 96, 0.52);
  background: rgba(29, 28, 20, 0.72);
}

.shop-channel-panel.guest-account-required {
  border-color: rgba(100, 182, 165, 0.46);
  background: rgba(17, 31, 27, 0.72);
}

.shop-channel-panel.guest-account-required small {
  display: block;
  margin-top: 5px;
  color: rgba(244, 240, 232, 0.62);
  line-height: 1.45;
}

.shop-channel-panel span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.shop-channel-panel strong {
  display: block;
  margin-top: 3px;
  color: var(--text);
  font-size: 0.98rem;
}

.shop-channel-panel p {
  margin: 4px 0 0;
  color: rgba(244, 240, 232, 0.68);
  line-height: 1.5;
}

.shop-channel-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.shop-channel-actions button,
.shop-channel-actions a {
  min-height: 38px;
  white-space: nowrap;
}

.shop-topup-intent {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(217, 183, 96, 0.4);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(217, 183, 96, 0.12), rgba(100, 182, 165, 0.08));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
}

.shop-topup-intent[hidden] {
  display: none;
}

.shop-topup-copy span {
  display: block;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 900;
}

.shop-topup-copy strong {
  display: block;
  margin-top: 3px;
  color: var(--text);
  font-size: 1rem;
}

.shop-topup-copy p,
.shop-topup-copy small {
  display: block;
  margin: 4px 0 0;
  color: rgba(244, 240, 232, 0.72);
  line-height: 1.5;
}

.shop-topup-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.shop-topup-reading-context {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
  gap: 10px;
  align-items: stretch;
  padding: 10px;
  border: 1px solid rgba(244, 240, 232, 0.12);
  border-radius: 8px;
  background: rgba(8, 14, 13, 0.42);
}

.shop-topup-reading-question span {
  display: block;
  color: var(--mint);
  font-size: 0.72rem;
  font-weight: 900;
}

.shop-topup-reading-question strong {
  display: block;
  margin-top: 3px;
  color: var(--text);
  font-size: 0.92rem;
}

.shop-topup-reading-question p,
.shop-topup-reading-question small {
  display: block;
  margin: 5px 0 0;
  color: rgba(244, 240, 232, 0.72);
  line-height: 1.48;
}

.shop-topup-reading-question p {
  font-weight: 700;
}

.shop-topup-reading-context-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.shop-topup-reading-context-grid span {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(217, 183, 96, 0.18);
  border-radius: 8px;
  background: rgba(217, 183, 96, 0.08);
}

.shop-topup-reading-context-grid small,
.shop-topup-reading-context-grid b {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-topup-reading-context-grid small {
  color: rgba(244, 240, 232, 0.56);
  font-size: 0.68rem;
  font-weight: 800;
}

.shop-topup-reading-context-grid b {
  margin-top: 3px;
  color: var(--text);
  font-size: 0.8rem;
}

.shop-topup-handoff-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 9px 10px;
  border: 1px solid rgba(244, 240, 232, 0.12);
  border-radius: 8px;
  background: rgba(244, 240, 232, 0.06);
  color: rgba(244, 240, 232, 0.68);
  font-size: 0.75rem;
  line-height: 1.45;
}

.shop-topup-handoff-summary {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 11px;
  border: 1px solid rgba(100, 182, 165, 0.26);
  border-radius: 8px;
  background: rgba(100, 182, 165, 0.1);
}

.shop-topup-handoff-summary strong,
.shop-topup-handoff-summary p {
  display: block;
  margin: 0;
}

.shop-topup-handoff-summary strong {
  color: var(--text);
  font-size: 0.82rem;
}

.shop-topup-handoff-summary p {
  margin-top: 4px;
  color: rgba(244, 240, 232, 0.68);
  font-size: 0.75rem;
  line-height: 1.45;
}

.shop-topup-handoff-summary button {
  min-height: 38px;
  white-space: nowrap;
}

.shop-topup-handoff-steps {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  padding: 10px 11px;
  border-left: 3px solid rgba(100, 182, 165, 0.68);
  background: rgba(100, 182, 165, 0.08);
  color: rgba(244, 240, 232, 0.76);
  font-size: 0.76rem;
  line-height: 1.48;
}

.shop-topup-handoff-steps strong {
  color: var(--text);
  font-size: 0.78rem;
}

.shop-topup-handoff-steps ol {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 1.2rem;
}

.shop-topup-handoff-steps li {
  padding-left: 2px;
}

.shop-purchase-return {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(100, 182, 165, 0.32);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(100, 182, 165, 0.12), rgba(217, 183, 96, 0.08));
}

.shop-purchase-return[hidden] {
  display: none;
}

.shop-purchase-return[data-purchase-return-state="ready"] {
  border-color: rgba(100, 182, 165, 0.58);
  box-shadow: 0 14px 34px rgba(100, 182, 165, 0.1);
}

.shop-purchase-return-copy span,
.shop-purchase-return-copy strong,
.shop-purchase-return-copy p {
  display: block;
  margin: 0;
}

.shop-purchase-return-copy span {
  color: var(--mint);
  font-size: 0.72rem;
  font-weight: 900;
}

.shop-purchase-return-copy strong {
  margin-top: 3px;
  color: var(--text);
  font-size: 1rem;
}

.shop-purchase-return-copy p {
  margin-top: 5px;
  color: rgba(244, 240, 232, 0.72);
  line-height: 1.5;
}

.shop-purchase-return-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.shop-purchase-return-grid span {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(244, 240, 232, 0.12);
  border-radius: 8px;
  background: rgba(8, 14, 13, 0.42);
}

.shop-purchase-return-grid small,
.shop-purchase-return-grid b {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-purchase-return-grid small {
  color: rgba(244, 240, 232, 0.56);
  font-size: 0.68rem;
  font-weight: 800;
}

.shop-purchase-return-grid b {
  margin-top: 3px;
  color: var(--text);
  font-size: 0.8rem;
}

.shop-purchase-return-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.shop-purchase-return-actions button {
  min-height: 38px;
  white-space: nowrap;
}

.shop-topup-actions button,
.shop-topup-actions a {
  min-height: 38px;
  white-space: nowrap;
}

.shop-telegram-handoff {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.product-button {
  flex: 0 0 auto;
  background: var(--teal);
  color: var(--ink);
}

.product-button.unavailable {
  border-color: rgba(244, 240, 232, 0.16);
  color: rgba(244, 240, 232, 0.62);
  background: rgba(244, 240, 232, 0.08);
}

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

.settings-card {
  display: grid;
  gap: 8px;
  min-height: 190px;
  padding: 14px;
  border: 1px solid rgba(217, 183, 96, 0.24);
  border-radius: 8px;
  background: rgba(24, 32, 29, 0.72);
}

.settings-profile-card {
  border-color: rgba(100, 182, 165, 0.32);
  background: linear-gradient(145deg, rgba(100, 182, 165, 0.1), rgba(24, 32, 29, 0.76));
}

.settings-card span {
  color: var(--gold);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.settings-card strong {
  color: var(--text);
  line-height: 1.35;
}

.settings-card p,
.settings-card small {
  margin: 0;
  color: rgba(244, 240, 232, 0.7);
  line-height: 1.55;
}

.settings-actions {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.settings-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  text-decoration: none;
}

.workshop-balances {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.element-balance {
  min-height: 74px;
  padding: 12px;
  border: 1px solid rgba(217, 183, 96, 0.3);
  border-radius: 8px;
  background: rgba(34, 40, 36, 0.7);
}

.element-balance span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}

.element-balance strong {
  display: block;
  margin-top: 8px;
  color: var(--text);
  font-size: 1.32rem;
}

.element-fire {
  border-color: rgba(215, 124, 115, 0.5);
}

.element-water {
  border-color: rgba(100, 182, 165, 0.52);
}

.element-air {
  border-color: rgba(244, 240, 232, 0.38);
}

.element-earth {
  border-color: rgba(217, 183, 96, 0.5);
}

.element-spirit {
  border-color: rgba(205, 171, 255, 0.48);
}

.workshop-recipe {
  align-items: stretch;
}

.workshop-recipe.locked {
  opacity: 0.82;
}

.workshop-recipe-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.workshop-recipe-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.workshop-recipe-heading h3 {
  margin: 0;
}

.workshop-recipe-heading span {
  flex: 0 0 auto;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 800;
}

.workshop-recipe p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.workshop-requirements {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.workshop-requirements span {
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.76rem;
}

.workshop-requirements span.ready {
  color: var(--teal);
  border-color: rgba(100, 182, 165, 0.54);
}

.workshop-craft-button {
  min-width: 116px;
  align-self: center;
}

.reading-panel {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

#reading-view > .section-heading {
  margin-bottom: 4px;
}

#reading-view > .section-note {
  display: none;
}

.reading-panel > * {
  min-width: 0;
  max-width: 100%;
}

.reading-reader-strip,
.reading-core-flow,
.reading-form,
.reading-pick-stage,
.reading-history,
.reading-empty,
.reading-result {
  border: 1px solid rgba(217, 183, 96, 0.28);
  border-radius: 8px;
  width: 100%;
  min-width: 0;
  background:
    linear-gradient(160deg, rgba(34, 40, 36, 0.92), rgba(16, 20, 18, 0.96)),
    radial-gradient(circle at 84% 0, rgba(100, 182, 165, 0.16), transparent 34%);
}

.reading-reader-strip {
  position: relative;
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 236px;
  overflow: hidden;
  padding: 18px;
}

.reading-reader-strip::before {
  position: absolute;
  inset: -30% auto auto -8%;
  width: 270px;
  height: 270px;
  content: "";
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(217, 183, 96, 0.24), transparent 58%),
    radial-gradient(circle at 40% 35%, rgba(100, 182, 165, 0.18), transparent 48%);
  pointer-events: none;
}

.reading-reader-portrait-frame {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 1px solid rgba(217, 183, 96, 0.56);
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.8);
  box-shadow:
    0 20px 42px rgba(0, 0, 0, 0.34),
    0 0 26px rgba(217, 183, 96, 0.14);
}

.reading-reader-portrait-frame::after {
  position: absolute;
  inset: 10px;
  content: "";
  border: 1px solid rgba(244, 240, 232, 0.16);
  border-radius: 6px;
  pointer-events: none;
}

.reading-reader-strip img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transform: scale(1.02);
}

.reading-reader-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.reading-reader-strip span,
.reading-field span,
.reading-options span,
.reading-hint,
.reading-status {
  color: var(--muted);
  font-size: 0.86rem;
}

.reading-reader-strip strong {
  display: block;
  color: var(--text);
  font-size: 1.28rem;
  line-height: 1.25;
}

.reading-reader-copy p {
  max-width: 44rem;
  margin: 0;
  color: rgba(244, 240, 232, 0.72);
  line-height: 1.65;
}

.reading-reader-copy blockquote {
  max-width: 48rem;
  margin: 4px 0 0;
  padding: 12px 14px;
  border-left: 3px solid rgba(100, 182, 165, 0.8);
  border-radius: 6px;
  color: #fff6de;
  background: rgba(100, 182, 165, 0.1);
  line-height: 1.68;
}

.reading-core-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  background:
    linear-gradient(160deg, rgba(16, 20, 18, 0.72), rgba(34, 40, 36, 0.56)),
    rgba(16, 20, 18, 0.48);
}

.reading-core-flow article {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 54px;
  padding: 8px;
  border: 1px solid rgba(244, 240, 232, 0.08);
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.36);
}

.reading-core-flow article.active {
  border-color: rgba(217, 183, 96, 0.62);
  background: rgba(217, 183, 96, 0.1);
}

.reading-core-flow article.complete {
  border-color: rgba(100, 182, 165, 0.42);
  background: rgba(100, 182, 165, 0.08);
}

.reading-core-flow article.upcoming {
  opacity: 0.72;
}

.reading-core-flow span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(217, 183, 96, 0.42);
  border-radius: 50%;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 900;
}

.reading-core-flow article.complete span {
  color: var(--ink);
  border-color: rgba(100, 182, 165, 0.68);
  background: var(--teal);
}

.reading-core-flow strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-core-flow small {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-reader-strip[data-reader] {
  --reader-accent: var(--gold);
  --reader-glow: rgba(217, 183, 96, 0.2);
  --reading-reader-position: center 22%;
  --reading-reader-mobile-position: var(--reading-reader-position);
  --reading-reader-scale: 1.012;
  --reading-reader-motion-scale: var(--reading-reader-scale);
  --reading-reader-mobile-scale: 1;
  --reading-reader-mobile-ratio: 4 / 5;
  --reader-look-x: 0;
  --reader-look-y: 0;
  --reader-left-eye-x: 47.5%;
  --reader-left-eye-y: var(--reader-eye-y);
  --reader-right-eye-x: 53.5%;
  --reader-right-eye-y: var(--reader-eye-y);
  --reader-eye-y: 29%;
  --reader-eye-width: 4.8%;
  --reader-eye-height: 2.2%;
  --reader-eye-tilt: -2deg;
  --reader-blink-duration: 8.4s;
  --reader-blink-delay: 1.2s;
  grid-template-columns: minmax(0, 1fr);
  min-height: clamp(640px, calc(100svh - 128px), 860px);
  align-items: end;
  isolation: isolate;
  padding: clamp(16px, 3vw, 28px);
  background:
    linear-gradient(110deg, rgba(16, 20, 18, 0), rgba(16, 20, 18, 0.16) 90%),
    linear-gradient(145deg, var(--reader-glow), rgba(34, 40, 36, 0.92));
}

.reading-reader-strip[data-reader="gentle"] {
  --reading-reader-position: center 22%;
  --reading-reader-mobile-position: center 22%;
  --reading-reader-mobile-scale: 1;
  --reader-left-eye-x: 49.5%;
  --reader-right-eye-x: 56%;
  --reader-eye-y: 30%;
  --reader-blink-delay: 0.9s;
}

.reading-reader-strip[data-reader="vivyy"] {
  --reading-reader-position: center 22%;
  --reading-reader-mobile-position: center 22%;
  --reading-reader-mobile-scale: 1;
  --reader-left-eye-x: 50.5%;
  --reader-right-eye-x: 56.5%;
  --reader-eye-y: 29.5%;
  --reader-blink-delay: 2.1s;
}

.reading-reader-strip[data-reader="summer"] {
  --reading-reader-position: 54% 20%;
  --reading-reader-mobile-position: 54% 20%;
  --reading-reader-mobile-scale: 1;
  --reader-left-eye-x: 53%;
  --reader-right-eye-x: 59.5%;
  --reader-eye-y: 31%;
  --reader-eye-tilt: -4deg;
  --reader-blink-duration: 7.6s;
}

.reading-reader-strip[data-reader="bell"] {
  --reading-reader-position: 57% 20%;
  --reading-reader-mobile-position: 57% 20%;
  --reading-reader-mobile-scale: 1;
  --reader-left-eye-x: 54%;
  --reader-right-eye-x: 60.5%;
  --reader-eye-y: 29.5%;
  --reader-eye-tilt: 1deg;
  --reader-blink-duration: 9s;
}

.reading-reader-strip[data-reader="zoe"] {
  --reading-reader-position: 62% 20%;
  --reading-reader-mobile-position: 62% 20%;
  --reading-reader-mobile-scale: 1;
  --reader-left-eye-x: 53.5%;
  --reader-right-eye-x: 61%;
  --reader-eye-y: 30%;
  --reader-eye-width: 4.1%;
  --reader-eye-height: 1.6%;
  --reader-eye-tilt: 1deg;
  --reader-blink-duration: 8.2s;
  --reader-blink-delay: 1.6s;
}

.reading-reader-strip[data-reader="sunshine"] {
  --reading-reader-position: 60% 20%;
  --reading-reader-mobile-position: 60% 20%;
  --reading-reader-mobile-scale: 1;
  --reader-left-eye-x: 53.8%;
  --reader-right-eye-x: 60.8%;
  --reader-eye-y: 29.2%;
  --reader-eye-width: 3.9%;
  --reader-eye-height: 1.4%;
  --reader-eye-tilt: 1deg;
  --reader-blink-duration: 8.4s;
  --reader-blink-delay: 1.2s;
}

.reading-reader-strip[data-reader]::before {
  inset: 0;
  z-index: 1;
  width: auto;
  height: auto;
  background:
    radial-gradient(circle at 52% 30%, transparent 0 34%, rgba(6, 8, 10, 0.14) 58%, rgba(6, 8, 10, 0.6) 100%),
    linear-gradient(90deg, rgba(5, 7, 9, 0.5), rgba(5, 7, 9, 0.06) 54%, rgba(5, 7, 9, 0.44)),
    linear-gradient(180deg, rgba(5, 7, 9, 0.04), rgba(5, 7, 9, 0.68));
  border-radius: 0;
  opacity: 1;
}

.reading-reader-strip[data-reader] .reading-reader-portrait-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 0;
  border-radius: 0;
  background: #080a0b;
  box-shadow: none;
}

.reading-reader-strip[data-reader] .reading-reader-portrait-frame::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background:
    radial-gradient(circle at 50% 30%, var(--reader-glow), transparent 34%),
    linear-gradient(180deg, rgba(5, 7, 9, 0), rgba(5, 7, 9, 0.04) 72%, rgba(5, 7, 9, 0.32));
  opacity: 0.78;
  animation: readingReaderLightPulse 6.8s ease-in-out infinite;
  pointer-events: none;
}

.reading-reader-strip[data-reader] .reading-reader-portrait-frame::after {
  z-index: 2;
  inset: 11% 12% auto auto;
  width: 35%;
  height: 44%;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--reader-accent) 24%, transparent), transparent 62%),
    radial-gradient(circle at 30% 28%, rgba(244, 240, 232, 0.12), transparent 38%);
  opacity: 0.5;
  filter: blur(16px);
  transform: none;
  animation: readerHaloDrift 11s ease-in-out infinite;
}

.reading-reader-strip[data-reader] .reading-reader-portrait-frame > img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: var(--reading-reader-position, center 22%);
  filter: saturate(1.08) contrast(1.03) brightness(1.08);
  transform: scale(var(--reading-reader-scale, 1.012));
  animation: readingReaderIdleBreath 8.2s ease-in-out infinite;
  will-change: transform, filter;
}

.tarot-focus-panel[data-home-boot="true"] .tarot-sanctuary-reader::before,
.tarot-focus-panel[data-home-boot="true"] .tarot-sanctuary-reader::after,
.tarot-focus-panel[data-home-boot="true"] .tarot-sanctuary-reader img {
  animation: none;
}

.tarot-focus-panel[data-home-boot="true"] .tarot-sanctuary-reader {
  z-index: 2;
}

.tarot-focus-panel[data-home-boot="true"]::before,
.tarot-focus-panel[data-home-boot="true"]::after {
  display: none;
}

.reading-reader-strip[data-reader] .reading-reader-portrait-frame > .reading-reader-blink-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  animation:
    readingReaderIdleBreath 8.2s ease-in-out infinite,
    readerClosedBlink var(--reader-blink-duration) ease-in-out infinite;
  animation-delay: 0s, var(--reader-blink-delay);
  will-change: opacity, transform;
}

.reading-reader-strip[data-reader] .reading-reader-portrait-frame > .reading-reader-blink-image[hidden] {
  display: none;
}

.reading-reader-ambient {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse at 50% 38%, rgba(0, 0, 0, 0.18) 0 24%, rgba(0, 0, 0, 0.62) 45%, #000 74%);
  mask-image: radial-gradient(ellipse at 50% 38%, rgba(0, 0, 0, 0.18) 0 24%, rgba(0, 0, 0, 0.62) 45%, #000 74%);
  pointer-events: none;
}

.reading-reader-ambient.motes {
  z-index: 2;
}

.reading-reader-strip[data-ambient-theme="candles"] .reading-reader-ambient.back {
  background:
    radial-gradient(circle at 86% 70%, rgba(255, 188, 86, 0.28), transparent 20%),
    radial-gradient(circle at 74% 84%, rgba(217, 183, 96, 0.18), transparent 24%),
    radial-gradient(circle at 18% 20%, rgba(255, 210, 124, 0.12), transparent 22%);
  opacity: 0.74;
  animation: ambientCandleGlow 7.8s ease-in-out infinite;
}

.reading-reader-strip[data-ambient-theme="candles"] .reading-reader-ambient.motes {
  background:
    radial-gradient(circle, rgba(255, 223, 158, 0.72) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(217, 183, 96, 0.34) 0 1px, transparent 2px);
  background-position: 0 40px, 58px 156px;
  background-size: 150px 210px, 190px 260px;
  opacity: 0.22;
  animation: ambientFloatUp 18s linear infinite;
}

.reading-reader-strip[data-ambient-theme="mist"] .reading-reader-ambient.back {
  background:
    radial-gradient(ellipse at 18% 26%, rgba(100, 182, 165, 0.18), transparent 34%),
    radial-gradient(ellipse at 90% 74%, rgba(244, 240, 232, 0.08), transparent 32%),
    linear-gradient(115deg, transparent 0 24%, rgba(100, 182, 165, 0.07) 44%, transparent 68%);
  opacity: 0.72;
  filter: blur(2px);
  animation: ambientMistDrift 24s ease-in-out infinite;
}

.reading-reader-strip[data-ambient-theme="mist"] .reading-reader-ambient.motes {
  background:
    linear-gradient(105deg, transparent 0 18%, rgba(244, 240, 232, 0.05) 38%, transparent 58%),
    linear-gradient(78deg, transparent 0 28%, rgba(100, 182, 165, 0.06) 52%, transparent 74%);
  background-size: 140% 100%, 160% 100%;
  opacity: 0.42;
  animation: ambientMistVeil 30s linear infinite;
}

.reading-reader-strip[data-ambient-theme="crystal"] .reading-reader-ambient.back {
  background:
    radial-gradient(circle at 14% 80%, rgba(182, 231, 255, 0.16), transparent 17%),
    radial-gradient(circle at 82% 20%, rgba(217, 183, 96, 0.16), transparent 16%),
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.06), transparent 28%);
  opacity: 0.68;
  animation: ambientCrystalPulse 9s ease-in-out infinite;
}

.reading-reader-strip[data-ambient-theme="crystal"] .reading-reader-ambient.motes {
  background:
    radial-gradient(circle, rgba(244, 240, 232, 0.86) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(100, 182, 165, 0.5) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(217, 183, 96, 0.62) 0 1px, transparent 2px);
  background-position: 18px 24px, 82px 110px, 132px 44px;
  background-size: 170px 180px, 220px 260px, 260px 210px;
  opacity: 0.24;
  animation: ambientCrystalTwinkle 11s steps(2, end) infinite;
}

.reading-reader-blink {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  border-radius: inherit;
  transform-origin: center;
  animation: readingReaderIdleBreath 8.2s ease-in-out infinite;
  will-change: transform;
  pointer-events: none;
}

.reading-reader-strip[data-blink-frame="true"] .reading-reader-blink {
  display: none;
}

.reading-reader-eye {
  position: absolute;
  top: var(--reader-eye-y);
  width: var(--reader-eye-width);
  height: var(--reader-eye-height);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--reader-eye-tilt)) scaleY(0.18);
  transform-origin: center;
  mix-blend-mode: multiply;
  animation: readerBlinkSprite var(--reader-blink-duration) ease-in-out infinite;
  animation-delay: var(--reader-blink-delay);
}

.reading-reader-eye.left {
  left: var(--reader-left-eye-x);
  top: var(--reader-left-eye-y, var(--reader-eye-y));
}

.reading-reader-eye.right {
  left: var(--reader-right-eye-x);
  top: var(--reader-right-eye-y, var(--reader-eye-y));
}

.reading-reader-eye::before,
.reading-reader-eye::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.reading-reader-eye::before {
  inset: 10% -6% 6%;
  border-radius: 50% 50% 46% 46%;
  clip-path: ellipse(49% 36% at 50% 54%);
  background:
    radial-gradient(ellipse at 50% 8%, rgba(255, 235, 205, 0.24), transparent 48%),
    linear-gradient(180deg, rgba(96, 59, 45, 0.42), rgba(22, 12, 11, 0.76) 54%, rgba(76, 44, 34, 0.34));
  box-shadow:
    inset 0 1px 1px rgba(255, 236, 205, 0.18),
    inset 0 -1px 2px rgba(6, 5, 5, 0.42),
    0 0 4px rgba(0, 0, 0, 0.28);
  filter: blur(0.18px);
}

.reading-reader-eye::after {
  left: 5%;
  right: 5%;
  top: 50%;
  height: 16%;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgba(10, 7, 7, 0.82) 16% 84%, transparent),
    color-mix(in srgb, var(--reader-accent) 10%, rgba(9, 7, 7, 0.72));
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.5),
    0 -1px 1px rgba(255, 236, 205, 0.12);
}

.reading-reader-strip[data-reader].reader-motion-active .reading-reader-portrait-frame > img {
  filter: saturate(1.12) contrast(1.04) brightness(1.12);
}

.reading-reader-strip[data-reader][data-ritual-state="picking"] .reading-reader-portrait-frame::before,
.reading-reader-strip[data-reader][data-ritual-state="drawing"] .reading-reader-portrait-frame::before {
  animation-duration: 5.8s;
}

.reading-reader-strip[data-reader][data-ritual-state="drawing"] .reading-reader-portrait-frame > img {
  animation: readerRitualBreath 5.8s ease-in-out infinite;
  filter: saturate(1.14) contrast(1.04) brightness(1.14);
}

.reading-reader-strip[data-reader][data-ritual-state="drawing"] .reading-reader-portrait-frame > .reading-reader-blink-image {
  animation:
    readerRitualBreath 5.8s ease-in-out infinite,
    readerClosedBlink var(--reader-blink-duration) ease-in-out infinite;
  animation-delay: 0s, var(--reader-blink-delay);
}

.reading-reader-strip[data-reader][data-ritual-state="drawing"] .reading-reader-blink {
  animation: readerRitualBreath 5.8s ease-in-out infinite;
}

body[data-reader-motion="off"] .tarot-sanctuary-reader::before,
body[data-reader-motion="off"] .tarot-sanctuary-reader::after,
body[data-reader-motion="off"] .tarot-sanctuary-reader img,
body[data-reader-motion="off"] .reading-reader-strip[data-reader] .reading-reader-portrait-frame::before,
body[data-reader-motion="off"] .reading-reader-strip[data-reader] .reading-reader-portrait-frame::after,
body[data-reader-motion="off"] .reading-reader-strip[data-reader] .reading-reader-portrait-frame > img,
body[data-reader-motion="off"] .reading-reader-strip[data-reader] .reading-reader-copy::after,
body[data-reader-motion="off"] .reading-reader-presence::after,
body[data-reader-motion="off"] .reading-reader-blink,
body[data-reader-motion="off"] .reading-reader-eye,
body[data-reader-motion="off"] .reading-reader-eye::before,
body[data-reader-motion="off"] .reading-reader-eye::after,
body[data-reader-motion="off"] .reading-result-ritual-reader img,
body[data-reader-motion="off"] .reading-result.reader-speaking .reading-reader-closing {
  animation: none !important;
}

body[data-reader-motion="off"] .reading-reader-blink,
body[data-reader-motion="off"] .reading-reader-blink-image,
body[data-reader-motion="off"] .reading-reader-eye {
  display: none !important;
}

body[data-reader-motion="off"] .tarot-sanctuary-reader img,
body[data-reader-motion="off"] .reading-reader-strip[data-reader] .reading-reader-portrait-frame > img,
body[data-reader-motion="off"] .reading-result-ritual-reader img {
  transform: none !important;
}

.reading-reader-strip[data-reader] .reading-reader-copy {
  position: relative;
  z-index: 2;
  gap: 5px;
  max-width: min(34rem, calc(100% - 32px));
  margin-bottom: clamp(112px, 15svh, 156px);
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 30%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(10, 13, 13, 0.64), rgba(10, 13, 13, 0.22)),
    color-mix(in srgb, var(--reader-glow) 36%, transparent);
  backdrop-filter: blur(12px);
  overflow: hidden;
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease,
    background 220ms ease;
}

.reading-reader-strip[data-reader] .reading-reader-copy::after {
  position: absolute;
  right: 10px;
  bottom: 0;
  left: 10px;
  height: 2px;
  border-radius: 999px;
  content: "";
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--reader-accent) 78%, rgba(255, 248, 232, 0.78)),
    transparent
  );
  opacity: 0;
  transform: scaleX(0.34);
  transform-origin: center;
  pointer-events: none;
}

.reading-reader-strip[data-reader][data-presence-state="ready"] .reading-reader-copy,
.reading-reader-strip[data-reader][data-presence-state="picking"] .reading-reader-copy,
.reading-reader-strip[data-reader][data-presence-state="picking-progress"] .reading-reader-copy,
.reading-reader-strip[data-reader][data-presence-state="drawing"] .reading-reader-copy,
.reading-reader-strip[data-reader][data-presence-state="result"] .reading-reader-copy {
  border-color: color-mix(in srgb, var(--reader-accent) 58%, rgba(255, 248, 232, 0.16));
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.22),
    0 0 0 1px color-mix(in srgb, var(--reader-accent) 18%, transparent);
}

.reading-reader-strip[data-reader][data-presence-state="ready"] .reading-reader-copy::after,
.reading-reader-strip[data-reader][data-presence-state="picking"] .reading-reader-copy::after,
.reading-reader-strip[data-reader][data-presence-state="picking-progress"] .reading-reader-copy::after,
.reading-reader-strip[data-reader][data-presence-state="drawing"] .reading-reader-copy::after,
.reading-reader-strip[data-reader][data-presence-state="result"] .reading-reader-copy::after {
  animation: readerPresenceTrace 2.9s ease-in-out infinite;
}

.reading-reader-strip[data-reader][data-presence-state="ready"] .reading-reader-portrait-frame::before,
.reading-reader-strip[data-reader][data-presence-state="result"] .reading-reader-portrait-frame::before {
  opacity: 0.86;
  animation-duration: 5.8s;
}

.reading-reader-strip[data-reader][data-presence-state="picking"] .reading-reader-copy,
.reading-reader-strip[data-reader][data-presence-state="picking-progress"] .reading-reader-copy,
.reading-reader-strip[data-reader][data-presence-state="drawing"] .reading-reader-copy {
  transform: translateY(-2px);
}

.reading-reader-strip[data-reader] .reading-reader-copy > span {
  font-size: 0.76rem;
}

.reading-reader-strip[data-reader] .reading-reader-copy strong {
  font-size: 1.14rem;
}

.reading-reader-strip[data-reader] .reading-reader-copy > p {
  display: none;
}

.reading-reader-strip[data-reader] blockquote {
  margin-top: 0;
  padding: 8px 10px;
  border-left-color: var(--reader-accent);
  background: color-mix(in srgb, var(--reader-glow) 52%, rgba(16, 20, 18, 0.72));
  backdrop-filter: blur(12px);
  font-size: 0.9rem;
  line-height: 1.42;
}

.reading-reader-presence {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 34%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 58%, transparent), rgba(16, 20, 18, 0.58)),
    rgba(16, 20, 18, 0.34);
  overflow: hidden;
  transition:
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease;
}

.reading-reader-presence::after {
  position: absolute;
  right: 9px;
  bottom: 5px;
  left: 9px;
  height: 1px;
  border-radius: 999px;
  content: "";
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--reader-accent) 86%, rgba(255, 248, 232, 0.92)),
    transparent
  );
  opacity: 0;
  transform: scaleX(0.24);
  transform-origin: center;
  pointer-events: none;
}

.reading-reader-presence span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: color-mix(in srgb, var(--reader-accent) 76%, var(--gold));
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.2;
}

.reading-reader-presence i {
  width: 7px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--reader-accent);
  box-shadow: 0 0 12px var(--reader-glow);
  animation: readerAuraPulse 2.8s ease-in-out infinite;
}

.reading-reader-presence strong {
  color: rgba(255, 248, 232, 0.92);
  font-size: 0.8rem;
  line-height: 1.38;
}

.reading-reader-presence.ready,
.reading-reader-presence.picking,
.reading-reader-presence.picking-progress,
.reading-reader-presence.drawing,
.reading-reader-presence.result {
  border-color: color-mix(in srgb, var(--reader-accent) 58%, rgba(217, 183, 96, 0.26));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--reader-accent) 10%, transparent);
}

.reading-reader-presence.ready::after,
.reading-reader-presence.picking::after,
.reading-reader-presence.picking-progress::after,
.reading-reader-presence.drawing::after,
.reading-reader-presence.result::after {
  animation: readerPresenceTrace 2.9s ease-in-out infinite;
}

.reading-reader-presence.drawing i,
.reading-reader-presence.picking i,
.reading-reader-presence.picking-progress i {
  animation-duration: 1.5s;
}

.reading-visual-controls {
  position: absolute;
  top: clamp(12px, 2vw, 18px);
  left: clamp(12px, 2vw, 18px);
  z-index: 3;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: min(360px, calc(100% - 32px));
  gap: 6px;
  margin: 0;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 26%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background: rgba(7, 10, 10, 0.56);
  backdrop-filter: blur(10px);
}

.reading-visual-heading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.reading-visual-heading span {
  color: color-mix(in srgb, var(--reader-accent) 82%, rgba(255, 248, 232, 0.78));
  font-size: 0.7rem;
  font-weight: 900;
}

.reading-visual-heading strong {
  display: inline;
  color: rgba(255, 248, 232, 0.72);
  font-size: 0.68rem;
  line-height: 1.2;
  white-space: nowrap;
}

.reading-visual-toggle,
.reading-visual-select {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 4px 7px;
  border: 1px solid rgba(244, 240, 232, 0.12);
  border-radius: 8px;
  color: rgba(255, 248, 232, 0.84);
  background: rgba(16, 20, 18, 0.62);
}

.reading-visual-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--reader-accent);
}

.reading-visual-toggle span,
.reading-visual-select span {
  color: rgba(255, 248, 232, 0.82);
  font-size: 0.76rem;
  font-weight: 800;
}

.reading-visual-select select {
  min-height: 26px;
  max-width: 92px;
  border: 0;
  color: var(--text);
  background: transparent;
}

.reading-question-helper {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(244, 240, 232, 0.08);
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.22);
}

.reading-question-helper.starter,
.reading-question-helper.needs-rewrite {
  border-color: rgba(217, 183, 96, 0.24);
  background:
    radial-gradient(circle at 12% 0, rgba(217, 183, 96, 0.1), transparent 38%),
    rgba(16, 20, 18, 0.3);
}

.reading-question-helper.compact {
  padding: 8px;
}

.reading-question-helper-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.6fr) auto;
  gap: 10px;
  align-items: start;
}

.reading-form:not(.assist-expanded) .reading-question-helper-heading {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
}

.reading-form:not(.assist-expanded) .reading-question-helper-heading > div:first-child,
.reading-form:not(.assist-expanded) .reading-question-topic-list,
.reading-form:not(.assist-expanded) .reading-question-template-list {
  display: none;
}

.reading-form:not(.assist-expanded) .reading-question-helper.starter .reading-question-helper-heading > div:first-child,
.reading-form:not(.assist-expanded) .reading-question-helper.starter .reading-question-topic-list,
.reading-form:not(.assist-expanded) .reading-question-helper.starter .reading-question-template-list,
.reading-form:not(.assist-expanded) .reading-question-helper.needs-rewrite .reading-question-helper-heading > div:first-child,
.reading-form:not(.assist-expanded) .reading-question-helper.needs-rewrite .reading-question-topic-list,
.reading-form:not(.assist-expanded) .reading-question-helper.needs-rewrite .reading-question-template-list {
  display: flex;
}

.reading-form:not(.assist-expanded) .reading-question-helper.starter .reading-question-helper-heading > div:first-child,
.reading-form:not(.assist-expanded) .reading-question-helper.needs-rewrite .reading-question-helper-heading > div:first-child {
  display: block;
}

.reading-form:not(.assist-expanded) .reading-question-quality small {
  display: none;
}

.reading-question-helper-heading strong {
  display: block;
  color: var(--text);
  font-size: 0.92rem;
}

.reading-question-helper-heading p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.reading-question-quality {
  display: grid;
  gap: 3px;
  padding: 8px 9px;
  border: 1px solid rgba(244, 240, 232, 0.09);
  border-radius: 8px;
  background: rgba(34, 40, 36, 0.68);
}

.reading-question-quality span {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 900;
}

.reading-question-quality small {
  color: rgba(244, 240, 232, 0.66);
  font-size: 0.72rem;
  line-height: 1.35;
}

.reading-question-quality.ready {
  border-color: rgba(100, 182, 165, 0.44);
  background: rgba(100, 182, 165, 0.1);
}

.reading-question-quality.closed,
.reading-question-quality.short {
  border-color: rgba(217, 183, 96, 0.38);
  background: rgba(217, 183, 96, 0.08);
}

.reading-question-template-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.reading-question-topic-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.reading-question-helper.compact .reading-question-template-list {
  display: none;
}

.reading-question-helper.compact .reading-question-topic-list {
  display: none;
}

.reading-question-topic {
  min-height: 31px;
  padding: 6px 10px;
  border: 1px solid rgba(244, 240, 232, 0.12);
  border-radius: 999px;
  color: rgba(244, 240, 232, 0.78);
  background: rgba(16, 20, 18, 0.48);
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.2;
}

.reading-question-topic:hover,
.reading-question-topic:focus-visible,
.reading-question-topic.active {
  border-color: rgba(100, 182, 165, 0.6);
  color: #fff8e8;
  background: rgba(100, 182, 165, 0.14);
}

.reading-assist-toggle {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(217, 183, 96, 0.32);
  border-radius: 999px;
  color: var(--gold);
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.2;
  background: rgba(217, 183, 96, 0.08);
}

.reading-form:not(.assist-expanded) .reading-assist-toggle {
  align-self: stretch;
  min-width: 132px;
  border-radius: 8px;
}

.reading-assist-toggle:hover,
.reading-assist-toggle:focus-visible {
  border-color: rgba(217, 183, 96, 0.72);
  color: var(--text);
  background: rgba(217, 183, 96, 0.14);
}

.reading-question-template {
  min-height: 34px;
  max-width: 100%;
  padding: 7px 10px;
  border: 1px solid rgba(244, 240, 232, 0.12);
  border-radius: 999px;
  color: rgba(244, 240, 232, 0.86);
  font-size: 0.78rem;
  line-height: 1.25;
  text-align: left;
  background: rgba(16, 20, 18, 0.56);
}

.reading-question-template:hover,
.reading-question-template:focus-visible {
  border-color: rgba(217, 183, 96, 0.68);
  color: var(--text);
  background: rgba(217, 183, 96, 0.1);
}

.reading-spread-advisor {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(217, 183, 96, 0.22);
  border-radius: 8px;
  background: rgba(34, 40, 36, 0.42);
}

.reading-spread-advisor.compact {
  padding: 10px 12px;
}

.reading-spread-advisor-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 0.58fr);
  gap: 10px;
  align-items: start;
}

.reading-spread-advisor-heading strong {
  display: block;
  color: var(--text);
  font-size: 0.92rem;
}

.reading-spread-advisor-heading p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.reading-spread-cost {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid rgba(100, 182, 165, 0.32);
  border-radius: 8px;
  background: rgba(100, 182, 165, 0.08);
}

.reading-spread-cost.insufficient {
  border-color: rgba(217, 183, 96, 0.42);
  background: rgba(217, 183, 96, 0.08);
}

.reading-spread-cost span {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.25;
}

.reading-spread-cost small {
  color: rgba(244, 240, 232, 0.66);
  font-size: 0.72rem;
  line-height: 1.35;
}

.reading-spread-recommendation-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.reading-spread-advisor.compact .reading-spread-recommendation-list {
  display: none;
}

.reading-spread-recommendation {
  display: grid;
  grid-template-rows: auto auto minmax(36px, 1fr) auto;
  gap: 7px;
  align-content: space-between;
  min-height: 148px;
  padding: 10px;
  border: 1px solid rgba(244, 240, 232, 0.11);
  border-radius: 8px;
  color: var(--text);
  text-align: left;
  background: rgba(16, 20, 18, 0.5);
}

.reading-spread-recommendation:hover,
.reading-spread-recommendation:focus-visible,
.reading-spread-recommendation.active {
  border-color: rgba(217, 183, 96, 0.68);
  background: rgba(217, 183, 96, 0.1);
}

.reading-spread-recommendation.insufficient {
  border-color: rgba(217, 183, 96, 0.24);
}

.reading-spread-recommendation-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  min-width: 0;
}

.reading-spread-recommendation strong {
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.25;
}

.reading-spread-recommendation-badge {
  width: fit-content;
  max-width: 100%;
  padding: 3px 7px;
  border: 1px solid rgba(244, 240, 232, 0.12);
  border-radius: 999px;
  color: rgba(244, 240, 232, 0.78);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
  background: rgba(244, 240, 232, 0.06);
}

.reading-spread-recommendation-badge.free {
  border-color: rgba(100, 182, 165, 0.38);
  color: rgba(149, 224, 206, 0.95);
  background: rgba(100, 182, 165, 0.1);
}

.reading-spread-recommendation-badge.paid {
  border-color: rgba(217, 183, 96, 0.34);
  color: var(--gold);
  background: rgba(217, 183, 96, 0.1);
}

.reading-spread-recommendation.insufficient .reading-spread-recommendation-badge {
  border-color: rgba(225, 116, 116, 0.34);
  color: rgba(255, 172, 160, 0.95);
  background: rgba(225, 116, 116, 0.09);
}

.reading-spread-reason {
  color: var(--muted);
  font-size: 0.73rem;
  line-height: 1.35;
}

.reading-spread-value {
  margin: 0;
  color: rgba(244, 240, 232, 0.82);
  font-size: 0.78rem;
  line-height: 1.42;
}

.reading-spread-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.reading-spread-recommendation em {
  width: fit-content;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--gold);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.2;
  background: rgba(217, 183, 96, 0.1);
}

.reading-spread-recommendation-cta {
  width: fit-content;
  max-width: 100%;
  padding: 4px 0;
  color: rgba(244, 240, 232, 0.86);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.25;
  text-decoration: underline;
  text-decoration-color: rgba(217, 183, 96, 0.42);
  text-underline-offset: 3px;
}

.reading-spread-recommendation.active .reading-spread-recommendation-cta {
  color: var(--gold);
  text-decoration: none;
}

.reading-draw-summary {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(100, 182, 165, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(150deg, rgba(16, 20, 18, 0.72), rgba(34, 40, 36, 0.62)),
    rgba(16, 20, 18, 0.36);
}

.reading-draw-summary.needs-question,
.reading-draw-summary.insufficient {
  border-color: rgba(217, 183, 96, 0.38);
}

.reading-draw-summary-heading {
  display: grid;
  gap: 3px;
}

.reading-draw-summary-heading strong {
  color: var(--text);
  font-size: 0.92rem;
}

.reading-draw-summary-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.reading-draw-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(112px, 0.75fr));
  gap: 8px;
}

.reading-draw-summary-grid > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(244, 240, 232, 0.09);
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.42);
}

.reading-draw-summary-grid span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.reading-draw-summary-grid strong {
  overflow: hidden;
  color: var(--text);
  font-size: 0.84rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-reader-recommendation {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(100, 182, 165, 0.28);
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.36);
}

.reading-reader-recommendation[hidden] {
  display: none;
}

.reading-reader-recommendation-copy {
  display: grid;
  gap: 3px;
}

.reading-reader-recommendation-copy strong {
  color: var(--text);
  font-size: 0.92rem;
}

.reading-reader-recommendation-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.reading-reader-recommendation-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 8px;
}

.reading-reader-recommendation-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 62px;
  padding: 8px;
  border: 1px solid rgba(244, 240, 232, 0.12);
  border-radius: 8px;
  color: var(--text);
  text-align: left;
  background: rgba(16, 20, 18, 0.58);
  transition:
    border-color 160ms ease,
    background 160ms ease;
}

.reading-reader-recommendation-card:hover,
.reading-reader-recommendation-card:focus-visible,
.reading-reader-recommendation-card.active {
  border-color: rgba(217, 183, 96, 0.74);
  background: rgba(217, 183, 96, 0.1);
}

.reading-reader-recommendation-card.locked {
  border-color: rgba(100, 182, 165, 0.24);
}

.reading-reader-recommendation-card img {
  width: 42px;
  aspect-ratio: 1;
  border: 1px solid rgba(217, 183, 96, 0.34);
  border-radius: 50%;
  object-fit: cover;
}

.reading-reader-recommendation-card span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.reading-reader-recommendation-card strong {
  overflow: hidden;
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-reader-recommendation-card small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-reader-recommendation-card em {
  max-width: 7.5rem;
  color: var(--gold);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.2;
  text-align: right;
}

.reading-form {
  position: relative;
  z-index: 4;
  display: grid;
  width: min(620px, calc(100% - 72px));
  justify-self: center;
  margin-top: clamp(-22px, -2.4svh, -10px);
  gap: 8px;
  padding: 9px;
  border-color: color-mix(in srgb, var(--gold) 36%, rgba(244, 240, 232, 0.1));
  background:
    linear-gradient(155deg, rgba(22, 28, 25, 0.86), rgba(12, 15, 15, 0.9)),
    rgba(16, 20, 18, 0.76);
  box-shadow:
    0 22px 58px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(244, 240, 232, 0.05);
  backdrop-filter: blur(16px);
}

.reading-form > .reading-chat-composer,
.reading-form > .reading-message-row,
.reading-form > .reading-question-helper,
.reading-form > .reading-settings-toggle,
.reading-form > .reading-spread-advisor,
.reading-form > .reading-reader-recommendation,
.reading-form > .reading-draw-summary,
.reading-form > .reading-recovery,
.reading-form > .reading-hint,
.reading-form > .reading-status {
  grid-column: 1 / -1;
}

.reading-recovery {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(215, 124, 115, 0.4);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(215, 124, 115, 0.14), rgba(16, 20, 18, 0.72)),
    rgba(16, 20, 18, 0.7);
}

.reading-recovery[hidden] {
  display: none;
}

.reading-recovery strong {
  display: block;
  color: #ffe1d8;
  font-size: 0.86rem;
}

.reading-recovery p,
.reading-recovery small {
  margin: 4px 0 0;
  color: rgba(244, 240, 232, 0.74);
  font-size: 0.76rem;
  line-height: 1.45;
}

.reading-recovery small {
  color: rgba(244, 240, 232, 0.58);
}

.reading-recovery-message {
  display: grid;
  gap: 3px;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(5, 8, 7, 0.26);
}

.reading-recovery-message b {
  color: rgba(255, 245, 226, 0.86);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.4;
}

.reading-recovery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 9px;
}

.reading-recovery-grid span {
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(244, 240, 232, 0.05);
}

.reading-recovery-grid strong {
  overflow: hidden;
  display: block;
  margin-top: 3px;
  color: rgba(255, 245, 226, 0.9);
  font-size: 0.78rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-recovery-topup-note {
  display: block;
  color: rgba(255, 222, 151, 0.78);
}

.reading-recovery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.reading-recovery-actions button {
  min-height: 36px;
  padding: 8px 12px;
  font-size: 0.78rem;
}

.reading-recovery-actions button.telegram {
  border-color: rgba(105, 190, 255, 0.42);
  color: #d7efff;
}

.reading-chat-composer {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(244, 240, 232, 0.11);
  border-radius: 8px;
  background:
    radial-gradient(circle at 8% 0, rgba(100, 182, 165, 0.12), transparent 34%),
    rgba(16, 20, 18, 0.44);
}

.reading-composer-header {
  display: none;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  color: rgba(244, 240, 232, 0.68);
  font-size: 0.76rem;
  font-weight: 900;
}

.reading-composer-header strong {
  color: color-mix(in srgb, var(--reader-accent) 78%, #fff8e8);
}

.reading-composer-header span {
  min-width: 0;
  color: rgba(244, 240, 232, 0.62);
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-composer-presence {
  display: none;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 28%, rgba(244, 240, 232, 0.09));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 36%, rgba(16, 20, 18, 0.34)), rgba(16, 20, 18, 0.52)),
    rgba(16, 20, 18, 0.42);
}

.reading-composer-presence.blocked {
  border-color: rgba(215, 124, 115, 0.42);
  background:
    linear-gradient(135deg, rgba(215, 124, 115, 0.12), rgba(16, 20, 18, 0.58)),
    rgba(16, 20, 18, 0.46);
}

.reading-chat-composer[data-dialogue-state="starter"] .reading-composer-presence {
  display: none;
}

.reading-composer-presence-avatar {
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 42%, rgba(244, 240, 232, 0.22));
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 18px color-mix(in srgb, var(--reader-glow) 42%, transparent);
}

.reading-composer-presence-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.reading-composer-presence-copy span {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 5px;
  color: color-mix(in srgb, var(--reader-accent) 76%, rgba(244, 240, 232, 0.76));
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.reading-composer-presence-copy span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

.reading-composer-presence.draft .reading-composer-presence-copy span,
.reading-composer-presence.waiting .reading-composer-presence-copy span {
  color: rgba(244, 240, 232, 0.58);
}

.reading-composer-presence.blocked .reading-composer-presence-copy span {
  color: #ffc0b7;
}

.reading-composer-presence-copy strong {
  overflow: hidden;
  color: #fff8e8;
  font-size: 0.86rem;
  line-height: 1.24;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-composer-presence-copy small {
  overflow: hidden;
  color: rgba(244, 240, 232, 0.66);
  font-size: 0.74rem;
  line-height: 1.34;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-composer-presence-chips {
  display: none;
}

.reading-composer-presence-chips span {
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(244, 240, 232, 0.045);
}

.reading-composer-presence-chips small,
.reading-composer-presence-chips b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-composer-presence-chips small {
  color: rgba(244, 240, 232, 0.48);
  font-size: 0.61rem;
  font-weight: 900;
}

.reading-composer-presence-chips b {
  margin-top: 2px;
  color: rgba(255, 248, 232, 0.82);
  font-size: 0.66rem;
  line-height: 1.2;
}

.reading-composer-stage {
  overflow: visible;
}

.reading-composer-thread {
  display: grid;
  gap: 8px;
}

.reading-composer-bubble {
  display: grid;
  gap: 8px;
  align-items: start;
  max-width: min(88%, 520px);
  padding: 8px 9px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(244, 240, 232, 0.06);
}

.reading-composer-bubble.reader {
  grid-template-columns: 34px minmax(0, 1fr);
}

.reading-composer-bubble.handoff {
  margin-top: -2px;
  border-color: color-mix(in srgb, var(--reader-accent) 34%, rgba(244, 240, 232, 0.12));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 48%, rgba(16, 20, 18, 0.44)), rgba(16, 20, 18, 0.6)),
    rgba(16, 20, 18, 0.5);
}

.reading-composer-bubble.welcome {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 42%, rgba(16, 20, 18, 0.5)), rgba(16, 20, 18, 0.46)),
    rgba(16, 20, 18, 0.5);
}

.reading-composer-bubble.handoff.blocked {
  border-color: rgba(215, 124, 115, 0.44);
  background:
    linear-gradient(135deg, rgba(215, 124, 115, 0.12), rgba(16, 20, 18, 0.62)),
    rgba(16, 20, 18, 0.5);
}

.reading-composer-bubble.typing {
  border-style: dashed;
  opacity: 0.82;
}

.reading-chat-composer[data-dialogue-state="ready"] .reading-composer-bubble.handoff {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--reader-accent) 20%, transparent);
}

.reading-composer-bubble.user {
  justify-self: end;
  min-width: min(100%, 210px);
  border-color: rgba(217, 183, 96, 0.22);
  background: rgba(217, 183, 96, 0.08);
}

.reading-composer-bubble.user:not(.has-draft) {
  color: var(--muted);
}

.reading-composer-bubble img {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(217, 183, 96, 0.36);
  border-radius: 50%;
  object-fit: cover;
}

.reading-composer-bubble small {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.reading-composer-bubble.reader > div > small:first-child {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.reading-composer-bubble.reader > div > small:first-child::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--reader-accent) 78%, var(--teal));
  box-shadow: 0 0 8px color-mix(in srgb, var(--reader-accent) 54%, transparent);
}

.reading-composer-bubble p {
  margin: 2px 0 0;
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.reading-composer-bubble.user p {
  max-height: 4.6em;
  overflow: auto;
}

.reading-composer-turn-receipt {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--reader-accent) 24%, rgba(244, 240, 232, 0.08));
}

.reading-composer-turn-receipt span {
  display: grid;
  min-width: 0;
  min-height: 46px;
  gap: 2px;
  align-content: start;
  padding: 6px 7px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(244, 240, 232, 0.045);
}

.reading-composer-turn-receipt.blocked span {
  border-color: rgba(215, 124, 115, 0.2);
  background: rgba(215, 124, 115, 0.065);
}

.reading-composer-turn-receipt small {
  overflow: hidden;
  color: rgba(244, 240, 232, 0.54);
  font-size: 0.62rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-composer-turn-receipt b {
  overflow: hidden;
  color: color-mix(in srgb, var(--reader-accent) 72%, rgba(244, 240, 232, 0.88));
  font-size: 0.66rem;
  line-height: 1.22;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-composer-turn-receipt.blocked b {
  color: rgba(255, 226, 220, 0.9);
}

.reading-composer-receipt {
  display: grid;
  gap: 8px;
  width: min(100%, 620px);
  justify-self: stretch;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 34%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 42%, rgba(16, 20, 18, 0.5)), rgba(16, 20, 18, 0.58)),
    rgba(16, 20, 18, 0.52);
}

.reading-composer-receipt.blocked {
  border-color: rgba(215, 124, 115, 0.44);
  background:
    linear-gradient(135deg, rgba(215, 124, 115, 0.12), rgba(16, 20, 18, 0.6)),
    rgba(16, 20, 18, 0.52);
}

.reading-composer-receipt-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.reading-composer-receipt-head img {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(217, 183, 96, 0.36);
  border-radius: 50%;
  object-fit: cover;
}

.reading-composer-receipt-head span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.reading-composer-receipt-head small {
  color: color-mix(in srgb, var(--reader-accent) 72%, rgba(244, 240, 232, 0.72));
  font-size: 0.7rem;
  font-weight: 900;
}

.reading-composer-receipt-head strong {
  color: #fff8e8;
  font-size: 0.88rem;
  line-height: 1.25;
}

.reading-composer-receipt-head p {
  margin: 0;
  color: rgba(244, 240, 232, 0.68);
  font-size: 0.78rem;
  line-height: 1.42;
}

.reading-composer-receipt-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.8fr 1fr;
  gap: 6px;
}

.reading-composer-receipt-grid span {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 7px 8px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(244, 240, 232, 0.05);
}

.reading-composer-receipt-grid small {
  color: rgba(244, 240, 232, 0.52);
  font-size: 0.68rem;
  font-weight: 900;
}

.reading-composer-receipt-grid strong {
  overflow: hidden;
  color: rgba(244, 240, 232, 0.82);
  font-size: 0.72rem;
  line-height: 1.28;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-composer-receipt > b {
  width: fit-content;
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 900;
  background: color-mix(in srgb, var(--reader-accent) 72%, var(--gold));
}

.reading-composer-receipt.blocked > b {
  color: #fff4f1;
  background: rgba(215, 124, 115, 0.86);
}

.reading-composer-handoff-plan {
  display: grid;
  gap: 8px;
  width: min(100%, 600px);
  justify-self: stretch;
  padding: 10px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(244, 240, 232, 0.07), rgba(16, 20, 18, 0.58)),
    rgba(16, 20, 18, 0.5);
}

.reading-composer-handoff-plan.paid {
  border-color: rgba(217, 183, 96, 0.3);
  background:
    linear-gradient(135deg, rgba(217, 183, 96, 0.12), rgba(16, 20, 18, 0.58)),
    rgba(16, 20, 18, 0.5);
}

.reading-composer-handoff-plan.blocked {
  border-color: rgba(215, 124, 115, 0.4);
  background:
    linear-gradient(135deg, rgba(215, 124, 115, 0.12), rgba(16, 20, 18, 0.6)),
    rgba(16, 20, 18, 0.52);
}

.reading-composer-handoff-plan-head {
  display: grid;
  gap: 3px;
}

.reading-composer-handoff-plan-head span {
  color: color-mix(in srgb, var(--reader-accent) 70%, rgba(244, 240, 232, 0.66));
  font-size: 0.68rem;
  font-weight: 900;
}

.reading-composer-handoff-plan-head strong {
  color: #fff8e8;
  font-size: 0.86rem;
  line-height: 1.25;
}

.reading-composer-handoff-plan-head p {
  margin: 0;
  color: rgba(244, 240, 232, 0.68);
  font-size: 0.76rem;
  line-height: 1.42;
}

.reading-composer-handoff-plan-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(92px, 0.82fr) minmax(96px, 0.88fr);
  gap: 6px;
}

.reading-composer-handoff-plan-grid span {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 7px 8px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(244, 240, 232, 0.045);
}

.reading-composer-handoff-plan-grid small {
  color: rgba(244, 240, 232, 0.52);
  font-size: 0.68rem;
  font-weight: 900;
}

.reading-composer-handoff-plan-grid strong {
  overflow: hidden;
  color: rgba(244, 240, 232, 0.82);
  font-size: 0.72rem;
  line-height: 1.28;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-composer-listening-cue {
  display: grid;
  gap: 8px;
  width: min(100%, 560px);
  justify-self: stretch;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 28%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 34%, rgba(16, 20, 18, 0.46)), rgba(16, 20, 18, 0.54)),
    rgba(16, 20, 18, 0.48);
}

.reading-composer-listening-cue.blocked {
  border-color: rgba(215, 124, 115, 0.4);
  background:
    linear-gradient(135deg, rgba(215, 124, 115, 0.12), rgba(16, 20, 18, 0.58)),
    rgba(16, 20, 18, 0.5);
}

.reading-composer-listening-head {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.reading-composer-listening-head span {
  color: color-mix(in srgb, var(--reader-accent) 72%, rgba(244, 240, 232, 0.72));
  font-size: 0.68rem;
  font-weight: 900;
}

.reading-composer-listening-head strong {
  color: #fff8e8;
  font-size: 0.86rem;
  line-height: 1.26;
}

.reading-composer-listening-head p {
  margin: 0;
  color: rgba(244, 240, 232, 0.72);
  font-size: 0.78rem;
  line-height: 1.42;
}

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

.reading-composer-listening-chips span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(244, 240, 232, 0.05);
}

.reading-composer-listening-chips small {
  color: rgba(244, 240, 232, 0.52);
  font-size: 0.66rem;
  font-weight: 900;
}

.reading-composer-listening-chips b {
  overflow: hidden;
  color: color-mix(in srgb, var(--reader-accent) 66%, rgba(244, 240, 232, 0.86));
  font-size: 0.7rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-composer-daily-bridge {
  display: grid;
  gap: 8px;
  width: min(100%, 560px);
  justify-self: stretch;
  padding: 9px 10px;
  border: 1px solid rgba(100, 182, 165, 0.26);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(100, 182, 165, 0.12), color-mix(in srgb, var(--reader-glow) 28%, rgba(16, 20, 18, 0.5))),
    rgba(16, 20, 18, 0.48);
}

.reading-composer-daily-bridge.paid {
  border-color: color-mix(in srgb, var(--reader-accent) 34%, rgba(217, 183, 96, 0.18));
}

.reading-composer-daily-bridge.blocked {
  border-color: rgba(215, 124, 115, 0.38);
  background:
    linear-gradient(135deg, rgba(215, 124, 115, 0.1), color-mix(in srgb, var(--reader-glow) 24%, rgba(16, 20, 18, 0.56))),
    rgba(16, 20, 18, 0.5);
}

.reading-composer-daily-bridge-head {
  display: grid;
  gap: 3px;
}

.reading-composer-daily-bridge-head span {
  color: var(--teal);
  font-size: 0.68rem;
  font-weight: 900;
}

.reading-composer-daily-bridge-head strong {
  color: #fff8e8;
  font-size: 0.86rem;
  line-height: 1.26;
}

.reading-composer-daily-bridge-head p {
  margin: 0;
  color: rgba(244, 240, 232, 0.72);
  font-size: 0.78rem;
  line-height: 1.42;
}

.reading-composer-daily-bridge-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.reading-composer-daily-bridge-chips span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(244, 240, 232, 0.05);
}

.reading-composer-daily-bridge-chips small {
  color: rgba(244, 240, 232, 0.52);
  font-size: 0.66rem;
  font-weight: 900;
}

.reading-composer-daily-bridge-chips b {
  overflow: hidden;
  color: color-mix(in srgb, var(--teal) 68%, rgba(244, 240, 232, 0.88));
  font-size: 0.7rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-composer-prep-details {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 30%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 28%, rgba(16, 20, 18, 0.5)), rgba(16, 20, 18, 0.62)),
    rgba(16, 20, 18, 0.5);
}

.reading-options > .reading-composer-prep-details {
  grid-column: 1 / -1;
}

.reading-composer-prep-details.paid {
  border-color: rgba(217, 183, 96, 0.3);
  background:
    linear-gradient(135deg, rgba(217, 183, 96, 0.12), rgba(16, 20, 18, 0.62)),
    rgba(16, 20, 18, 0.5);
}

.reading-composer-prep-details.blocked {
  border-color: rgba(215, 124, 115, 0.4);
}

.reading-composer-prep-details summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.reading-composer-prep-details summary::-webkit-details-marker {
  display: none;
}

.reading-composer-prep-details summary::after {
  content: "+";
  grid-column: 2;
  grid-row: 1 / span 3;
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(217, 183, 96, 0.24);
  border-radius: 50%;
  color: var(--gold);
  font-size: 1rem;
  font-weight: 900;
}

.reading-composer-prep-details[open] summary::after {
  content: "-";
}

.reading-composer-prep-details summary span {
  color: color-mix(in srgb, var(--reader-accent) 72%, rgba(244, 240, 232, 0.72));
  font-size: 0.68rem;
  font-weight: 900;
}

.reading-composer-prep-details summary strong {
  min-width: 0;
  color: #fff8e8;
  font-size: 0.86rem;
  line-height: 1.24;
}

.reading-composer-prep-details summary small {
  display: none;
}

.reading-composer-prep-details summary em {
  grid-column: 1;
  width: fit-content;
  min-height: 21px;
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 999px;
  color: rgba(244, 240, 232, 0.72);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  background: rgba(244, 240, 232, 0.055);
}

.reading-composer-prep-details-body {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}

.reading-composer-typing-dots {
  display: inline-block;
  width: 1.2em;
  color: color-mix(in srgb, var(--reader-accent) 84%, #fff8e8);
  font-weight: 900;
  animation: readerTypingDots 1.2s ease-in-out infinite;
}

.reading-composer-typing-dots::before {
  content: "...";
}

.reading-composer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.reading-composer-meta[data-has-commerce="false"] {
  display: none;
}

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

.reading-composer-quick-title {
  display: grid;
  grid-column: 1 / -1;
  gap: 2px;
  margin: 0 0 2px;
}

.reading-composer-quick-title strong {
  color: color-mix(in srgb, var(--reader-accent) 80%, #fff8e8);
  font-size: 0.82rem;
}

.reading-composer-quick-title small {
  color: rgba(244, 240, 232, 0.64);
  font-size: 0.76rem;
  line-height: 1.4;
}

.reading-composer-paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 26%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 32%, rgba(16, 20, 18, 0.42)), rgba(16, 20, 18, 0.46)),
    rgba(16, 20, 18, 0.42);
}

.reading-composer-paths > span {
  grid-column: 1 / -1;
  color: color-mix(in srgb, var(--reader-accent) 74%, #fff8e8);
  font-size: 0.78rem;
  font-weight: 900;
}

.reading-composer-path {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 8px;
  align-content: start;
  min-height: 82px;
  padding: 8px 9px;
  border: 1px solid rgba(244, 240, 232, 0.12);
  border-radius: 8px;
  color: var(--text);
  text-align: left;
  background: rgba(244, 240, 232, 0.06);
  cursor: pointer;
}

.reading-composer-path.active {
  border-color: color-mix(in srgb, var(--reader-accent) 60%, rgba(217, 183, 96, 0.32));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 52%, rgba(16, 20, 18, 0.46)), rgba(16, 20, 18, 0.56)),
    rgba(16, 20, 18, 0.5);
}

.reading-composer-path.blocked:not(.active) {
  border-color: rgba(215, 124, 115, 0.26);
}

.reading-composer-path:hover,
.reading-composer-path:focus-visible {
  border-color: color-mix(in srgb, var(--reader-accent) 64%, rgba(217, 183, 96, 0.28));
  outline: 2px solid color-mix(in srgb, var(--reader-accent) 22%, transparent);
  outline-offset: 2px;
}

.reading-composer-path strong {
  color: #fff8e8;
  font-size: 0.84rem;
  line-height: 1.25;
}

.reading-composer-path small {
  grid-column: 1 / -1;
  color: rgba(244, 240, 232, 0.66);
  font-size: 0.72rem;
  line-height: 1.3;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.reading-composer-path-values {
  grid-column: 1 / -1;
  display: none;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 20px;
  align-items: center;
}

.reading-composer-path-values i {
  min-height: 18px;
  display: inline-flex;
  align-items: center;
  padding: 2px 5px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 20%, rgba(244, 240, 232, 0.12));
  border-radius: 999px;
  color: color-mix(in srgb, var(--reader-accent) 68%, #fff8e8);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  background: rgba(244, 240, 232, 0.06);
}

.reading-composer-path.active .reading-composer-path-values i {
  border-color: color-mix(in srgb, var(--reader-accent) 38%, rgba(244, 240, 232, 0.14));
  background: color-mix(in srgb, var(--reader-glow) 58%, rgba(244, 240, 232, 0.08));
}

.reading-composer-path.blocked:not(.active) .reading-composer-path-values i {
  border-color: rgba(215, 124, 115, 0.24);
  color: rgba(255, 226, 220, 0.88);
}

.reading-composer-path em {
  justify-self: end;
  color: color-mix(in srgb, var(--reader-accent) 72%, #fff8e8);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
}

.reading-composer-path span {
  grid-column: 1 / -1;
  width: fit-content;
  min-height: 23px;
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border: 1px solid rgba(217, 183, 96, 0.2);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 900;
  background: var(--gold);
}

.reading-composer-path.blocked span {
  color: #fff4f1;
  background: rgba(215, 124, 115, 0.8);
}

.reading-composer-continuity {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.92fr);
  gap: 8px;
  align-items: stretch;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 30%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 34%, rgba(16, 20, 18, 0.5)), rgba(16, 20, 18, 0.52)),
    rgba(16, 20, 18, 0.46);
}

.reading-composer-continuity.blocked {
  border-color: rgba(215, 124, 115, 0.42);
  background:
    linear-gradient(135deg, rgba(215, 124, 115, 0.12), rgba(16, 20, 18, 0.58)),
    rgba(16, 20, 18, 0.5);
}

.reading-composer-continuity-copy {
  display: grid;
  gap: 3px;
  align-content: center;
  min-width: 0;
}

.reading-composer-continuity-copy span {
  color: color-mix(in srgb, var(--reader-accent) 74%, rgba(244, 240, 232, 0.72));
  font-size: 0.68rem;
  font-weight: 900;
}

.reading-composer-continuity-copy strong {
  color: #fff8e8;
  font-size: 0.86rem;
  line-height: 1.25;
}

.reading-composer-continuity-copy p {
  margin: 0;
  color: rgba(244, 240, 232, 0.68);
  font-size: 0.76rem;
  line-height: 1.42;
}

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

.reading-composer-continuity-steps span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 6px;
  align-content: start;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(244, 240, 232, 0.05);
}

.reading-composer-continuity-steps em {
  grid-row: span 2;
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 900;
  background: color-mix(in srgb, var(--reader-accent) 74%, var(--gold));
}

.reading-composer-continuity.blocked .reading-composer-continuity-steps em {
  color: #fff4f1;
  background: rgba(215, 124, 115, 0.88);
}

.reading-composer-continuity-steps small {
  overflow: hidden;
  color: rgba(244, 240, 232, 0.52);
  font-size: 0.64rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-composer-continuity-steps b {
  overflow: hidden;
  color: color-mix(in srgb, var(--reader-accent) 66%, rgba(244, 240, 232, 0.86));
  font-size: 0.68rem;
  line-height: 1.24;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-composer-continuity.blocked .reading-composer-continuity-steps b {
  color: rgba(255, 226, 220, 0.9);
}

.reading-composer-submit-bridge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 0.88fr);
  gap: 7px;
  align-items: stretch;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 36%, rgba(217, 183, 96, 0.16));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 24%, rgba(217, 183, 96, 0.08)), rgba(16, 20, 18, 0.5)),
    rgba(16, 20, 18, 0.48);
}

.reading-composer-submit-bridge.paid {
  border-color: color-mix(in srgb, var(--reader-accent) 44%, rgba(217, 183, 96, 0.26));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 30%, rgba(217, 183, 96, 0.14)), rgba(16, 20, 18, 0.54)),
    rgba(16, 20, 18, 0.5);
}

.reading-composer-submit-bridge.blocked {
  border-color: rgba(215, 124, 115, 0.46);
  background:
    linear-gradient(135deg, rgba(215, 124, 115, 0.12), rgba(16, 20, 18, 0.58)),
    rgba(16, 20, 18, 0.52);
}

.reading-composer-submit-copy {
  display: grid;
  gap: 3px;
  align-content: center;
  min-width: 0;
}

.reading-composer-submit-copy span {
  color: color-mix(in srgb, var(--reader-accent) 76%, rgba(244, 240, 232, 0.72));
  font-size: 0.68rem;
  font-weight: 900;
}

.reading-composer-submit-copy strong {
  color: #fff8e8;
  font-size: 0.86rem;
  line-height: 1.25;
}

.reading-composer-submit-copy p {
  margin: 0;
  color: rgba(244, 240, 232, 0.68);
  font-size: 0.76rem;
  line-height: 1.35;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

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

.reading-composer-submit-items span {
  display: grid;
  gap: 3px;
  align-content: start;
  min-width: 0;
  min-height: 44px;
  padding: 6px 7px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(244, 240, 232, 0.05);
}

.reading-composer-submit-bridge.blocked .reading-composer-submit-items span {
  border-color: rgba(215, 124, 115, 0.18);
  background: rgba(215, 124, 115, 0.07);
}

.reading-composer-submit-items small {
  overflow: hidden;
  color: rgba(244, 240, 232, 0.52);
  font-size: 0.64rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-composer-submit-items b {
  overflow: hidden;
  color: color-mix(in srgb, var(--reader-accent) 66%, rgba(244, 240, 232, 0.86));
  font-size: 0.68rem;
  line-height: 1.24;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-composer-submit-bridge.blocked .reading-composer-submit-items b {
  color: rgba(255, 226, 220, 0.9);
}

.reading-composer-quick-reply {
  display: grid;
  min-height: 58px;
  gap: 2px;
  align-content: center;
  padding: 7px 9px;
  border: 1px solid rgba(217, 183, 96, 0.2);
  border-radius: 8px;
  color: var(--text);
  text-align: left;
  background:
    linear-gradient(135deg, rgba(217, 183, 96, 0.08), rgba(16, 20, 18, 0.46)),
    rgba(16, 20, 18, 0.46);
  cursor: pointer;
}

.reading-composer-quick-reply:hover,
.reading-composer-quick-reply:focus-visible {
  border-color: color-mix(in srgb, var(--reader-accent) 52%, rgba(217, 183, 96, 0.28));
  background:
    linear-gradient(135deg, var(--reader-glow), rgba(16, 20, 18, 0.56)),
    rgba(16, 20, 18, 0.5);
  outline: 2px solid rgba(100, 182, 165, 0.24);
  outline-offset: 2px;
}

.reading-composer-quick-reply strong {
  color: color-mix(in srgb, var(--reader-accent) 72%, #fff8e8);
  font-size: 0.82rem;
  line-height: 1.25;
}

.reading-composer-quick-reply small {
  overflow: hidden;
  color: rgba(244, 240, 232, 0.64);
  font-size: 0.72rem;
  line-height: 1.28;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.reading-composer-refine {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 30%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 36%, rgba(16, 20, 18, 0.5)), rgba(16, 20, 18, 0.48)),
    rgba(16, 20, 18, 0.42);
}

.reading-composer-refine > span {
  color: color-mix(in srgb, var(--reader-accent) 76%, #fff8e8);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.3;
}

.reading-composer-refine-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.reading-composer-refine-button {
  display: grid;
  gap: 3px;
  min-height: 58px;
  align-content: center;
  padding: 9px 10px;
  border: 1px solid rgba(244, 240, 232, 0.12);
  border-radius: 8px;
  color: var(--text);
  text-align: left;
  background: rgba(244, 240, 232, 0.06);
  cursor: pointer;
}

.reading-composer-refine-button:hover,
.reading-composer-refine-button:focus-visible {
  border-color: color-mix(in srgb, var(--reader-accent) 58%, rgba(217, 183, 96, 0.26));
  background: color-mix(in srgb, var(--reader-glow) 52%, rgba(16, 20, 18, 0.52));
  outline: 2px solid color-mix(in srgb, var(--reader-accent) 22%, transparent);
  outline-offset: 2px;
}

.reading-composer-refine-button strong {
  color: #fff8e8;
  font-size: 0.8rem;
  line-height: 1.25;
}

.reading-composer-refine-button small {
  color: rgba(244, 240, 232, 0.62);
  font-size: 0.7rem;
  line-height: 1.32;
}

.reading-composer-meta span,
.reading-composer-meta strong,
.reading-commerce-cta {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 999px;
  background: rgba(16, 20, 18, 0.5);
}

.reading-composer-meta strong {
  color: var(--teal);
}

.reading-composer-meta[data-cost-tone="paid"] strong {
  color: var(--gold);
}

.reading-composer-meta[data-cost-tone="blocked"] strong {
  color: var(--rose);
}

.reading-commerce-cta {
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 900;
  background: var(--gold);
  cursor: pointer;
}

.reading-commerce-cta.telegram {
  border-color: rgba(100, 182, 165, 0.42);
  color: #f8fffc;
  background:
    linear-gradient(135deg, rgba(74, 148, 213, 0.92), rgba(100, 182, 165, 0.9)),
    #2f8fc5;
}

.reading-commerce-cta:hover,
.reading-commerce-cta:focus-visible {
  filter: brightness(1.06);
  outline: 2px solid rgba(100, 182, 165, 0.42);
  outline-offset: 2px;
}

.reading-commerce-action-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 7px;
  width: 100%;
}

.reading-commerce-action-row .reading-commerce-cta {
  justify-content: center;
  min-height: 38px;
  text-align: center;
}

.reading-message-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(132px, 0.28fr);
  gap: 8px;
  align-items: stretch;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 26%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(244, 240, 232, 0.05), rgba(16, 20, 18, 0.62)),
    rgba(16, 20, 18, 0.48);
  box-shadow: inset 0 0 0 1px rgba(244, 240, 232, 0.035);
}

.reading-form[data-dialogue-state="starter"] .reading-message-row {
  border-color: rgba(244, 240, 232, 0.12);
}

.reading-form[data-dialogue-state="ready"] .reading-message-row {
  border-color: color-mix(in srgb, var(--reader-accent) 48%, rgba(217, 183, 96, 0.22));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--reader-accent) 16%, transparent),
    0 12px 30px color-mix(in srgb, var(--reader-glow) 36%, transparent);
}

.reading-form[data-cost-tone="blocked"] .reading-message-row {
  border-color: rgba(215, 124, 115, 0.44);
  background:
    linear-gradient(135deg, rgba(215, 124, 115, 0.1), rgba(16, 20, 18, 0.66)),
    rgba(16, 20, 18, 0.5);
}

.reading-message-row > #start-web-reading {
  min-height: 100%;
  padding-inline: 14px;
  white-space: normal;
}

.reading-message-input {
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 8px 10px 9px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 34%, rgba(244, 240, 232, 0.12));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 36%, rgba(16, 20, 18, 0.58)), rgba(16, 20, 18, 0.76)),
    rgba(16, 20, 18, 0.64);
  box-shadow: inset 0 0 0 1px rgba(244, 240, 232, 0.04);
}

.reading-form[data-dialogue-state="ready"] .reading-message-input {
  border-color: color-mix(in srgb, var(--reader-accent) 56%, rgba(217, 183, 96, 0.24));
}

.reading-message-input-kicker {
  display: block;
  color: color-mix(in srgb, var(--reader-accent) 82%, var(--gold));
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.2;
}

.reading-message-input-frame {
  display: block;
  min-width: 0;
}

.reading-message-input-preview {
  display: none;
}

.reading-message-input-hint {
  color: rgba(244, 240, 232, 0.62);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.34;
}

.reading-form[data-dialogue-state="ready"] .reading-message-input-hint {
  color: color-mix(in srgb, var(--reader-accent) 76%, #fff8e8);
}

.reading-form[data-cost-tone="blocked"] .reading-message-input-hint {
  color: var(--rose);
}

.reading-settings-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(217, 183, 96, 0.24);
  border-radius: 8px;
  color: var(--text);
  text-align: left;
  background: rgba(16, 20, 18, 0.44);
}

.reading-settings-toggle:hover,
.reading-settings-toggle:focus-visible {
  border-color: rgba(217, 183, 96, 0.62);
  background: rgba(217, 183, 96, 0.08);
}

.reading-settings-toggle span {
  color: var(--gold);
  font-size: 0.84rem;
  font-weight: 900;
}

.reading-settings-toggle small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.npc-consult-panel {
  margin: 0;
  padding: 12px 14px;
}

.npc-consult-details {
  border-top: 0;
  padding-top: 0;
}

.npc-consult-copy {
  display: grid;
  gap: 6px;
}

.npc-consult-copy h3 {
  margin: 0;
}

.npc-consult-status {
  color: var(--gold);
  font-weight: 900;
}

.npc-choice-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.npc-choice-list strong {
  grid-column: 1 / -1;
}

.npc-choice-list button {
  white-space: normal;
}

.npc-consult-outcome {
  display: grid;
  gap: 6px;
  padding: 10px;
  border-left: 3px solid var(--teal);
  border-radius: 6px;
  background: rgba(100, 182, 165, 0.1);
}

.npc-consult-outcome p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.npc-consult-outcome span {
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 900;
}

.reading-field,
.reading-options label {
  display: grid;
  gap: 6px;
}

.reading-field textarea,
.reading-options select,
.reading-followup-form input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: rgba(16, 20, 18, 0.76);
  font: inherit;
}

.reading-field textarea {
  min-height: 72px;
  resize: vertical;
  padding: 9px 10px;
  line-height: 1.45;
}

.reading-message-input textarea {
  min-height: 58px;
  max-height: 138px;
  margin-top: 5px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  resize: vertical;
}

.reading-form[data-question-editor-mode="compact_confirm"][data-question-editor-focus="collapsed"] .reading-message-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0;
  align-items: center;
  min-height: 44px;
  padding: 0;
  overflow: hidden;
}

.reading-form[data-question-editor-mode="compact_confirm"][data-question-editor-focus="collapsed"] .reading-message-input-kicker,
.reading-form[data-question-editor-mode="compact_confirm"][data-question-editor-focus="collapsed"] .reading-message-input-hint {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.reading-form[data-question-editor-mode="compact_confirm"][data-question-editor-focus="collapsed"] .reading-message-input-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  min-width: 0;
  height: 100%;
}

.reading-form[data-question-editor-mode="compact_confirm"][data-question-editor-focus="collapsed"] .reading-message-input-preview {
  display: block;
  grid-column: 1;
  min-width: 0;
  padding: 11px;
  overflow: hidden;
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-form[data-question-editor-mode="compact_confirm"][data-question-editor-focus="collapsed"] .reading-message-input textarea {
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  margin: 0;
  padding: 11px;
  overflow: hidden;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  resize: none;
}

.reading-form[data-question-editor-mode="compact_confirm"][data-question-editor-focus="collapsed"] .reading-message-input::after {
  content: attr(data-editor-label);
  position: static;
  z-index: 3;
  grid-column: 2;
  max-width: 52px;
  margin-right: 10px;
  padding-left: 8px;
  overflow: hidden;
  border-left: 1px solid color-mix(in srgb, var(--reader-accent) 28%, transparent);
  color: color-mix(in srgb, var(--reader-accent) 82%, #fff8e8);
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

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

.reading-options select,
.reading-followup-form input {
  min-height: 44px;
  padding: 0 12px;
}

.reading-field textarea:focus,
.reading-options select:focus,
.reading-followup-form input:focus {
  outline: 2px solid rgba(100, 182, 165, 0.42);
  border-color: rgba(100, 182, 165, 0.78);
}

.reading-hint,
.reading-status {
  margin: 0;
  line-height: 1.5;
}

.reading-form:not(.settings-expanded) .reading-options,
.reading-form:not(.settings-expanded) .reading-spread-advisor,
.reading-form:not(.settings-expanded) .reading-reader-recommendation,
.reading-form:not(.settings-expanded) .reading-draw-summary,
.reading-form .reading-hint {
  display: none;
}

.reading-form:not(.settings-expanded).has-question .reading-draw-summary {
  gap: 8px;
  padding: 10px;
  border-color: rgba(100, 182, 165, 0.34);
  background:
    linear-gradient(150deg, rgba(16, 20, 18, 0.78), rgba(34, 40, 36, 0.5)),
    rgba(100, 182, 165, 0.06);
}

.reading-form:not(.settings-expanded).has-question .reading-draw-summary-heading {
  grid-template-columns: minmax(0, 1fr);
}

.reading-form:not(.settings-expanded).has-question .reading-draw-summary-heading strong {
  font-size: 0.86rem;
}

.reading-form:not(.settings-expanded).has-question .reading-draw-summary-heading p {
  font-size: 0.78rem;
}

.reading-form:not(.settings-expanded).has-question .reading-draw-summary-grid {
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(86px, 0.72fr));
}

.reading-form:not(.settings-expanded).has-question .reading-draw-summary-grid > div {
  min-height: 52px;
  padding: 8px;
}

.reading-form .reading-question-helper {
  display: grid;
}

.reading-form.settings-expanded .reading-options,
.reading-form.settings-expanded .reading-spread-advisor,
.reading-form.settings-expanded .reading-reader-recommendation,
.reading-form.settings-expanded .reading-draw-summary {
  display: grid;
}

.reading-form.settings-expanded .reading-reader-recommendation[hidden] {
  display: none;
}

.reading-status.offline {
  color: var(--rose);
}

.reading-status.online {
  color: var(--teal);
}

.reading-pick-stage {
  --reader-accent: var(--gold);
  --reader-glow: rgba(217, 183, 96, 0.2);
  position: relative;
  display: grid;
  gap: 14px;
  overflow: hidden;
  padding: 16px;
  background:
    radial-gradient(circle at 15% 0, var(--reader-glow), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(100, 182, 165, 0.16), transparent 34%),
    linear-gradient(155deg, rgba(34, 40, 36, 0.94), rgba(16, 20, 18, 0.97));
}

.reading-pick-stage::before {
  position: absolute;
  inset: auto -18% -44% auto;
  width: 360px;
  height: 360px;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--reader-accent) 20%, transparent), transparent 66%);
  filter: blur(4px);
  animation: readerHaloDrift 12s ease-in-out infinite;
  pointer-events: none;
}

.reading-pick-stage[hidden] {
  display: none;
}

.reading-pick-stage:not([hidden])::before {
  right: -18%;
  bottom: 0;
  width: 260px;
  height: 260px;
}

.reading-pick-stage > * {
  position: relative;
  z-index: 1;
}

.reading-pick-heading {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.reading-pick-heading h3 {
  margin: 2px 0 0;
  color: #fff8e8;
  font-size: 1.1rem;
  line-height: 1.35;
}

.reading-pick-heading > span {
  flex: 0 0 auto;
  min-width: 68px;
  padding: 6px 10px;
  border: 1px solid rgba(217, 183, 96, 0.44);
  border-radius: 999px;
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 900;
  text-align: center;
}

.reading-pick-instruction {
  max-width: 46rem;
  margin: 0;
  color: rgba(244, 240, 232, 0.74);
  line-height: 1.65;
}

.reading-pick-reader-note {
  display: none;
}

.reading-pick-prep-details {
  overflow: hidden;
  border: 1px solid rgba(244, 240, 232, 0.12);
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.46);
}

.reading-pick-prep-details > summary {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 9px 36px 9px 11px;
  color: rgba(244, 240, 232, 0.76);
  cursor: pointer;
  list-style: none;
}

.reading-pick-prep-details > summary::-webkit-details-marker {
  display: none;
}

.reading-pick-prep-details > summary::after {
  position: absolute;
  right: 13px;
  width: 8px;
  height: 8px;
  content: "";
  border-right: 2px solid color-mix(in srgb, var(--reader-accent) 78%, #fff8e8);
  border-bottom: 2px solid color-mix(in srgb, var(--reader-accent) 78%, #fff8e8);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 160ms ease;
}

.reading-pick-prep-details[open] > summary::after {
  transform: translateY(2px) rotate(225deg);
}

.reading-pick-prep-details > summary span {
  color: #fff8e8;
  font-size: 0.82rem;
  font-weight: 900;
}

.reading-pick-prep-details > summary strong {
  overflow: hidden;
  color: color-mix(in srgb, var(--reader-accent) 76%, rgba(244, 240, 232, 0.78));
  font-size: 0.74rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-pick-prep-details > summary:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--reader-accent) 72%, #fff8e8);
  outline-offset: -3px;
}

.reading-pick-prep-content {
  display: grid;
  gap: 10px;
  padding: 0 10px 10px;
}

.reading-pick-conversation {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(244, 240, 232, 0.06), rgba(16, 20, 18, 0.38)),
    rgba(16, 20, 18, 0.36);
}

.reading-pick-conversation[data-pick-origin="result_upgrade"] {
  border-color: color-mix(in srgb, var(--reader-accent) 38%, rgba(217, 183, 96, 0.16));
  background:
    radial-gradient(circle at 8% 0, color-mix(in srgb, var(--reader-glow) 68%, transparent), transparent 34%),
    linear-gradient(135deg, rgba(244, 240, 232, 0.055), rgba(16, 20, 18, 0.42)),
    rgba(16, 20, 18, 0.38);
}

.reading-pick-bubble {
  display: grid;
  gap: 3px;
  max-width: min(100%, 560px);
  padding: 8px 10px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(244, 240, 232, 0.05);
}

.reading-pick-bubble small {
  color: rgba(244, 240, 232, 0.54);
  font-size: 0.68rem;
  font-weight: 900;
}

.reading-pick-bubble p {
  margin: 0;
  color: rgba(244, 240, 232, 0.84);
  font-size: 0.82rem;
  line-height: 1.45;
}

.reading-pick-bubble.user {
  justify-self: end;
  border-color: rgba(100, 182, 165, 0.28);
  background: rgba(100, 182, 165, 0.1);
}

.reading-pick-bubble.reader {
  justify-self: start;
  border-color: color-mix(in srgb, var(--reader-accent) 42%, rgba(244, 240, 232, 0.08));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 80%, transparent), rgba(16, 20, 18, 0.45)),
    rgba(16, 20, 18, 0.46);
}

.reading-pick-bubble.reader p {
  color: #fff6de;
}

.reading-pick-bubble.system {
  justify-self: center;
  max-width: min(100%, 480px);
  text-align: center;
  background: rgba(16, 20, 18, 0.38);
}

.reading-pick-briefing {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 28%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 42%, rgba(16, 20, 18, 0.42)), rgba(16, 20, 18, 0.5)),
    rgba(16, 20, 18, 0.42);
}

.reading-pick-briefing.progress {
  border-color: color-mix(in srgb, var(--reader-accent) 46%, rgba(244, 240, 232, 0.1));
}

.reading-pick-briefing.ready {
  border-color: rgba(100, 182, 165, 0.4);
  background:
    linear-gradient(135deg, rgba(100, 182, 165, 0.16), rgba(16, 20, 18, 0.54)),
    rgba(16, 20, 18, 0.44);
}

.reading-pick-briefing-head {
  display: grid;
  gap: 3px;
}

.reading-pick-briefing-head span {
  color: color-mix(in srgb, var(--reader-accent) 74%, rgba(244, 240, 232, 0.64));
  font-size: 0.68rem;
  font-weight: 900;
}

.reading-pick-briefing-head strong {
  color: #fff8e8;
  font-size: 0.88rem;
  line-height: 1.25;
}

.reading-pick-briefing-head p {
  margin: 0;
  color: rgba(244, 240, 232, 0.68);
  font-size: 0.76rem;
  line-height: 1.42;
}

.reading-pick-briefing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(82px, 0.72fr) minmax(104px, 0.88fr);
  gap: 6px;
}

.reading-pick-briefing-grid span {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 7px 8px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(244, 240, 232, 0.045);
}

.reading-pick-briefing-grid small {
  color: rgba(244, 240, 232, 0.52);
  font-size: 0.68rem;
  font-weight: 900;
}

.reading-pick-briefing-grid strong {
  overflow: hidden;
  color: rgba(244, 240, 232, 0.82);
  font-size: 0.72rem;
  line-height: 1.28;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-pick-handoff {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(240px, 1.04fr);
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 34%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 48%, rgba(16, 20, 18, 0.42)), rgba(16, 20, 18, 0.54)),
    rgba(16, 20, 18, 0.42);
}

.reading-pick-handoff.paid {
  border-color: color-mix(in srgb, var(--reader-accent) 52%, rgba(217, 183, 96, 0.2));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 58%, rgba(217, 183, 96, 0.1)), rgba(16, 20, 18, 0.56)),
    rgba(16, 20, 18, 0.46);
}

.reading-pick-handoff.ready {
  border-color: rgba(100, 182, 165, 0.38);
  background:
    linear-gradient(135deg, rgba(100, 182, 165, 0.14), rgba(16, 20, 18, 0.56)),
    rgba(16, 20, 18, 0.46);
}

.reading-pick-handoff[data-pick-handoff-origin="result_upgrade"] {
  border-color: color-mix(in srgb, var(--reader-accent) 62%, rgba(217, 183, 96, 0.24));
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--reader-glow) 82%, transparent), transparent 36%),
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 58%, rgba(217, 183, 96, 0.08)), rgba(16, 20, 18, 0.58)),
    rgba(16, 20, 18, 0.48);
}

.reading-pick-handoff-copy {
  display: grid;
  gap: 3px;
  align-content: center;
  min-width: 0;
}

.reading-pick-handoff-copy span {
  color: color-mix(in srgb, var(--reader-accent) 78%, rgba(244, 240, 232, 0.7));
  font-size: 0.68rem;
  font-weight: 900;
}

.reading-pick-handoff-copy strong {
  color: #fff8e8;
  font-size: 0.86rem;
  line-height: 1.25;
}

.reading-pick-handoff-copy p {
  margin: 0;
  color: rgba(244, 240, 232, 0.68);
  font-size: 0.76rem;
  line-height: 1.42;
}

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

.reading-pick-handoff-grid span {
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 52px;
  padding: 7px 8px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(244, 240, 232, 0.045);
}

.reading-pick-handoff-grid small {
  overflow: hidden;
  color: rgba(244, 240, 232, 0.52);
  font-size: 0.66rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-pick-handoff-grid strong {
  overflow: hidden;
  color: color-mix(in srgb, var(--reader-accent) 68%, rgba(244, 240, 232, 0.86));
  font-size: 0.72rem;
  line-height: 1.28;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-pick-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.reading-pick-meta span {
  display: grid;
  gap: 4px;
  min-height: 50px;
  padding: 7px 9px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.44);
}

.reading-pick-meta small {
  overflow: hidden;
  color: rgba(244, 240, 232, 0.58);
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-pick-meta strong {
  overflow: hidden;
  color: #fff8e8;
  font-size: 0.84rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-pick-meta[data-cost-tone="free"] span:last-child strong {
  color: var(--teal);
}

.reading-pick-meta[data-cost-tone="paid"] span:last-child strong {
  color: var(--gold);
}

.reading-pick-meta[data-cost-tone="blocked"] span:last-child strong {
  color: var(--rose);
}

.reading-pick-cost-note {
  margin: -2px 0 0;
  color: rgba(244, 240, 232, 0.58);
  font-size: 0.76rem;
  line-height: 1.45;
}

.reading-pick-lane {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.reading-pick-lane span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 8px;
  align-items: center;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.42);
}

.reading-pick-lane span.active {
  border-color: color-mix(in srgb, var(--reader-accent) 66%, transparent);
  background: linear-gradient(135deg, var(--reader-glow), rgba(16, 20, 18, 0.52));
}

.reading-pick-lane span.done {
  border-color: rgba(100, 182, 165, 0.54);
  background: rgba(100, 182, 165, 0.1);
}

.reading-pick-lane strong {
  grid-row: span 2;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  background: var(--reader-accent);
  font-size: 0.78rem;
}

.reading-pick-lane em {
  overflow: hidden;
  color: var(--text);
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-pick-lane small {
  color: var(--muted);
  font-size: 0.72rem;
}

.reading-pick-action {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 48%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 72%, transparent), rgba(16, 20, 18, 0.62)),
    rgba(16, 20, 18, 0.42);
}

.reading-pick-action strong {
  color: color-mix(in srgb, var(--reader-accent) 78%, #fff8e8);
  font-size: 0.94rem;
  line-height: 1.28;
}

.reading-pick-action small {
  color: rgba(244, 240, 232, 0.76);
  font-size: 0.78rem;
  line-height: 1.45;
}

.reading-pick-action.final,
.reading-pick-action.ready {
  border-color: color-mix(in srgb, var(--reader-accent) 68%, rgba(100, 182, 165, 0.24));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--reader-accent) 14%, transparent);
}

.reading-pick-deck {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 10px;
  align-items: stretch;
}

.reading-pick-card {
  position: relative;
  min-height: 132px;
  overflow: hidden;
  border: 1px solid rgba(217, 183, 96, 0.42);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(217, 183, 96, 0.16), rgba(100, 182, 165, 0.14)),
    url("/assets/cards/back.svg") center / cover;
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transform: translateY(0) rotate(var(--tilt, 0deg));
  opacity: 0;
  animation: pickCardDeal 460ms ease forwards;
  animation-delay: calc(var(--pick-index, 0) * 34ms);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    filter 160ms ease,
    transform 100ms ease;
}

.reading-pick-card:nth-child(3n + 1) {
  --tilt: -2deg;
}

.reading-pick-card:nth-child(3n + 2) {
  --tilt: 1deg;
}

.reading-pick-card:nth-child(3n) {
  --tilt: 2deg;
}

.reading-pick-card::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(120deg, transparent 18%, rgba(255, 255, 255, 0.14) 50%, transparent 82%);
  opacity: 0;
  transform: translateX(-60%);
  transition:
    opacity 180ms ease,
    transform 260ms ease;
}

.reading-pick-card::before {
  position: absolute;
  inset: 12px;
  content: "";
  border: 1px solid color-mix(in srgb, var(--reader-accent) 28%, transparent);
  border-radius: 6px;
  opacity: 0.34;
  box-shadow: 0 0 22px color-mix(in srgb, var(--reader-accent) 16%, transparent);
  animation: readerCardBackPulse 4.8s ease-in-out infinite;
  animation-delay: calc(var(--pick-index, 0) * 120ms);
  pointer-events: none;
}

.reading-pick-card:hover:not(:disabled),
.reading-pick-card:focus-visible {
  border-color: color-mix(in srgb, var(--reader-accent) 86%, rgba(217, 183, 96, 0.32));
  box-shadow:
    0 24px 44px rgba(0, 0, 0, 0.38),
    0 0 26px color-mix(in srgb, var(--reader-accent) 24%, transparent);
  outline: none;
  transform: translateY(-8px) rotate(var(--tilt, 0deg));
}

.reading-pick-card:hover:not(:disabled)::after,
.reading-pick-card:focus-visible::after {
  opacity: 1;
  transform: translateX(60%);
}

.reading-pick-card.picked {
  border-color: rgba(100, 182, 165, 0.82);
  filter: saturate(0.84) brightness(0.86);
  opacity: 1;
  animation: none;
  transform: translateY(8px) scale(0.94);
}

.reading-pick-card:disabled {
  cursor: default;
}

.reading-pick-card span {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid rgba(244, 240, 232, 0.24);
  border-radius: 50%;
  color: #fff8e8;
  background: rgba(16, 20, 18, 0.78);
  font-size: 0.78rem;
  font-weight: 900;
}

.reading-pick-card span:empty {
  opacity: 0;
}

#reading-pick-cancel {
  justify-self: end;
  min-height: 36px;
  padding-inline: 12px;
  border-color: rgba(244, 240, 232, 0.14);
  background: rgba(16, 20, 18, 0.56);
  font-size: 0.84rem;
}

.reading-draw-ritual {
  --reader-accent: var(--teal);
  --reader-glow: rgba(100, 182, 165, 0.2);
  position: relative;
  display: grid;
  grid-template-columns: minmax(170px, 260px) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 176px;
  overflow: hidden;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 48%, transparent);
  border-radius: 8px;
  background:
    radial-gradient(circle at 20% 20%, var(--reader-glow), transparent 34%),
    linear-gradient(145deg, rgba(16, 20, 18, 0.96), rgba(34, 40, 36, 0.86));
  box-shadow: inset 0 0 0 1px rgba(244, 240, 232, 0.04);
}

.reading-draw-ritual::before,
.reading-draw-ritual::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.reading-draw-ritual::before {
  inset: -32% -10% auto auto;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--reader-accent) 26%, transparent), transparent 66%);
  filter: blur(4px);
  animation: readerAuraPulse 5.2s ease-in-out infinite;
}

.reading-draw-ritual::after {
  inset: 0;
  background:
    linear-gradient(120deg, transparent 12%, rgba(244, 240, 232, 0.08) 48%, transparent 72%),
    radial-gradient(circle at 70% 40%, rgba(244, 240, 232, 0.08), transparent 34%);
  opacity: 0.75;
  transform: translateX(-35%);
  animation: readerRitualSweep 2.6s ease-in-out infinite;
}

.reading-draw-ritual[hidden] {
  display: none;
}

.reading-draw-visual,
.reading-draw-copy,
.reading-draw-question,
.reading-draw-dialogue,
.reading-draw-handoff,
.reading-draw-details,
.reading-draw-meta,
.reading-draw-steps,
.reading-draw-selected {
  position: relative;
  z-index: 1;
}

.reading-draw-visual {
  display: grid;
  min-width: 0;
  gap: 10px;
  align-content: center;
}

.reading-draw-avatar {
  width: 56px;
  height: 56px;
  justify-self: center;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 58%, rgba(217, 183, 96, 0.28));
  border-radius: 50%;
  object-fit: cover;
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--reader-glow) 50%, transparent),
    0 14px 30px rgba(0, 0, 0, 0.28);
}

.reading-draw-deck {
  position: relative;
  z-index: 1;
  min-height: 136px;
}

.reading-draw-deck::before {
  position: absolute;
  inset: 38px 16% auto;
  height: 62px;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--reader-accent) 34%, transparent), transparent 72%);
  filter: blur(14px);
  animation: readerAuraPulse 3.8s ease-in-out infinite;
  pointer-events: none;
}

.reading-draw-deck span {
  position: absolute;
  top: 8px;
  left: calc(50% - 42px);
  width: 84px;
  aspect-ratio: 2 / 3;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 62%, rgba(217, 183, 96, 0.34));
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(217, 183, 96, 0.18), rgba(100, 182, 165, 0.16)),
    url("/assets/cards/back.svg") center / cover;
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.32);
  transform-origin: 50% 120%;
  animation: readingShuffle 1.25s ease-in-out infinite;
}

.reading-draw-deck span:nth-child(1) {
  transform: translateX(-62px) rotate(-17deg);
  animation-delay: 0ms;
}

.reading-draw-deck span:nth-child(2) {
  transform: translateX(-31px) rotate(-8deg);
  animation-delay: 110ms;
}

.reading-draw-deck span:nth-child(3) {
  transform: rotate(0deg);
  animation-delay: 220ms;
}

.reading-draw-deck span:nth-child(4) {
  transform: translateX(31px) rotate(8deg);
  animation-delay: 330ms;
}

.reading-draw-deck span:nth-child(5) {
  transform: translateX(62px) rotate(17deg);
  animation-delay: 440ms;
}

.reading-draw-copy {
  display: grid;
  min-width: 0;
  gap: 10px;
}

.reading-draw-copy > p {
  margin: 0 0 8px;
  color: var(--reader-accent);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.reading-draw-copy > strong {
  display: block;
  color: #fff6de;
  font-size: 1.1rem;
  line-height: 1.55;
}

.reading-draw-question {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid rgba(244, 240, 232, 0.12);
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.42);
}

.reading-draw-question small,
.reading-draw-selected > small {
  color: rgba(244, 240, 232, 0.6);
  font-size: 0.72rem;
  font-weight: 850;
}

.reading-draw-question span {
  color: rgba(255, 248, 232, 0.92);
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.reading-draw-details {
  overflow: hidden;
  border: 1px solid rgba(244, 240, 232, 0.12);
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.46);
}

.reading-draw-details > summary {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 9px 36px 9px 11px;
  color: rgba(244, 240, 232, 0.76);
  cursor: pointer;
  list-style: none;
}

.reading-draw-details > summary::-webkit-details-marker {
  display: none;
}

.reading-draw-details > summary::after {
  position: absolute;
  right: 13px;
  width: 8px;
  height: 8px;
  content: "";
  border-right: 2px solid color-mix(in srgb, var(--reader-accent) 78%, #fff8e8);
  border-bottom: 2px solid color-mix(in srgb, var(--reader-accent) 78%, #fff8e8);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 160ms ease;
}

.reading-draw-details[open] > summary::after {
  transform: translateY(2px) rotate(225deg);
}

.reading-draw-details > summary span {
  color: #fff8e8;
  font-size: 0.82rem;
  font-weight: 900;
}

.reading-draw-details > summary strong {
  overflow: hidden;
  color: color-mix(in srgb, var(--reader-accent) 76%, rgba(244, 240, 232, 0.78));
  font-size: 0.74rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-draw-details > summary:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--reader-accent) 72%, #fff8e8);
  outline-offset: -3px;
}

.reading-draw-details-content {
  display: grid;
  gap: 10px;
  padding: 0 10px 10px;
}

.reading-draw-dialogue {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 24%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--reader-glow) 42%, rgba(16, 20, 18, 0.42)), rgba(16, 20, 18, 0.52)),
    rgba(16, 20, 18, 0.42);
}

.reading-draw-bubble {
  display: grid;
  gap: 3px;
  max-width: min(92%, 420px);
  padding: 8px 9px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  text-align: left;
  background: rgba(244, 240, 232, 0.06);
}

.reading-draw-bubble.user {
  justify-self: end;
  border-color: rgba(217, 183, 96, 0.22);
  background: rgba(217, 183, 96, 0.08);
}

.reading-draw-bubble.reader {
  justify-self: start;
  border-color: color-mix(in srgb, var(--reader-accent) 34%, rgba(244, 240, 232, 0.12));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 44%, rgba(16, 20, 18, 0.46)), rgba(16, 20, 18, 0.56)),
    rgba(16, 20, 18, 0.48);
}

.reading-draw-bubble.system {
  justify-self: center;
  width: min(100%, 380px);
  color: rgba(244, 240, 232, 0.72);
  text-align: center;
}

.reading-draw-bubble small {
  color: rgba(244, 240, 232, 0.58);
  font-size: 0.68rem;
  font-weight: 850;
}

.reading-draw-bubble p {
  margin: 0;
  color: rgba(255, 248, 232, 0.9);
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.reading-draw-handoff {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 30%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 38%, rgba(16, 20, 18, 0.44)), rgba(16, 20, 18, 0.54)),
    rgba(16, 20, 18, 0.46);
}

.reading-draw-handoff-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.reading-draw-handoff-copy span {
  color: color-mix(in srgb, var(--reader-accent) 74%, rgba(244, 240, 232, 0.72));
  font-size: 0.68rem;
  font-weight: 900;
}

.reading-draw-handoff-copy strong {
  color: #fff8e8;
  font-size: 0.86rem;
  line-height: 1.25;
}

.reading-draw-handoff-copy p {
  margin: 0;
  color: rgba(244, 240, 232, 0.7);
  font-size: 0.76rem;
  line-height: 1.4;
}

.reading-draw-handoff-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.72fr 1fr;
  gap: 6px;
}

.reading-draw-handoff-grid span {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 7px 8px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(244, 240, 232, 0.05);
}

.reading-draw-handoff-grid small {
  overflow: hidden;
  color: rgba(244, 240, 232, 0.54);
  font-size: 0.64rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-draw-handoff-grid strong {
  overflow: hidden;
  color: color-mix(in srgb, var(--reader-accent) 68%, rgba(244, 240, 232, 0.88));
  font-size: 0.68rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-draw-meta,
.reading-draw-steps,
.reading-draw-selected > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.reading-draw-meta span {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid rgba(244, 240, 232, 0.11);
  border-radius: 999px;
  color: rgba(244, 240, 232, 0.72);
  font-size: 0.72rem;
  font-weight: 850;
  background: rgba(16, 20, 18, 0.46);
}

.reading-draw-steps span,
.reading-draw-selected span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 7px;
  min-width: min(100%, 132px);
  padding: 8px 9px;
  border: 1px solid rgba(244, 240, 232, 0.12);
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.46);
}

.reading-draw-steps em,
.reading-draw-selected em {
  grid-row: span 2;
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 900;
  background: var(--reader-accent);
}

.reading-draw-steps strong,
.reading-draw-selected strong {
  color: #fff8e8;
  font-size: 0.78rem;
  line-height: 1.25;
}

.reading-draw-selected small {
  color: rgba(244, 240, 232, 0.56);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.2;
}

.reading-draw-steps span.active {
  border-color: color-mix(in srgb, var(--reader-accent) 54%, rgba(217, 183, 96, 0.24));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--reader-accent) 16%, transparent);
  animation: readingDrawStepPulse 1.6s ease-in-out infinite;
}

.reading-draw-steps span.done {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 60%, rgba(16, 20, 18, 0.42)), rgba(16, 20, 18, 0.5)),
    rgba(16, 20, 18, 0.44);
}

.reading-draw-steps span.upcoming {
  opacity: 0.72;
}

.reading-draw-selected {
  display: grid;
  gap: 7px;
}

.reading-draw-selected span.chosen {
  border-color: rgba(217, 183, 96, 0.2);
}

.reading-empty {
  padding: 18px;
  color: var(--muted);
  text-align: center;
}

.reading-history {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.reading-history[hidden] {
  display: none;
}

.reading-history-heading {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.reading-history-heading h3 {
  margin: 0;
  font-size: 1rem;
}

.reading-history-heading small {
  color: var(--muted);
  font-size: 0.78rem;
}

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

.reading-history-item {
  display: grid;
  gap: 4px;
  width: 100%;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  color: var(--text);
  text-align: left;
  background: rgba(16, 20, 18, 0.5);
  cursor: pointer;
}

.reading-history-item.active {
  border-color: rgba(100, 182, 165, 0.72);
  background: rgba(100, 182, 165, 0.12);
}

.reading-history-item strong {
  overflow: hidden;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-history-item small {
  color: var(--muted);
  font-size: 0.78rem;
}

.history-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 16px 0 12px;
}

.history-toolbar label {
  display: grid;
  gap: 6px;
  min-width: min(100%, 220px);
  color: var(--muted);
  font-size: 0.86rem;
}

.history-toolbar select {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: rgba(16, 20, 18, 0.78);
}

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

.history-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(24, 32, 29, 0.7);
}

.history-card.active {
  border-color: rgba(100, 182, 165, 0.64);
  background: rgba(100, 182, 165, 0.1);
}

.history-card-header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.history-category {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 5px;
  padding: 2px 7px;
  border: 1px solid rgba(217, 183, 96, 0.28);
  border-radius: 999px;
  color: var(--gold);
  font-size: 0.76rem;
}

.history-card h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
}

.history-open-button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 10px;
}

.history-meta,
.history-preview,
.history-empty {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.history-card-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.history-card-strip span {
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 999px;
  color: rgba(244, 240, 232, 0.78);
  background: rgba(16, 20, 18, 0.42);
  font-size: 0.8rem;
}

.history-preview {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.history-feedback-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.history-feedback-button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(244, 240, 232, 0.12);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(16, 20, 18, 0.48);
  cursor: pointer;
}

.history-feedback-button.active {
  color: var(--ink);
  border-color: rgba(217, 183, 96, 0.72);
  background: var(--gold);
}

.reading-result {
  display: grid;
  gap: 18px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 15% 0, rgba(217, 183, 96, 0.14), transparent 34%),
    radial-gradient(circle at 100% 20%, rgba(213, 84, 123, 0.12), transparent 36%),
    linear-gradient(160deg, rgba(34, 40, 36, 0.94), rgba(16, 20, 18, 0.98));
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.58);
}

.reading-result-focus-target {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.reading-result[data-reader] {
  border-color: color-mix(in srgb, var(--reader-accent) 44%, rgba(217, 183, 96, 0.24));
  background:
    linear-gradient(160deg, rgba(34, 40, 36, 0.82), rgba(16, 20, 18, 0.97)),
    linear-gradient(120deg, var(--reader-glow), transparent 54%);
}

.reading-result > *,
.reading-answer > *,
.reading-card-list,
.reading-card-insights,
.reading-structured,
.reading-structured-grid,
.reading-followup-suggestions {
  min-width: 0;
  max-width: 100%;
}

.reading-result::before {
  width: 100%;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(217, 183, 96, 0.72), rgba(100, 182, 165, 0.56), transparent);
}

.reading-result-heading {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.reading-result-heading > div {
  min-width: 0;
}

.reading-result-heading h3 {
  margin: 3px 0 0;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.reading-result[data-conversation-origin="visible"] .reading-result-heading h3 {
  font-size: 1rem;
}

.reading-result[data-conversation-origin="visible"] .reading-result-heading,
.reading-result[data-conversation-origin="visible"]::before {
  display: none;
}

.reading-result-heading > span {
  flex: 0 0 auto;
  border: 1px solid rgba(217, 183, 96, 0.4);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 800;
}

.reading-generation-note {
  display: grid;
  gap: 4px;
  border-left: 3px solid color-mix(in srgb, var(--reader-accent) 72%, var(--gold));
  padding: 9px 11px;
  background: color-mix(in srgb, var(--reader-glow) 20%, rgba(16, 20, 18, 0.72));
  color: var(--text-soft);
}

.reading-generation-note strong {
  color: var(--text-main);
  font-size: 0.82rem;
  line-height: 1.4;
}

.reading-generation-note p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.55;
}

.reading-result-support {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 18%, rgba(244, 240, 232, 0.08));
  border-radius: 8px;
  background:
    linear-gradient(160deg, rgba(16, 20, 18, 0.48), color-mix(in srgb, var(--reader-glow) 22%, rgba(16, 20, 18, 0.34))),
    rgba(16, 20, 18, 0.3);
}

.reading-result-support-heading {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  align-items: center;
  min-width: 0;
  min-height: 58px;
  padding: 10px 42px 10px 12px;
  cursor: pointer;
  list-style: none;
}

.reading-result-support-heading::-webkit-details-marker {
  display: none;
}

.reading-result-support-heading::after {
  position: absolute;
  right: 14px;
  width: 9px;
  height: 9px;
  content: "";
  border-right: 2px solid color-mix(in srgb, var(--reader-accent) 78%, #fff8e8);
  border-bottom: 2px solid color-mix(in srgb, var(--reader-accent) 78%, #fff8e8);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 160ms ease;
}

.reading-result-support[open] > .reading-result-support-heading::after {
  transform: translateY(2px) rotate(225deg);
}

.reading-result-support-heading span {
  color: color-mix(in srgb, var(--reader-accent) 66%, rgba(244, 240, 232, 0.62));
  font-size: 0.72rem;
  font-weight: 900;
}

.reading-result-support-heading strong {
  grid-column: 1;
  color: rgba(244, 240, 232, 0.82);
  font-size: 0.92rem;
  line-height: 1.3;
}

.reading-result-support-heading small {
  grid-column: 2;
  grid-row: 1 / span 2;
  max-width: 260px;
  color: rgba(244, 240, 232, 0.58);
  font-size: 0.72rem;
  line-height: 1.35;
  text-align: right;
}

.reading-result-support-body {
  display: grid;
  gap: 12px;
  padding: 0 12px 12px;
}

.reading-conversation {
  display: grid;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.reading-conversation-presence {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 2px 2px 10px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--reader-accent) 24%, rgba(244, 240, 232, 0.08));
  border-radius: 0;
  background: transparent;
}

.reading-presence-avatar {
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 58%, rgba(244, 240, 232, 0.12));
  border-radius: 50%;
  object-fit: cover;
}

.reading-conversation-presence > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.reading-presence-status {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: color-mix(in srgb, var(--reader-accent) 76%, #fff8e8);
  font-size: 0.72rem;
  font-weight: 900;
}

.reading-presence-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 10px rgba(100, 182, 165, 0.72);
  animation: readingPresencePulse 1.8s ease-in-out infinite;
}

.reading-conversation-presence strong {
  color: #fff8e8;
  font-size: 0.9rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.reading-conversation-presence small,
.reading-conversation-presence em {
  color: rgba(244, 240, 232, 0.62);
  font-size: 0.74rem;
  font-style: normal;
  line-height: 1.35;
}

.reading-conversation-presence em {
  max-width: 230px;
  text-align: right;
}

.reading-conversation-handoff {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 30%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 50%, rgba(16, 20, 18, 0.5)), rgba(16, 20, 18, 0.44)),
    rgba(16, 20, 18, 0.48);
}

.reading-conversation-handoff[data-handoff-cost-tone="paid"] {
  border-color: color-mix(in srgb, var(--reader-accent) 38%, rgba(217, 183, 96, 0.24));
  background:
    linear-gradient(135deg, rgba(217, 183, 96, 0.12), color-mix(in srgb, var(--reader-glow) 42%, rgba(16, 20, 18, 0.5))),
    rgba(16, 20, 18, 0.5);
}

.reading-conversation-handoff[data-handoff-cost-tone="blocked"] {
  border-color: rgba(244, 122, 122, 0.34);
}

.reading-conversation-handoff-copy {
  display: grid;
  gap: 3px;
}

.reading-conversation-handoff-copy span {
  color: color-mix(in srgb, var(--reader-accent) 78%, #fff8e8);
  font-size: 0.72rem;
  font-weight: 900;
}

.reading-conversation-handoff-copy strong {
  color: #fff8e8;
  font-size: 0.92rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.reading-conversation-handoff-copy p {
  margin: 0;
  color: rgba(255, 248, 232, 0.72);
  font-size: 0.78rem;
  line-height: 1.45;
}

.reading-conversation-draw-receipt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 0.9fr);
  gap: 8px;
  align-items: stretch;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 28%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 38%, rgba(16, 20, 18, 0.42)), rgba(16, 20, 18, 0.48)),
    rgba(244, 240, 232, 0.04);
}

.reading-conversation-draw-receipt-copy {
  display: grid;
  gap: 3px;
  align-content: start;
  min-width: 0;
}

.reading-conversation-draw-receipt-copy span {
  color: color-mix(in srgb, var(--reader-accent) 74%, rgba(244, 240, 232, 0.72));
  font-size: 0.68rem;
  font-weight: 900;
}

.reading-conversation-draw-receipt-copy strong {
  color: rgba(255, 248, 232, 0.88);
  font-size: 0.82rem;
  line-height: 1.26;
}

.reading-conversation-draw-receipt-copy p {
  margin: 0;
  color: rgba(244, 240, 232, 0.62);
  font-size: 0.74rem;
  line-height: 1.38;
}

.reading-conversation-draw-receipt-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.reading-conversation-draw-receipt-grid small {
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(244, 240, 232, 0.05);
}

.reading-conversation-draw-receipt-grid em,
.reading-conversation-draw-receipt-grid strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-conversation-draw-receipt-grid em {
  color: rgba(244, 240, 232, 0.48);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
}

.reading-conversation-draw-receipt-grid strong {
  margin-top: 2px;
  color: rgba(255, 248, 232, 0.78);
  font-size: 0.66rem;
  line-height: 1.2;
}

.reading-conversation-handoff-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) minmax(0, 1.12fr);
  gap: 7px;
}

.reading-conversation-handoff-grid small {
  display: grid;
  min-width: 0;
  gap: 4px;
  padding: 8px 9px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(244, 240, 232, 0.045);
}

.reading-conversation-handoff-grid em {
  color: rgba(244, 240, 232, 0.54);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 900;
}

.reading-conversation-handoff-grid strong {
  overflow: hidden;
  color: rgba(255, 248, 232, 0.86);
  font-size: 0.72rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-conversation-head {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  color: rgba(244, 240, 232, 0.68);
  font-size: 0.75rem;
  font-weight: 900;
}

.reading-conversation-head span {
  color: color-mix(in srgb, var(--reader-accent) 78%, #fff8e8);
}

.reading-conversation-head strong {
  color: rgba(244, 240, 232, 0.62);
  font-size: 0.72rem;
}

.reading-conversation[data-result-layout="answer_first"] .reading-conversation-head {
  display: none;
}

.reading-conversation-details,
.reading-result-more-paths {
  border: 1px solid color-mix(in srgb, var(--reader-accent) 28%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 32%, rgba(16, 20, 18, 0.46)), rgba(16, 20, 18, 0.58)),
    rgba(16, 20, 18, 0.48);
}

.reading-conversation-details {
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--reader-accent) 24%, rgba(244, 240, 232, 0.08));
  border-radius: 0;
  background: transparent;
}

.reading-conversation-details summary {
  padding-inline: 2px;
}

.reading-conversation-details summary,
.reading-result-more-paths summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  align-items: center;
  min-height: 58px;
  padding: 9px 10px;
  cursor: pointer;
  list-style: none;
}

.reading-conversation-details summary::-webkit-details-marker,
.reading-result-more-paths summary::-webkit-details-marker {
  display: none;
}

.reading-conversation-details summary::after,
.reading-result-more-paths summary::after {
  grid-column: 2;
  grid-row: 1 / span 4;
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 38%, rgba(217, 183, 96, 0.18));
  border-radius: 50%;
  content: "+";
  color: color-mix(in srgb, var(--reader-accent) 78%, var(--gold));
  font-size: 1rem;
  font-weight: 900;
}

.reading-conversation-details[open] summary::after,
.reading-result-more-paths[open] summary::after {
  content: "-";
}

.reading-conversation-details summary span,
.reading-result-more-paths summary span {
  color: color-mix(in srgb, var(--reader-accent) 72%, rgba(244, 240, 232, 0.68));
  font-size: 0.68rem;
  font-weight: 900;
}

.reading-conversation-details summary strong,
.reading-result-more-paths summary strong {
  color: #fff8e8;
  font-size: 0.86rem;
  line-height: 1.28;
}

.reading-conversation-details summary small,
.reading-result-more-paths summary small {
  color: rgba(244, 240, 232, 0.62);
  font-size: 0.72rem;
  line-height: 1.35;
}

.reading-conversation-details summary em,
.reading-result-more-paths summary em {
  width: fit-content;
  color: rgba(244, 240, 232, 0.54);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 900;
}

.reading-result-more-paths summary em {
  display: none;
}

.reading-conversation-details-body,
.reading-result-more-paths-body {
  display: grid;
  gap: 8px;
  padding: 0 10px 10px;
}

.reading-conversation-details-body .reading-chat-bubble.next {
  width: 100%;
}

.reading-conversation-record {
  display: grid;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--reader-accent) 22%, rgba(244, 240, 232, 0.08));
}

.reading-conversation-record-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  align-items: end;
}

.reading-conversation-record-heading span {
  color: color-mix(in srgb, var(--reader-accent) 72%, rgba(244, 240, 232, 0.68));
  font-size: 0.68rem;
  font-weight: 900;
}

.reading-conversation-record-heading strong {
  grid-column: 1;
  color: #fff8e8;
  font-size: 0.86rem;
  line-height: 1.28;
}

.reading-conversation-record-heading small {
  grid-column: 1;
  color: rgba(244, 240, 232, 0.62);
  font-size: 0.72rem;
  line-height: 1.35;
}

.reading-conversation-record-heading em {
  grid-column: 2;
  grid-row: 1 / span 3;
  color: rgba(244, 240, 232, 0.54);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 900;
}

.reading-conversation-record .reading-conversation-details-body {
  padding: 0;
}

.reading-conversation-list,
.reading-message-list,
#reading-message-list {
  display: grid;
  gap: 10px;
}

.reading-chat-bubble {
  display: grid;
  gap: 5px;
  width: min(82%, 620px);
  padding: 11px 13px;
  border: 1px solid rgba(244, 240, 232, 0.12);
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.5);
}

.reading-chat-bubble.user {
  justify-self: end;
  border-color: rgba(100, 182, 165, 0.3);
  background:
    linear-gradient(135deg, rgba(100, 182, 165, 0.16), rgba(16, 20, 18, 0.48)),
    rgba(16, 20, 18, 0.56);
}

.reading-conversation[data-conversation-continuity="question_visible"] .reading-chat-bubble.user.origin {
  gap: 3px;
  width: min(86%, 580px);
  padding: 7px 11px;
  border-color: color-mix(in srgb, var(--reader-accent) 26%, rgba(100, 182, 165, 0.16));
  background: color-mix(in srgb, var(--reader-glow) 34%, rgba(16, 20, 18, 0.56));
}

.reading-chat-bubble.user.origin p {
  display: inline;
  line-height: 1.38;
}

.reading-chat-bubble.user.origin .reading-chat-content {
  display: block;
}

.reading-chat-bubble.user.origin .reading-chat-content > small {
  display: inline;
  margin-right: 6px;
  color: color-mix(in srgb, var(--reader-accent) 76%, #fff8e8);
}

.reading-chat-bubble.reader {
  grid-template-columns: 36px minmax(0, 1fr);
  justify-self: start;
  border-color: color-mix(in srgb, var(--reader-accent) 38%, rgba(244, 240, 232, 0.1));
  background:
    linear-gradient(135deg, var(--reader-glow), rgba(16, 20, 18, 0.48)),
    rgba(16, 20, 18, 0.52);
}

.reading-chat-bubble.draw {
  border-style: dashed;
}

.reading-chat-bubble.primary {
  width: min(94%, 680px);
  padding: 14px 15px;
  border-color: color-mix(in srgb, var(--reader-accent) 48%, rgba(244, 240, 232, 0.12));
  background: color-mix(in srgb, var(--reader-glow) 42%, rgba(16, 20, 18, 0.7));
  box-shadow: none;
}

.reading-chat-bubble.next {
  background:
    linear-gradient(135deg, rgba(217, 183, 96, 0.12), rgba(16, 20, 18, 0.52)),
    rgba(16, 20, 18, 0.52);
}

.reading-chat-bubble.continue {
  width: min(88%, 640px);
  border-color: color-mix(in srgb, var(--reader-accent) 52%, rgba(217, 183, 96, 0.18));
  background:
    linear-gradient(135deg, rgba(217, 183, 96, 0.14), color-mix(in srgb, var(--reader-glow) 38%, rgba(16, 20, 18, 0.54))),
    rgba(16, 20, 18, 0.54);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--reader-glow) 34%, transparent);
}

.reading-chat-bubble.pending {
  border-style: dashed;
  opacity: 0.78;
}

.reading-chat-bubble.reader.pending p::after {
  display: inline-block;
  width: 1.6em;
  content: "...";
  letter-spacing: 1px;
  animation: readerTypingDots 1.2s steps(3, end) infinite;
}

.reading-chat-avatar {
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 54%, rgba(244, 240, 232, 0.12));
  border-radius: 50%;
  object-fit: cover;
}

.reading-chat-content {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.reading-chat-bubble.primary .reading-chat-content > small {
  display: none;
}

.reading-chat-bubble small,
.reading-chat-bubble strong {
  color: var(--reader-accent);
  font-size: 0.74rem;
  font-weight: 900;
}

.reading-chat-bubble p {
  margin: 0;
  color: rgba(255, 248, 232, 0.9);
  font-size: 0.92rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.reading-answer-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.reading-chat-segment-list {
  display: grid;
  gap: 0;
  padding-top: 0;
}

.reading-chat-segment {
  display: grid;
  gap: 4px;
  padding: 10px 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--reader-accent) 22%, rgba(244, 240, 232, 0.08));
  border-radius: 0;
  background: transparent;
}

.reading-chat-segment span {
  color: color-mix(in srgb, var(--reader-accent) 82%, #fff8e8);
  font-size: 0.72rem;
  font-weight: 900;
}

.reading-chat-segment p {
  color: rgba(255, 248, 232, 0.84);
  font-size: 0.86rem;
  line-height: 1.5;
}

.reading-chat-segment.answer {
  padding-top: 0;
  border-top: 0;
  background: transparent;
}

.reading-chat-segment.answer p {
  color: #fffaf1;
  font-size: 1rem;
  font-weight: 760;
  line-height: 1.5;
}

.reading-chat-segment.emotion p {
  color: rgba(255, 248, 232, 0.7);
}

.reading-chat-segment.action {
  margin-top: 3px;
  padding: 10px 11px;
  border-top: 0;
  border-left: 3px solid color-mix(in srgb, var(--reader-accent) 72%, var(--gold));
  border-radius: 0 6px 6px 0;
  background: color-mix(in srgb, var(--reader-glow) 34%, rgba(244, 240, 232, 0.035));
}

.reading-result-feedback {
  display: grid;
  grid-template-columns: minmax(78px, 0.8fr) minmax(0, 1.35fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin-top: 4px;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--reader-accent) 28%, rgba(244, 240, 232, 0.08));
}

.reading-result-feedback-heading {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.reading-result-feedback-heading strong {
  color: #fff8e8;
  font-size: 0.78rem;
}

.reading-result-feedback-heading small {
  display: none;
}

.reading-result-feedback-sentiments {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.reading-result-feedback button {
  min-width: 0;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 36%, rgba(244, 240, 232, 0.12));
  border-radius: 6px;
  color: rgba(255, 248, 232, 0.86);
  background: rgba(10, 14, 12, 0.34);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.2;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.reading-result-feedback button:hover,
.reading-result-feedback button:focus-visible {
  border-color: color-mix(in srgb, var(--reader-accent) 74%, rgba(244, 240, 232, 0.18));
  background: color-mix(in srgb, var(--reader-glow) 74%, rgba(10, 14, 12, 0.42));
}

.reading-result-feedback button.selected {
  border-color: color-mix(in srgb, var(--reader-accent) 82%, #fff8e8);
  color: #111613;
  background: color-mix(in srgb, var(--reader-accent) 84%, #fff8e8);
}

.reading-result-feedback button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.reading-result-feedback-reasons {
  display: grid;
  grid-column: 1 / -1;
  gap: 5px;
}

.reading-result-feedback-reasons > span {
  color: color-mix(in srgb, var(--reader-accent) 76%, rgba(244, 240, 232, 0.7));
  font-size: 0.66rem;
  font-weight: 850;
}

.reading-result-feedback-reasons > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.reading-result-feedback-reasons button {
  min-height: 30px;
  flex: 1 1 92px;
  padding: 5px 7px;
  font-size: 0.67rem;
}

.reading-result-feedback-status {
  grid-column: 1 / -1;
  color: rgba(244, 240, 232, 0.56) !important;
  font-size: 0.63rem !important;
  font-weight: 650 !important;
  line-height: 1.35;
}

.reading-result-feedback[data-feedback-state="idle"][data-feedback-notice="none"] .reading-result-feedback-status {
  display: none;
}

.reading-result-feedback.repaired {
  display: block;
  padding-top: 8px;
}

.reading-result-feedback.repaired .reading-result-feedback-heading {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 7px;
}

.reading-result-feedback.repaired .reading-result-feedback-heading small {
  display: block;
  color: rgba(244, 240, 232, 0.56);
  font-size: 0.61rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.reading-result-feedback-status.error {
  color: #f2a6a0 !important;
}

.reading-followup-feedback {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--reader-accent) 24%, rgba(244, 240, 232, 0.08));
}

.reading-followup-feedback-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.reading-followup-feedback-row > span {
  color: rgba(244, 240, 232, 0.58);
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.3;
}

.reading-followup-feedback-row > div,
.reading-followup-feedback-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.reading-followup-feedback button {
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 32%, rgba(244, 240, 232, 0.1));
  border-radius: 6px;
  color: rgba(255, 248, 232, 0.78);
  background: rgba(8, 12, 10, 0.32);
  font: inherit;
  font-size: 0.65rem;
  font-weight: 820;
  line-height: 1.2;
  cursor: pointer;
}

.reading-followup-feedback button:hover,
.reading-followup-feedback button:focus-visible {
  border-color: color-mix(in srgb, var(--reader-accent) 72%, rgba(244, 240, 232, 0.16));
}

.reading-followup-feedback button.selected {
  border-color: color-mix(in srgb, var(--reader-accent) 82%, #fff8e8);
  color: #111613;
  background: color-mix(in srgb, var(--reader-accent) 84%, #fff8e8);
}

.reading-followup-feedback button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.reading-followup-feedback-reasons button {
  flex: 1 1 104px;
}

.reading-followup-feedback-status {
  color: rgba(244, 240, 232, 0.52) !important;
  font-size: 0.61rem !important;
  font-weight: 650 !important;
  line-height: 1.35;
}

.reading-followup-feedback-status.error {
  color: #f2a6a0 !important;
}

.reading-repair-offer {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--reader-accent) 22%, rgba(244, 240, 232, 0.08));
}

.reading-repair-offer > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.reading-repair-offer strong {
  color: #fff8e8;
  font-size: 0.74rem;
}

.reading-repair-offer small {
  color: rgba(244, 240, 232, 0.62);
  font-size: 0.64rem;
  font-weight: 650;
  line-height: 1.4;
}

.reading-repair-offer > button {
  min-height: 36px;
  border-color: color-mix(in srgb, var(--reader-accent) 64%, rgba(244, 240, 232, 0.16));
  color: #111613;
  background: color-mix(in srgb, var(--reader-accent) 82%, #fff8e8);
}

.reading-repair-status {
  grid-column: 1 / -1;
  color: rgba(244, 240, 232, 0.58) !important;
  font-size: 0.63rem !important;
  line-height: 1.4;
}

.reading-repair-status.error {
  color: #f2a6a0 !important;
}

.reading-chat-bubble.repair {
  width: min(86%, 640px);
  border-color: color-mix(in srgb, var(--reader-accent) 58%, rgba(244, 240, 232, 0.14));
  border-left-width: 3px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 58%, rgba(16, 20, 18, 0.52)), rgba(16, 20, 18, 0.48)),
    rgba(16, 20, 18, 0.56);
}

.reading-chat-bubble.repair .reading-chat-content > p {
  color: rgba(255, 248, 232, 0.94);
}

.reading-repair-outcome {
  display: grid;
  gap: 6px;
  margin-top: 4px;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--reader-accent) 28%, rgba(244, 240, 232, 0.08));
}

.reading-repair-outcome > strong {
  color: rgba(255, 248, 232, 0.88);
  font-size: 0.72rem;
}

.reading-repair-outcome > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.reading-repair-outcome button {
  min-width: 0;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 38%, rgba(244, 240, 232, 0.12));
  border-radius: 6px;
  color: rgba(255, 248, 232, 0.86);
  background: rgba(10, 14, 12, 0.34);
  font: inherit;
  font-size: 0.69rem;
  font-weight: 850;
  line-height: 1.2;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.reading-repair-outcome button:hover,
.reading-repair-outcome button:focus-visible {
  border-color: color-mix(in srgb, var(--reader-accent) 74%, rgba(244, 240, 232, 0.18));
  background: color-mix(in srgb, var(--reader-glow) 74%, rgba(10, 14, 12, 0.42));
}

.reading-repair-outcome button.selected {
  border-color: color-mix(in srgb, var(--reader-accent) 82%, #fff8e8);
  color: #111613;
  background: color-mix(in srgb, var(--reader-accent) 84%, #fff8e8);
}

.reading-repair-outcome button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.reading-chat-free-answer-receipt {
  display: grid;
  gap: 7px;
  margin-top: 3px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 34%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 46%, rgba(16, 20, 18, 0.48)), rgba(16, 20, 18, 0.46)),
    rgba(16, 20, 18, 0.5);
}

.reading-chat-free-answer-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.reading-chat-free-answer-copy span {
  color: color-mix(in srgb, var(--reader-accent) 78%, rgba(244, 240, 232, 0.72));
  font-size: 0.66rem;
  font-weight: 950;
}

.reading-chat-free-answer-copy strong {
  color: #fff8e8;
  font-size: 0.82rem;
  line-height: 1.24;
}

.reading-chat-free-answer-copy p {
  margin: 0;
  color: rgba(255, 248, 232, 0.72);
  font-size: 0.74rem;
  line-height: 1.42;
}

.reading-chat-free-answer-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.reading-chat-free-answer-items small {
  display: grid;
  min-width: 0;
  gap: 2px;
  min-height: 44px;
  align-content: center;
  padding: 6px 7px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(244, 240, 232, 0.045);
}

.reading-chat-free-answer-items small[data-free-answer-receipt-item="upgrade"] {
  border-color: rgba(217, 183, 96, 0.3);
  background:
    radial-gradient(circle at 0 0, rgba(217, 183, 96, 0.13), transparent 58%),
    rgba(244, 240, 232, 0.05);
}

.reading-chat-free-answer-items em,
.reading-chat-free-answer-items strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-chat-free-answer-items em {
  color: rgba(244, 240, 232, 0.56);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.15;
}

.reading-chat-free-answer-items strong {
  color: rgba(255, 248, 232, 0.86);
  font-size: 0.68rem;
  line-height: 1.18;
}

.reading-chat-card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 2px;
}

.reading-chat-card-chip {
  display: inline-flex;
  max-width: 100%;
  min-height: 26px;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid rgba(217, 183, 96, 0.22);
  border-radius: 999px;
  color: rgba(255, 248, 232, 0.82);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.25;
  background: rgba(217, 183, 96, 0.08);
  overflow-wrap: anywhere;
}

.reading-chat-next-step-bridge {
  display: grid;
  gap: 8px;
  margin-top: 4px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 30%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 54%, rgba(16, 20, 18, 0.48)), rgba(16, 20, 18, 0.46)),
    rgba(16, 20, 18, 0.46);
}

.reading-chat-next-step-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.reading-chat-next-step-copy span {
  color: color-mix(in srgb, var(--reader-accent) 78%, rgba(244, 240, 232, 0.72));
  font-size: 0.68rem;
  font-weight: 950;
}

.reading-chat-next-step-copy strong {
  color: #fff8e8;
  font-size: 0.84rem;
  line-height: 1.28;
}

.reading-chat-next-step-copy p {
  margin: 0;
  color: rgba(255, 248, 232, 0.74);
  font-size: 0.76rem;
  line-height: 1.45;
}

.reading-chat-next-step-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.reading-chat-next-step-items small {
  display: grid;
  min-width: 0;
  gap: 3px;
  min-height: 72px;
  padding: 7px 8px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(244, 240, 232, 0.045);
}

.reading-chat-next-step-items small[data-recommended="true"] {
  border-color: color-mix(in srgb, var(--reader-accent) 50%, rgba(217, 183, 96, 0.22));
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--reader-glow) 62%, transparent), transparent 54%),
    rgba(244, 240, 232, 0.055);
}

.reading-chat-next-step-items em {
  color: color-mix(in srgb, var(--reader-accent) 80%, #fff8e8);
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 950;
  line-height: 1.15;
}

.reading-chat-next-step-items strong {
  color: #fffaf1;
  font-size: 0.72rem;
  line-height: 1.2;
}

.reading-chat-next-step-items span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: rgba(244, 240, 232, 0.64);
  font-size: 0.66rem;
  font-weight: 760;
  line-height: 1.28;
}

.reading-chat-decision-coach {
  display: grid;
  gap: 8px;
  margin-top: 4px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 28%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 48%, rgba(16, 20, 18, 0.48)), rgba(16, 20, 18, 0.46)),
    rgba(16, 20, 18, 0.46);
}

.reading-chat-decision-coach[data-recommended-path="upgrade"] {
  border-color: rgba(217, 183, 96, 0.32);
  background:
    linear-gradient(135deg, rgba(217, 183, 96, 0.12), color-mix(in srgb, var(--reader-glow) 38%, rgba(16, 20, 18, 0.5))),
    rgba(16, 20, 18, 0.48);
}

.reading-chat-decision-coach-copy {
  display: grid;
  gap: 3px;
}

.reading-chat-decision-coach-copy span {
  color: color-mix(in srgb, var(--reader-accent) 76%, rgba(244, 240, 232, 0.7));
  font-size: 0.68rem;
  font-weight: 900;
}

.reading-chat-decision-coach-copy strong {
  color: #fff8e8;
  font-size: 0.82rem;
  line-height: 1.28;
}

.reading-chat-decision-coach-copy p {
  margin: 0;
  color: rgba(255, 248, 232, 0.76);
  font-size: 0.76rem;
  line-height: 1.45;
}

.reading-chat-decision-coach-chips {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(96px, 0.9fr) minmax(110px, 1fr);
  gap: 6px;
}

.reading-chat-decision-coach-chips small {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 7px 8px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(244, 240, 232, 0.045);
}

.reading-chat-decision-coach-chips em {
  color: rgba(244, 240, 232, 0.52);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 900;
}

.reading-chat-decision-coach-chips strong {
  overflow: hidden;
  color: rgba(255, 248, 232, 0.84);
  font-size: 0.7rem;
  line-height: 1.28;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-chat-meta-row,
.reading-chat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 2px;
}

.reading-chat-meta-row span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 3px 7px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 999px;
  color: rgba(244, 240, 232, 0.68);
  font-size: 0.7rem;
  font-weight: 850;
  line-height: 1.2;
  background: rgba(16, 20, 18, 0.4);
}

.reading-chat-quick-replies {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding-top: 5px;
}

.reading-chat-quick-replies > span {
  grid-column: 1 / -1;
  color: rgba(244, 240, 232, 0.62);
  font-size: 0.72rem;
  font-weight: 900;
}

.reading-chat-quick-reply {
  display: grid;
  min-height: 62px;
  gap: 3px;
  align-content: start;
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 24%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  color: var(--text);
  text-align: left;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 36%, rgba(16, 20, 18, 0.42)), rgba(16, 20, 18, 0.5)),
    rgba(16, 20, 18, 0.48);
  cursor: pointer;
}

.reading-chat-quick-reply:hover,
.reading-chat-quick-reply:focus-visible {
  border-color: color-mix(in srgb, var(--reader-accent) 58%, rgba(217, 183, 96, 0.22));
  outline: 2px solid rgba(100, 182, 165, 0.22);
  outline-offset: 2px;
}

.reading-chat-quick-reply strong {
  color: color-mix(in srgb, var(--reader-accent) 78%, #fff8e8);
  font-size: 0.78rem;
  line-height: 1.2;
}

.reading-chat-quick-reply small {
  overflow: hidden;
  color: rgba(244, 240, 232, 0.66);
  font-size: 0.72rem;
  line-height: 1.32;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.reading-chat-action {
  justify-self: start;
  min-height: 32px;
  margin-top: 3px;
  padding: 6px 10px;
  border: 1px solid rgba(217, 183, 96, 0.34);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 900;
  background: var(--gold);
  cursor: pointer;
}

.reading-chat-action strong {
  color: inherit;
  font-size: inherit;
  font-weight: 950;
  line-height: 1.2;
}

.reading-chat-action.with-detail {
  display: grid;
  min-height: 52px;
  max-width: min(100%, 240px);
  gap: 3px;
  align-content: center;
  padding: 8px 10px;
  border-radius: 8px;
  text-align: left;
}

.reading-chat-action.with-detail small {
  color: currentColor;
  font-size: 0.68rem;
  font-weight: 760;
  line-height: 1.28;
  opacity: 0.72;
}

.reading-chat-actions .reading-chat-action {
  margin-top: 0;
}

.reading-chat-action.upgrade {
  border-color: color-mix(in srgb, var(--reader-accent) 48%, rgba(217, 183, 96, 0.36));
  color: #fff8e8;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-accent) 28%, rgba(217, 183, 96, 0.18)), rgba(16, 20, 18, 0.38)),
    rgba(16, 20, 18, 0.42);
}

.reading-chat-action.details {
  border-color: color-mix(in srgb, var(--reader-accent) 42%, rgba(244, 240, 232, 0.16));
  color: color-mix(in srgb, var(--reader-accent) 78%, #fff8e8);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 54%, rgba(16, 20, 18, 0.48)), rgba(16, 20, 18, 0.42)),
    rgba(16, 20, 18, 0.48);
}

.reading-chat-action.commerce {
  color: var(--ink);
  background: linear-gradient(135deg, var(--gold), #ffe08a);
}

.reading-chat-action.telegram {
  border-color: rgba(100, 182, 165, 0.44);
  color: #f8fffc;
  background:
    linear-gradient(135deg, rgba(74, 148, 213, 0.92), rgba(100, 182, 165, 0.9)),
    #2f8fc5;
}

.reading-chat-action.blocked {
  border-color: rgba(215, 124, 115, 0.42);
}

.reading-chat-action.new {
  border-color: rgba(244, 240, 232, 0.14);
  color: rgba(244, 240, 232, 0.78);
  background: rgba(16, 20, 18, 0.34);
}

.reading-chat-action[data-reading-continuation-choice="upgrade"] {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--reader-accent) 16%, transparent);
}

.reading-chat-action:hover,
.reading-chat-action:focus-visible {
  filter: brightness(1.06);
  outline: 2px solid rgba(100, 182, 165, 0.34);
  outline-offset: 2px;
}

.reading-result-ritual {
  --reader-look-x: 0;
  --reader-look-y: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  position: relative;
  overflow: hidden;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 44%, rgba(244, 240, 232, 0.08));
  border-radius: 8px;
  background:
    linear-gradient(135deg, var(--reader-glow), rgba(16, 20, 18, 0.54)),
    rgba(16, 20, 18, 0.5);
}

.reading-result-ritual::before {
  position: absolute;
  inset: -42% auto auto -12%;
  width: 240px;
  height: 240px;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--reader-accent) 22%, transparent), transparent 68%);
  animation: readerAuraPulse 7.2s ease-in-out infinite;
  pointer-events: none;
}

.reading-result-ritual > * {
  position: relative;
  z-index: 1;
}

.reading-result-ritual-reader {
  display: none;
}

.reading-result-ritual p {
  margin: 0;
  color: rgba(244, 240, 232, 0.7);
  line-height: 1.58;
}

.reading-result-ritual-copy {
  display: grid;
  gap: 6px;
  align-content: center;
  min-height: 92px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 28%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 54%, rgba(16, 20, 18, 0.62)), rgba(16, 20, 18, 0.48));
}

.reading-result-ritual-copy strong {
  color: #fff8e8;
}

.reading-result-ritual-copy small {
  color: rgba(244, 240, 232, 0.62);
  line-height: 1.45;
}

.reading-result-ritual-details {
  grid-column: 1 / -1;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 24%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.42);
}

.reading-result-ritual-details > summary {
  position: relative;
  display: grid;
  gap: 3px;
  min-height: 48px;
  padding: 8px 38px 8px 10px;
  cursor: pointer;
  list-style: none;
}

.reading-result-ritual-details > summary::-webkit-details-marker {
  display: none;
}

.reading-result-ritual-details > summary::after {
  position: absolute;
  right: 13px;
  align-self: center;
  width: 8px;
  height: 8px;
  content: "";
  border-right: 2px solid color-mix(in srgb, var(--reader-accent) 78%, #fff8e8);
  border-bottom: 2px solid color-mix(in srgb, var(--reader-accent) 78%, #fff8e8);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 160ms ease;
}

.reading-result-ritual-details[open] > summary::after {
  transform: translateY(2px) rotate(225deg);
}

.reading-result-ritual-details > summary span {
  color: var(--reader-accent);
  font-size: 0.7rem;
  font-weight: 900;
}

.reading-result-ritual-details > summary strong {
  color: rgba(255, 248, 232, 0.88);
  font-size: 0.82rem;
  line-height: 1.28;
}

.reading-result-ritual-details-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0 8px 8px;
}

.reading-result-ritual-details-body .reading-result-core-summary {
  grid-column: 1 / -1;
}

.reading-result-core-summary {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 42%, rgba(244, 240, 232, 0.12));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 68%, rgba(16, 20, 18, 0.64)), rgba(16, 20, 18, 0.52));
}

.reading-result-core-summary small {
  color: var(--reader-accent);
  font-size: 0.74rem;
  font-weight: 900;
}

.reading-result-core-summary strong {
  color: #fff8e8;
  font-size: 1rem;
  line-height: 1.55;
}

.reading-result-v3 {
  display: grid;
  gap: 10px;
}

.reading-result-v3-kicker {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  color: rgba(244, 240, 232, 0.72);
}

.reading-result-v3-kicker span {
  color: var(--reader-accent);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.reading-result-v3-kicker strong {
  color: rgba(255, 248, 232, 0.92);
  font-size: 0.92rem;
}

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

.reading-result-v3-card {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 34%, rgba(244, 240, 232, 0.08));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 66%, rgba(16, 20, 18, 0.72)), rgba(16, 20, 18, 0.58));
}

.reading-result-v3-card.answer {
  border-color: color-mix(in srgb, var(--reader-accent) 58%, rgba(244, 240, 232, 0.14));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--reader-accent) 12%, transparent);
}

.reading-result-v3-card small {
  color: color-mix(in srgb, var(--reader-accent) 78%, var(--gold));
  font-size: 0.74rem;
  font-weight: 900;
}

.reading-result-v3-card strong {
  color: #fff8e8;
  font-size: 1.08rem;
  line-height: 1.55;
}

.reading-result-v3-card p {
  margin: 0;
  color: rgba(244, 240, 232, 0.78);
  font-size: 0.9rem;
  line-height: 1.62;
}

.reading-result-v4 {
  display: grid;
  gap: 10px;
  padding-top: 2px;
}

.reading-result-v4-head {
  display: grid;
  gap: 2px;
}

.reading-result-v4-head strong {
  color: #fff8e8;
  font-size: 0.92rem;
}

.reading-result-v4-head span {
  color: rgba(244, 240, 232, 0.64);
  font-size: 0.78rem;
  line-height: 1.5;
}

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

.reading-result-v4-card {
  min-width: 0;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.45);
}

.reading-result-v4-card[open] {
  border-color: color-mix(in srgb, var(--reader-accent) 46%, rgba(244, 240, 232, 0.12));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 52%, rgba(16, 20, 18, 0.74)), rgba(16, 20, 18, 0.56));
}

.reading-result-v4-card summary {
  display: grid;
  grid-template-columns: minmax(64px, max-content) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 48px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.reading-result-v4-card summary::-webkit-details-marker {
  display: none;
}

.reading-result-v4-card summary::after {
  content: "+";
  justify-self: end;
  color: var(--reader-accent);
  font-weight: 900;
}

.reading-result-v4-card[open] summary::after {
  content: "−";
}

.reading-result-v4-card summary span {
  display: inline-flex;
  justify-content: center;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 42%, transparent);
  border-radius: 999px;
  color: var(--reader-accent);
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}

.reading-result-v4-card summary strong {
  overflow-wrap: anywhere;
  color: rgba(255, 248, 232, 0.9);
  font-size: 0.84rem;
  line-height: 1.35;
}

.reading-result-v4-card p {
  margin: 0;
  padding: 0 12px 12px;
  color: rgba(244, 240, 232, 0.76);
  font-size: 0.86rem;
  line-height: 1.62;
}

.reading-result-ritual-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px;
}

.reading-result-ritual-steps span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 8px;
  align-items: center;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.45);
  opacity: 0;
  animation: readingInsightEnter 420ms ease forwards;
  animation-delay: calc(120ms + var(--ritual-index, 0) * 85ms);
}

.reading-result-ritual-steps em {
  grid-row: span 2;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  background: var(--reader-accent);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 900;
}

.reading-result-ritual-steps strong {
  overflow: hidden;
  color: var(--text);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-result-ritual-steps small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-result.reader-speaking .reading-reader-closing {
  border-left-color: var(--reader-accent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 72%, rgba(16, 20, 18, 0.72)), rgba(16, 20, 18, 0.72));
  animation: readerLineGlow 4.8s ease-in-out infinite;
}

.reading-question-frame {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.36);
}

.reading-question-frame > strong {
  font-size: 0.95rem;
}

.reading-question-frame > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.reading-question-frame span {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: rgba(244, 240, 232, 0.82);
  font-size: 0.9rem;
  line-height: 1.45;
}

.reading-question-frame small {
  color: var(--muted);
  font-size: 0.74rem;
}

.reading-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 14px;
  align-items: stretch;
  overflow: visible;
}

.reading-card-list[data-layout="single"] {
  grid-template-columns: minmax(220px, 330px);
  justify-content: center;
}

.reading-card-list[data-layout="three_line"] {
  grid-template-columns: repeat(3, minmax(160px, 1fr));
}

.reading-card-list[data-layout="cross"] {
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  grid-template-areas:
    ". external ."
    "past core future"
    ". shadow .";
  align-items: center;
}

.reading-card-list[data-layout="cross"] .reading-card[data-position-key="core"] {
  grid-area: core;
}

.reading-card-list[data-layout="cross"] .reading-card[data-position-key="past"] {
  grid-area: past;
}

.reading-card-list[data-layout="cross"] .reading-card[data-position-key="future"] {
  grid-area: future;
}

.reading-card-list[data-layout="cross"] .reading-card[data-position-key="external"] {
  grid-area: external;
}

.reading-card-list[data-layout="cross"] .reading-card[data-position-key="shadow"] {
  grid-area: shadow;
}

.reading-card-list[data-layout="celtic_cross"] {
  grid-template-columns: repeat(5, minmax(106px, 1fr));
  grid-template-areas:
    ". . crowning . outcome"
    "past core crossing future hopes_fears"
    ". . foundation . external"
    ". . self_view . .";
  align-items: center;
}

.reading-card-list[data-layout="celtic_cross"] .reading-card {
  min-height: 286px;
  padding: 10px;
}

.reading-card-list[data-layout="celtic_cross"] .reading-card img {
  width: min(100%, 174px);
}

.reading-card-list[data-layout="celtic_cross"] .reading-card[data-position-key="core"] {
  grid-area: core;
}

.reading-card-list[data-layout="celtic_cross"] .reading-card[data-position-key="crossing"] {
  grid-area: crossing;
}

.reading-card-list[data-layout="celtic_cross"] .reading-card[data-position-key="foundation"] {
  grid-area: foundation;
}

.reading-card-list[data-layout="celtic_cross"] .reading-card[data-position-key="past"] {
  grid-area: past;
}

.reading-card-list[data-layout="celtic_cross"] .reading-card[data-position-key="crowning"] {
  grid-area: crowning;
}

.reading-card-list[data-layout="celtic_cross"] .reading-card[data-position-key="future"] {
  grid-area: future;
}

.reading-card-list[data-layout="celtic_cross"] .reading-card[data-position-key="self_view"] {
  grid-area: self_view;
}

.reading-card-list[data-layout="celtic_cross"] .reading-card[data-position-key="external"] {
  grid-area: external;
}

.reading-card-list[data-layout="celtic_cross"] .reading-card[data-position-key="hopes_fears"] {
  grid-area: hopes_fears;
}

.reading-card-list[data-layout="celtic_cross"] .reading-card[data-position-key="outcome"] {
  grid-area: outcome;
}

.reading-card{position:relative;display:grid;grid-template-rows:auto minmax(96px,1fr);gap:12px;justify-items:center;min-height:332px;padding:12px;border:1px solid rgba(217,183,96,.24);border-radius:8px;background:linear-gradient(180deg,rgba(244,240,232,.06),transparent 22%),rgba(16,20,18,.68);box-shadow:0 16px 34px rgba(0,0,0,.22);transform:translateY(12px) rotateY(18deg);opacity:0;animation:readingCardEnter 520ms ease forwards;animation-delay:calc(var(--card-index,0)*110ms);transition:border-color 180ms ease,box-shadow 180ms ease,transform 180ms ease}
.reading-card:hover,.reading-card:focus-within{z-index:3;border-color:rgba(217,183,96,.88);box-shadow:0 22px 48px rgba(0,0,0,.34),0 0 24px rgba(217,183,96,.2);transform:translateY(-8px) scale(1.06)}
.reading-card img{width:min(100%,218px);aspect-ratio:2/3;border:1px solid rgba(244,240,232,.16);border-radius:8px;object-fit:cover;box-shadow:0 14px 28px rgba(0,0,0,.34)}
.reading-card div{display:grid;gap:6px;width:100%;min-width:0;align-content:start;text-align:center}
.reading-card span,.reading-card small{color:var(--muted);font-size:.78rem}
.reading-card strong{color:#fff8e8;font-size:1rem;line-height:1.25}
.reading-card:focus-visible{outline:2px solid rgba(100,182,165,.68);outline-offset:3px}

.reading-answer {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(217, 183, 96, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(217, 183, 96, 0.1), transparent 44%),
    rgba(16, 20, 18, 0.46);
}

.reading-answer::before {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  content: "";
  border: 1px solid rgba(100, 182, 165, 0.42);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(217, 183, 96, 0.2), transparent 58%);
}

.reading-answer-kicker {
  width: fit-content;
  color: var(--teal);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.reading-answer h3,
.reading-messages h3 {
  margin: 0;
  font-size: 1rem;
}

.reading-card-insights {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.reading-card-insight {
  display: grid;
  grid-template-columns: minmax(138px, 0.22fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid rgba(100, 182, 165, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(160deg, rgba(100, 182, 165, 0.13), rgba(16, 20, 18, 0.48)),
    rgba(100, 182, 165, 0.08);
  opacity: 0;
  animation: readingInsightEnter 420ms ease forwards;
  animation-delay: 180ms;
}

.reading-card-insight:nth-child(2) {
  animation-delay: 260ms;
}

.reading-card-insight:nth-child(3) {
  animation-delay: 340ms;
}

.reading-card-insight:nth-child(4) {
  animation-delay: 420ms;
}

.reading-card-insight:nth-child(5) {
  animation-delay: 500ms;
}

.reading-card-insight-head {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
}

.reading-card-insight-index {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 52%, rgba(244, 240, 232, 0.16));
  border-radius: 50%;
  color: var(--ink);
  background: var(--reader-accent);
  font-size: 0.78rem;
  font-weight: 900;
}

.reading-card-insight-head small,
.reading-card-insight-card span,
.reading-card-insight span {
  color: var(--teal);
  font-size: 0.76rem;
  font-weight: 900;
}

.reading-card-insight-head strong,
.reading-card-insight strong {
  color: #fff8e8;
  font-size: 0.95rem;
  line-height: 1.35;
}

.reading-card-insight-head img {
  width: min(100%, 138px);
  aspect-ratio: 2 / 3;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 42%, rgba(244, 240, 232, 0.16));
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
}

.reading-card-insight-card {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.reading-card-insight-card button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 10px;
}

.reading-card-insight p {
  margin: 0;
  color: rgba(244, 240, 232, 0.82);
  line-height: 1.65;
}

.reading-card-insight-sections {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.reading-card-insight-sections section {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(244, 240, 232, 0.12);
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.38);
}

.reading-card-insight-sections section.position,
.reading-card-insight-sections section.advice,
.reading-card-insight-sections section.reading-card-persona-lens {
  grid-column: 1 / -1;
}

.reading-card-insight-sections section.reading-card-persona-lens {
  border: 1px solid rgba(217, 183, 96, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(217, 183, 96, 0.1), rgba(100, 182, 165, 0.07)),
    rgba(16, 20, 18, 0.34);
}

.reading-card-insight small {
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.55;
}

.reading-structured {
  display: grid;
  gap: 10px;
}

.reading-structured h3 {
  margin: 2px 0 0;
  font-size: 0.96rem;
}

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

.reading-structured-card {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid rgba(217, 183, 96, 0.2);
  border-radius: 8px;
  background: rgba(217, 183, 96, 0.06);
  opacity: 0;
  animation: readingInsightEnter 420ms ease forwards;
  animation-delay: 260ms;
}

.reading-structured-card:nth-child(2) {
  animation-delay: 340ms;
}

.reading-structured-card:nth-child(3) {
  animation-delay: 420ms;
}

.reading-structured-card:nth-child(4) {
  animation-delay: 500ms;
}

.reading-structured-card span {
  color: var(--gold);
  font-size: 0.76rem;
  font-weight: 900;
}

.reading-structured-card p {
  margin: 0;
  color: rgba(244, 240, 232, 0.72);
  line-height: 1.62;
}

.reading-reader-closing {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid rgba(217, 183, 96, 0.72);
  border-radius: 6px;
  color: #fff6de;
  background: rgba(217, 183, 96, 0.08);
  line-height: 1.72;
}

.reading-answer-full {
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.34);
}

.reading-answer-full summary {
  min-height: 46px;
  padding: 12px;
  color: color-mix(in srgb, var(--reader-accent) 78%, #fff8e8);
  font-size: 0.9rem;
  font-weight: 900;
  cursor: pointer;
}

.reading-answer-full[open] {
  border-color: color-mix(in srgb, var(--reader-accent) 34%, rgba(244, 240, 232, 0.12));
}

.reading-answer-full-body {
  display: grid;
  gap: 12px;
  padding: 0 12px 12px;
}

.reading-answer-full-body > p {
  margin: 0;
}

.reading-answer-continuation {
  display: grid;
  gap: 10px;
  margin: 0 12px 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 34%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 58%, rgba(16, 20, 18, 0.6)), rgba(16, 20, 18, 0.54));
}

.reading-answer-continuation span {
  color: color-mix(in srgb, var(--reader-accent) 78%, #fff8e8);
  font-size: 0.72rem;
  font-weight: 900;
}

.reading-answer-continuation strong {
  color: #fff8e8;
  font-size: 0.95rem;
}

.reading-answer-continuation p {
  padding: 0;
  color: rgba(244, 240, 232, 0.76);
  font-size: 0.88rem;
  line-height: 1.65;
}

.reading-answer-continuation-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 8px;
}

.reading-answer-continuation-actions button {
  width: 100%;
  min-height: 42px;
}

.reading-answer p,
.reading-message p {
  margin: 0;
  color: rgba(244, 240, 232, 0.76);
  line-height: 1.85;
  white-space: pre-line;
}

.reading-answer .reading-reader-closing {
  color: #fff6de;
  line-height: 1.72;
}

.reading-followup-guidance {
  margin: -4px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(100, 182, 165, 0.24);
  border-radius: 8px;
  color: rgba(244, 240, 232, 0.74);
  background: rgba(100, 182, 165, 0.07);
  line-height: 1.65;
}

.reading-result-decision-strip {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 42%, rgba(244, 240, 232, 0.12));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 82%, rgba(16, 20, 18, 0.52)), rgba(16, 20, 18, 0.66)),
    rgba(16, 20, 18, 0.58);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.24),
    inset 0 0 0 1px rgba(244, 240, 232, 0.045);
}

.reading-result-decision-head {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  min-width: 0;
}

.reading-result-decision-head span {
  color: color-mix(in srgb, var(--reader-accent) 78%, #fff8e8);
  font-size: 0.72rem;
  font-weight: 900;
}

.reading-result-decision-head strong {
  color: #fffaf1;
  font-size: 0.98rem;
  line-height: 1.3;
}

.reading-result-decision-coach {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 34%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 64%, rgba(16, 20, 18, 0.44)), rgba(16, 20, 18, 0.56)),
    rgba(16, 20, 18, 0.42);
}

.reading-result-decision-avatar {
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 58%, rgba(217, 183, 96, 0.24));
  border-radius: 50%;
  object-fit: cover;
}

.reading-result-decision-coach-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.reading-result-decision-coach-copy span {
  color: color-mix(in srgb, var(--reader-accent) 78%, #fff8e8);
  font-size: 0.7rem;
  font-weight: 900;
}

.reading-result-decision-coach-copy strong {
  color: #fffaf1;
  font-size: 0.9rem;
  line-height: 1.3;
}

.reading-result-decision-coach-copy p {
  margin: 0;
  color: rgba(244, 240, 232, 0.72);
  font-size: 0.78rem;
  line-height: 1.45;
}

.reading-result-decision-coach-chips {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 1fr;
  gap: 6px;
}

.reading-result-decision-coach-chips small {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 7px 8px;
  border: 1px solid rgba(244, 240, 232, 0.09);
  border-radius: 8px;
  background: rgba(244, 240, 232, 0.045);
}

.reading-result-decision-coach-chips em {
  color: rgba(244, 240, 232, 0.52);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 900;
}

.reading-result-decision-coach-chips strong {
  overflow: hidden;
  color: rgba(244, 240, 232, 0.82);
  font-size: 0.72rem;
  line-height: 1.26;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-result-decision-proof {
  display: grid;
  grid-template-columns: minmax(142px, 0.74fr) minmax(0, 1.6fr);
  gap: 10px;
  align-items: stretch;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 30%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(244, 240, 232, 0.05), color-mix(in srgb, var(--reader-glow) 42%, rgba(16, 20, 18, 0.48))),
    rgba(16, 20, 18, 0.42);
}

.reading-result-decision-proof-copy {
  display: grid;
  gap: 4px;
  align-content: center;
  min-width: 0;
}

.reading-result-decision-proof-copy span {
  color: color-mix(in srgb, var(--reader-accent) 76%, rgba(244, 240, 232, 0.66));
  font-size: 0.68rem;
  font-weight: 950;
}

.reading-result-decision-proof-copy strong {
  color: #fffaf1;
  font-size: 0.84rem;
  line-height: 1.32;
}

.reading-result-decision-proof-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.reading-result-decision-proof-items small {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 7px 8px;
  border: 1px solid rgba(244, 240, 232, 0.08);
  border-radius: 8px;
  background: rgba(244, 240, 232, 0.04);
}

.reading-result-decision-proof-items em {
  color: color-mix(in srgb, var(--reader-accent) 74%, rgba(244, 240, 232, 0.62));
  font-size: 0.65rem;
  font-style: normal;
  font-weight: 950;
  line-height: 1.2;
}

.reading-result-decision-proof-items b {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: rgba(244, 240, 232, 0.78);
  font-size: 0.69rem;
  font-weight: 780;
  line-height: 1.3;
}

.reading-result-decision-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.reading-result-decision-strip[data-options="2"] .reading-result-decision-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.reading-result-decision-option {
  display: grid;
  min-height: 134px;
  gap: 5px;
  align-content: start;
  padding: 11px 12px;
  border: 1px solid rgba(244, 240, 232, 0.12);
  border-radius: 8px;
  color: var(--text);
  text-align: left;
  white-space: normal;
  background: rgba(16, 20, 18, 0.48);
  cursor: pointer;
}

.reading-result-decision-option[data-recommended="true"] {
  order: -1;
  border-color: color-mix(in srgb, var(--reader-accent) 64%, rgba(217, 183, 96, 0.34));
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--reader-glow) 78%, transparent), transparent 52%),
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 74%, rgba(217, 183, 96, 0.1)), rgba(16, 20, 18, 0.56)),
    rgba(16, 20, 18, 0.54);
  box-shadow:
    0 12px 30px color-mix(in srgb, var(--reader-glow) 38%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--reader-accent) 14%, transparent);
}

.reading-result-decision-option.ready.upgrade {
  border-color: color-mix(in srgb, var(--reader-accent) 56%, rgba(217, 183, 96, 0.28));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 72%, rgba(217, 183, 96, 0.08)), rgba(16, 20, 18, 0.58)),
    rgba(16, 20, 18, 0.5);
}

.reading-result-decision-option.ready.upgrade[data-recommended="true"] {
  border-color: color-mix(in srgb, var(--reader-accent) 68%, rgba(217, 183, 96, 0.36));
}

.reading-result-decision-option.blocked {
  border-color: rgba(215, 124, 115, 0.44);
  background:
    linear-gradient(135deg, rgba(215, 124, 115, 0.11), rgba(16, 20, 18, 0.58)),
    rgba(16, 20, 18, 0.48);
}

.reading-result-decision-option:hover,
.reading-result-decision-option:focus-visible {
  border-color: color-mix(in srgb, var(--reader-accent) 64%, rgba(244, 240, 232, 0.18));
  outline: 2px solid color-mix(in srgb, var(--reader-accent) 28%, transparent);
  outline-offset: 2px;
}

.reading-result-decision-option:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.reading-result-decision-recommended {
  width: fit-content;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 54%, rgba(217, 183, 96, 0.22));
  border-radius: 999px;
  color: #fff8e8;
  font-size: 0.66rem;
  font-weight: 950;
  line-height: 1.15;
  background: color-mix(in srgb, var(--reader-accent) 18%, rgba(16, 20, 18, 0.58));
}

.reading-result-decision-option span {
  width: fit-content;
  padding: 3px 7px;
  border: 1px solid rgba(244, 240, 232, 0.12);
  border-radius: 999px;
  color: var(--reader-accent);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.2;
}

.reading-result-decision-option strong {
  color: #fffaf1;
  font-size: 0.9rem;
  line-height: 1.28;
}

.reading-result-decision-option small {
  color: rgba(244, 240, 232, 0.64);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.34;
}

.reading-result-decision-option em {
  color: rgba(255, 248, 232, 0.82);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1.34;
}

.reading-result-decision-option .reading-result-decision-keep {
  align-self: end;
  margin-top: 2px;
  color: color-mix(in srgb, var(--reader-accent) 72%, rgba(244, 240, 232, 0.56));
}

.reading-result-recap {
  display: grid;
  grid-template-columns: 54px minmax(0, 0.9fr) minmax(0, 1.25fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 34%, rgba(244, 240, 232, 0.12));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 58%, rgba(16, 20, 18, 0.56)), rgba(16, 20, 18, 0.58)),
    rgba(16, 20, 18, 0.52);
}

.reading-result-recap-avatar {
  width: 54px;
  height: 54px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 54%, rgba(217, 183, 96, 0.22));
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--reader-glow) 46%, transparent);
}

.reading-result-recap-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.reading-result-recap-copy span {
  color: color-mix(in srgb, var(--reader-accent) 76%, #fff8e8);
  font-size: 0.72rem;
  font-weight: 950;
}

.reading-result-recap-copy strong {
  color: #fffaf1;
  font-size: 1rem;
  line-height: 1.28;
}

.reading-result-recap-copy p {
  margin: 0;
  color: rgba(244, 240, 232, 0.72);
  font-size: 0.82rem;
  line-height: 1.48;
}

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

.reading-result-recap-points small {
  display: grid;
  min-width: 0;
  min-height: 72px;
  gap: 4px;
  align-content: start;
  padding: 8px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(244, 240, 232, 0.045);
}

.reading-result-recap-points em {
  color: var(--reader-accent);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.2;
}

.reading-result-recap-points strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: rgba(255, 248, 232, 0.88);
  font-size: 0.72rem;
  line-height: 1.32;
}

.reading-result-upgrade-teaser {
  display: grid;
  grid-template-columns: 52px minmax(0, 0.95fr) minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(142px, auto);
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 56%, rgba(217, 183, 96, 0.18));
  border-radius: 8px;
  color: inherit;
  font: inherit;
  text-align: left;
  background:
    radial-gradient(circle at 7% 14%, color-mix(in srgb, var(--reader-glow) 78%, transparent), transparent 32%),
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 62%, rgba(16, 20, 18, 0.54)), rgba(16, 20, 18, 0.7)),
    rgba(16, 20, 18, 0.62);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px rgba(244, 240, 232, 0.045);
  cursor: pointer;
}

.reading-result-upgrade-teaser:hover,
.reading-result-upgrade-teaser:focus-visible {
  border-color: color-mix(in srgb, var(--reader-accent) 76%, var(--gold));
  transform: translateY(-1px);
}

.reading-result-upgrade-teaser:disabled {
  cursor: not-allowed;
  opacity: 0.72;
  transform: none;
}

.reading-result-upgrade-teaser.blocked {
  border-color: rgba(215, 124, 115, 0.42);
  background:
    radial-gradient(circle at 7% 14%, rgba(215, 124, 115, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(215, 124, 115, 0.09), rgba(16, 20, 18, 0.7)),
    rgba(16, 20, 18, 0.62);
}

.reading-result-upgrade-teaser-avatar {
  width: 52px;
  height: 52px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 64%, rgba(217, 183, 96, 0.24));
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--reader-glow) 46%, transparent);
}

.reading-result-upgrade-teaser-copy,
.reading-result-upgrade-teaser-values,
.reading-result-upgrade-teaser-plan,
.reading-result-upgrade-teaser-foot {
  display: grid;
  min-width: 0;
}

.reading-result-upgrade-teaser-copy {
  gap: 3px;
}

.reading-result-upgrade-teaser-copy small {
  color: color-mix(in srgb, var(--reader-accent) 78%, #fff8e8);
  font-size: 0.7rem;
  font-weight: 950;
  line-height: 1.2;
}

.reading-result-upgrade-teaser-copy strong {
  color: #fffaf1;
  font-size: 0.92rem;
  line-height: 1.24;
}

.reading-result-upgrade-teaser-copy em {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: rgba(244, 240, 232, 0.68);
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 760;
  line-height: 1.35;
}

.reading-result-upgrade-teaser-values,
.reading-result-upgrade-teaser-plan {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.reading-result-upgrade-teaser-values b,
.reading-result-upgrade-teaser-plan b {
  display: grid;
  min-width: 0;
  gap: 3px;
  min-height: 54px;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 24%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background: rgba(244, 240, 232, 0.045);
}

.reading-result-upgrade-teaser-values span,
.reading-result-upgrade-teaser-plan span {
  overflow: hidden;
  color: #fff8e8;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-result-upgrade-teaser-values i,
.reading-result-upgrade-teaser-plan i {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: rgba(244, 240, 232, 0.58);
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 760;
  line-height: 1.26;
}

.reading-result-upgrade-teaser-foot {
  gap: 6px;
  justify-items: end;
}

.reading-result-upgrade-teaser-foot small {
  color: rgba(244, 240, 232, 0.62);
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.24;
  text-align: right;
}

.reading-result-upgrade-teaser-foot strong {
  display: inline-grid;
  place-items: center;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 8px;
  color: #1b1710;
  font-size: 0.76rem;
  font-weight: 950;
  line-height: 1.2;
  background: var(--gold);
  box-shadow: 0 10px 24px rgba(217, 183, 96, 0.18);
}

.reading-result-upgrade-teaser.blocked .reading-result-upgrade-teaser-foot strong {
  color: #fff8e8;
  background: rgba(215, 124, 115, 0.88);
  box-shadow: none;
}

.reading-result-recommendation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(188px, auto);
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 34%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background: color-mix(in srgb, var(--reader-glow) 24%, rgba(16, 20, 18, 0.68));
  box-shadow: none;
}

.reading-result-recommendation-avatar {
  display: none;
}

.reading-result-recommendation-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.reading-result-recommendation-copy span {
  color: color-mix(in srgb, var(--reader-accent) 78%, #fff8e8);
  font-size: 0.72rem;
  font-weight: 900;
}

.reading-result-recommendation-copy strong {
  color: #fffaf1;
  font-size: 0.9rem;
  line-height: 1.28;
}

.reading-result-recommendation-copy p {
  display: none;
}

.reading-result-paid-receipt {
  display: grid;
  gap: 7px;
  margin-top: 8px;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--reader-accent) 28%, rgba(244, 240, 232, 0.1));
}

.reading-result-paid-receipt > span {
  color: color-mix(in srgb, var(--reader-accent) 74%, rgba(244, 240, 232, 0.62));
  font-size: 0.68rem;
  font-weight: 950;
}

.reading-result-paid-receipt > strong {
  color: #fffaf1;
  font-size: 0.86rem;
  line-height: 1.28;
}

.reading-result-paid-receipt > p {
  margin: 0;
  color: rgba(244, 240, 232, 0.66);
  font-size: 0.76rem;
  line-height: 1.46;
}

.reading-result-paid-receipt > div {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr 1.05fr;
  gap: 6px;
}

.reading-result-paid-receipt small {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.reading-result-paid-receipt em {
  color: rgba(244, 240, 232, 0.5);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.2;
}

.reading-result-paid-receipt b {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: rgba(255, 248, 232, 0.82);
  font-size: 0.7rem;
  font-weight: 820;
  line-height: 1.28;
}

.reading-result-decision-strip .reading-result-paid-receipt {
  margin-top: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 34%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 52%, rgba(16, 20, 18, 0.48)), rgba(16, 20, 18, 0.54)),
    rgba(16, 20, 18, 0.48);
}

.reading-result-decision-strip .reading-result-paid-receipt[data-paid-receipt-cost-tone="blocked"] {
  border-color: rgba(215, 124, 115, 0.4);
  background:
    linear-gradient(135deg, rgba(215, 124, 115, 0.12), rgba(16, 20, 18, 0.58)),
    rgba(16, 20, 18, 0.5);
}

.reading-result-decision-strip .reading-result-paid-receipt > div {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.reading-result-recommendation-action {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(112px, auto);
  gap: 8px;
  align-items: center;
  justify-content: end;
  min-width: 0;
}

.reading-result-recommendation-action em {
  color: rgba(244, 240, 232, 0.58);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1.35;
  text-align: right;
}

.reading-result-recommendation-action button {
  min-height: 36px;
  padding-inline: 12px;
  font-size: 0.78rem;
}

.reading-result-recommendation-action .reading-commerce-action-row {
  justify-content: flex-end;
}

.reading-result-continuation-guide {
  display: grid;
  grid-template-columns: 46px minmax(0, 0.85fr) minmax(0, 1.4fr);
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 38%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 56%, rgba(16, 20, 18, 0.48)), rgba(16, 20, 18, 0.58)),
    rgba(16, 20, 18, 0.5);
}

.reading-result-continuation-avatar {
  width: 46px;
  height: 46px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 56%, rgba(217, 183, 96, 0.22));
  border-radius: 50%;
  object-fit: cover;
}

.reading-result-continuation-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.reading-result-continuation-copy span {
  color: color-mix(in srgb, var(--reader-accent) 76%, #fff8e8);
  font-size: 0.7rem;
  font-weight: 900;
}

.reading-result-continuation-copy strong {
  color: #fffaf1;
  font-size: 0.92rem;
  line-height: 1.28;
}

.reading-result-continuation-copy p {
  margin: 0;
  color: rgba(244, 240, 232, 0.7);
  font-size: 0.78rem;
  line-height: 1.45;
}

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

.reading-result-continuation-guide[data-upgrade-available="false"] .reading-result-continuation-points {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.reading-result-continuation-points small {
  display: grid;
  min-width: 0;
  gap: 3px;
  min-height: 74px;
  padding: 8px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(244, 240, 232, 0.045);
}

.reading-result-continuation-points small[data-recommended="true"] {
  border-color: color-mix(in srgb, var(--reader-accent) 48%, rgba(217, 183, 96, 0.2));
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--reader-glow) 58%, transparent), transparent 54%),
    rgba(244, 240, 232, 0.055);
}

.reading-result-continuation-points em {
  color: color-mix(in srgb, var(--reader-accent) 80%, #fff8e8);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.15;
}

.reading-result-continuation-points strong {
  color: #fffaf1;
  font-size: 0.76rem;
  line-height: 1.2;
}

.reading-result-continuation-points span {
  color: rgba(244, 240, 232, 0.64);
  font-size: 0.68rem;
  font-weight: 760;
  line-height: 1.3;
}

.reading-result-dialogue-bridge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 38%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 76%, transparent), rgba(16, 20, 18, 0.58)),
    rgba(16, 20, 18, 0.46);
}

.reading-result-dialogue-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.reading-result-dialogue-copy span {
  color: var(--reader-accent);
  font-size: 0.72rem;
  font-weight: 900;
}

.reading-result-dialogue-copy strong {
  color: var(--text);
  font-size: 0.95rem;
}

.reading-result-dialogue-copy p {
  margin: 0;
  color: rgba(244, 240, 232, 0.74);
  font-size: 0.82rem;
  line-height: 1.55;
}

.reading-result-dialogue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: min(100%, 270px);
}

.reading-result-dialogue-actions button {
  min-height: 36px;
  padding-inline: 11px;
  font-size: 0.78rem;
}

.reading-result-reward {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.reading-result-reward:empty,
.reading-result-actions:empty {
  display: none;
}

.reading-result-reward article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.48);
}

.reading-result-reward article.first-reading {
  border-color: rgba(217, 183, 96, 0.42);
  background: rgba(217, 183, 96, 0.08);
}

.reading-result-reward span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.reading-result-reward strong {
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.35;
}

.reading-result-reward small {
  color: rgba(244, 240, 232, 0.66);
  font-size: 0.72rem;
  line-height: 1.35;
}

.reading-result-actions {
  display: grid;
  gap: 8px;
}

.reading-result-actions.quality-held {
  gap: 0;
}

.reading-quality-hold {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 42%, rgba(244, 240, 232, 0.12));
  border-left: 3px solid color-mix(in srgb, var(--reader-accent) 78%, var(--gold));
  border-radius: 6px;
  background: color-mix(in srgb, var(--reader-glow) 32%, rgba(16, 20, 18, 0.78));
}

.reading-quality-hold-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.reading-quality-hold-copy span {
  color: color-mix(in srgb, var(--reader-accent) 82%, #fff8e8);
  font-size: 0.69rem;
  font-weight: 900;
}

.reading-quality-hold-copy strong {
  color: #fffaf1;
  font-size: 0.94rem;
  line-height: 1.35;
}

.reading-quality-hold-copy p {
  margin: 0;
  color: rgba(244, 240, 232, 0.72);
  font-size: 0.78rem;
  line-height: 1.5;
}

.reading-quality-hold-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.reading-quality-hold-actions button {
  min-height: 38px;
  padding: 8px 11px;
  font-size: 0.76rem;
}

.reading-result-actions[data-result-layout="recommendation_first"] {
  gap: 10px;
}

.reading-guest-save {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border-left: 3px solid var(--reader-accent, var(--teal));
  background: color-mix(in srgb, var(--reader-glow, var(--teal)) 18%, rgba(16, 20, 18, 0.68));
}

.reading-guest-save > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.reading-guest-save strong {
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.35;
}

.reading-guest-save small {
  color: rgba(244, 240, 232, 0.66);
  line-height: 1.45;
}

.reading-guest-save button {
  min-height: 40px;
  white-space: nowrap;
}

.reading-result-more-paths {
  border-color: color-mix(in srgb, var(--gold) 30%, rgba(244, 240, 232, 0.1));
  background:
    linear-gradient(135deg, rgba(217, 183, 96, 0.08), color-mix(in srgb, var(--reader-glow) 24%, rgba(16, 20, 18, 0.52))),
    rgba(16, 20, 18, 0.5);
}

.reading-result-more-paths-body > * {
  min-width: 0;
  width: 100%;
}

.reading-paid-value {
  border: 1px solid color-mix(in srgb, var(--gold) 46%, rgba(244, 240, 232, 0.12));
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(217, 183, 96, 0.16), rgba(100, 182, 165, 0.1)),
    rgba(16, 20, 18, 0.58);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.2),
    inset 0 0 0 1px rgba(244, 240, 232, 0.04);
}

.reading-paid-value-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  align-items: center;
  min-height: 72px;
  padding: 7px 10px;
  cursor: pointer;
  list-style: none;
}

.reading-paid-value-summary::-webkit-details-marker {
  display: none;
}

.reading-paid-value-summary::after {
  grid-column: 2;
  grid-row: 1 / span 4;
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--gold) 48%, rgba(244, 240, 232, 0.14));
  border-radius: 50%;
  content: "+";
  color: color-mix(in srgb, var(--gold) 82%, #fff8e8);
  font-size: 1rem;
  font-weight: 900;
}

.reading-paid-value[open] .reading-paid-value-summary::after {
  content: "-";
}

.reading-paid-value-summary span {
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 950;
}

.reading-paid-value-summary strong {
  color: #fff8e8;
  font-size: 0.88rem;
  line-height: 1.28;
}

.reading-paid-value-summary small {
  color: rgba(244, 240, 232, 0.68);
  font-size: 0.7rem;
  line-height: 1.35;
}

.reading-paid-value-summary em {
  width: fit-content;
  color: rgba(244, 240, 232, 0.54);
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 900;
}

.reading-paid-value-body {
  display: grid;
  gap: 10px;
  padding: 0 10px 10px;
}

.reading-paid-value-copy {
  display: grid;
  gap: 5px;
}

.reading-paid-value-copy span {
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0;
}

.reading-paid-value-copy strong {
  color: #fff8e8;
  font-size: 1rem;
  line-height: 1.28;
}

.reading-paid-value-copy p {
  margin: 0;
  color: rgba(244, 240, 232, 0.74);
  font-size: 0.84rem;
  line-height: 1.55;
}

.reading-paid-value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.reading-paid-value-grid small {
  display: grid;
  gap: 4px;
  min-height: 56px;
  padding: 8px;
  border: 1px solid rgba(244, 240, 232, 0.12);
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.42);
}

.reading-paid-value-grid strong {
  color: #fff8e8;
  font-size: 0.76rem;
  line-height: 1.25;
}

.reading-paid-value-grid span {
  color: rgba(244, 240, 232, 0.66);
  font-size: 0.7rem;
  font-weight: 760;
  line-height: 1.34;
}

.reading-paid-followup-plan {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 34%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.34);
}

.reading-paid-followup-plan-copy {
  display: grid;
  gap: 4px;
}

.reading-paid-followup-plan-copy span {
  color: color-mix(in srgb, var(--reader-accent) 74%, var(--gold));
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1.2;
}

.reading-paid-followup-plan-copy strong {
  color: #fff8e8;
  font-size: 0.86rem;
  line-height: 1.28;
}

.reading-paid-followup-plan-copy small {
  color: rgba(244, 240, 232, 0.66);
  font-size: 0.7rem;
  font-weight: 760;
  line-height: 1.34;
}

.reading-paid-followup-prompts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.reading-paid-followup-prompts button {
  display: grid;
  gap: 4px;
  min-height: 70px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--gold) 28%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  color: inherit;
  text-align: left;
  background: color-mix(in srgb, var(--reader-glow) 18%, rgba(16, 20, 18, 0.58));
  cursor: pointer;
}

.reading-paid-followup-prompts button:hover,
.reading-paid-followup-prompts button:focus-visible {
  border-color: color-mix(in srgb, var(--gold) 58%, var(--reader-accent));
  background: color-mix(in srgb, var(--reader-glow) 26%, rgba(16, 20, 18, 0.6));
  outline: 2px solid rgba(217, 183, 96, 0.24);
  outline-offset: 2px;
}

.reading-paid-followup-prompts small {
  color: var(--gold);
  font-size: 0.62rem;
  font-weight: 950;
  line-height: 1.15;
}

.reading-paid-followup-prompts span {
  color: rgba(255, 248, 232, 0.82);
  font-size: 0.72rem;
  font-weight: 820;
  line-height: 1.34;
}

.reading-result-conversion {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--gold) 34%, rgba(244, 240, 232, 0.12));
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(217, 183, 96, 0.12), rgba(100, 182, 165, 0.08)),
    rgba(16, 20, 18, 0.5);
}

.reading-result-conversion > span {
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 900;
}

.reading-result-conversion > strong {
  color: #fff8e8;
  font-size: 1rem;
  line-height: 1.28;
}

.reading-result-conversion > p {
  margin: 0;
  color: rgba(244, 240, 232, 0.72);
  font-size: 0.84rem;
  line-height: 1.55;
}

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

.reading-result-conversion-points small {
  min-height: 38px;
  padding: 7px 8px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  color: rgba(244, 240, 232, 0.7);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.32;
  background: rgba(16, 20, 18, 0.42);
}

.reading-result-next-steps {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 28%, rgba(244, 240, 232, 0.12));
  border-radius: 8px;
  background:
    radial-gradient(circle at 0 0, var(--reader-glow), transparent 42%),
    rgba(16, 20, 18, 0.46);
}

.reading-result-next-heading {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.reading-result-next-heading strong {
  color: #fff8e8;
  font-size: 1rem;
  line-height: 1.28;
}

.reading-result-next-heading span {
  max-width: 30rem;
  color: rgba(244, 240, 232, 0.62);
  font-size: 0.82rem;
  line-height: 1.42;
  text-align: right;
}

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

.reading-result-next-grid[data-options="1"] {
  grid-template-columns: minmax(0, 1fr);
}

.reading-upgrade-card {
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 10px;
  align-items: start;
  padding: 13px;
  border: 1px solid rgba(217, 183, 96, 0.42);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 0%, rgba(217, 183, 96, 0.18), transparent 44%),
    linear-gradient(135deg, rgba(217, 183, 96, 0.12), rgba(100, 182, 165, 0.08)),
    rgba(16, 20, 18, 0.62);
}

.reading-upgrade-card.blocked {
  border-color: rgba(215, 124, 115, 0.42);
  background:
    linear-gradient(135deg, rgba(215, 124, 115, 0.13), rgba(16, 20, 18, 0.68)),
    rgba(16, 20, 18, 0.62);
}

.reading-upgrade-persona {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.reading-upgrade-avatar {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(217, 183, 96, 0.4);
  border-radius: 50%;
  object-fit: cover;
  background: rgba(244, 240, 232, 0.08);
}

.reading-upgrade-persona div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.reading-upgrade-persona span {
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 900;
}

.reading-upgrade-persona strong {
  color: #fff8e8;
  line-height: 1.25;
}

.reading-upgrade-card > p {
  margin: 0;
  color: rgba(244, 240, 232, 0.7);
  font-size: 0.82rem;
  line-height: 1.45;
}

.reading-upgrade-reason {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 32%, rgba(217, 183, 96, 0.16));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 42%, rgba(16, 20, 18, 0.46)), rgba(16, 20, 18, 0.5)),
    rgba(16, 20, 18, 0.42);
}

.reading-upgrade-reason span {
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.25;
}

.reading-upgrade-reason strong {
  color: #fff8e8;
  font-size: 0.86rem;
  line-height: 1.3;
}

.reading-upgrade-reason small {
  color: rgba(244, 240, 232, 0.68);
  font-size: 0.76rem;
  line-height: 1.45;
}

.reading-upgrade-plan {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--gold) 30%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background:
    radial-gradient(circle at 0 0, rgba(217, 183, 96, 0.13), transparent 46%),
    rgba(16, 20, 18, 0.4);
}

.reading-upgrade-plan > strong {
  color: #fff8e8;
  font-size: 0.82rem;
  line-height: 1.3;
}

.reading-upgrade-plan > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.reading-upgrade-plan small {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(217, 183, 96, 0.14);
  border-radius: 8px;
  color: rgba(244, 240, 232, 0.7);
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.4;
  background: rgba(244, 240, 232, 0.05);
}

.reading-upgrade-plan em {
  color: color-mix(in srgb, var(--reader-accent) 76%, var(--gold));
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.2;
}

.reading-upgrade-plan span {
  min-width: 0;
}

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

.reading-upgrade-value-grid > span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--gold) 24%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.38);
}

.reading-upgrade-value-grid strong {
  color: #fff8e8;
  font-size: 0.76rem;
  line-height: 1.2;
}

.reading-upgrade-value-grid small {
  color: rgba(244, 240, 232, 0.62);
  font-size: 0.68rem;
  font-weight: 780;
  line-height: 1.28;
}

.reading-upgrade-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 6px;
}

.reading-upgrade-slots small {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  min-height: 34px;
  padding: 6px 7px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  color: rgba(244, 240, 232, 0.74);
  font-size: 0.7rem;
  font-weight: 850;
  line-height: 1.25;
  background: rgba(16, 20, 18, 0.42);
}

.reading-upgrade-slots em {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #1b1710;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 950;
  background: var(--gold);
}

.reading-upgrade-slots span {
  min-width: 0;
}

.reading-upgrade-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(144px, auto);
  gap: 8px;
  align-items: center;
}

.reading-upgrade-foot small {
  color: rgba(244, 240, 232, 0.62);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.35;
}

.reading-upgrade-foot button {
  align-self: center;
  min-height: 40px;
}

.reading-followup-commerce {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: start;
  padding: 11px 12px;
  border: 1px solid rgba(100, 182, 165, 0.26);
  border-radius: 8px;
  background: rgba(100, 182, 165, 0.07);
}

.reading-followup-commerce.paid {
  border-color: rgba(217, 183, 96, 0.32);
  background: rgba(217, 183, 96, 0.08);
}

.reading-followup-commerce.blocked {
  border-color: rgba(215, 124, 115, 0.44);
  background: rgba(215, 124, 115, 0.09);
}

.reading-followup-commerce span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.reading-followup-commerce strong {
  color: #fff8e8;
  line-height: 1.25;
}

.reading-followup-commerce small {
  color: rgba(244, 240, 232, 0.68);
  line-height: 1.42;
}

.reading-followup-commerce .reading-commerce-cta {
  min-height: 38px;
}

.reading-followup-commerce button,
.reading-upgrade-card button {
  width: 100%;
}

.reading-result-utility-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.reading-result-utility-actions button {
  min-height: 40px;
}

.reading-result-fallback-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.reading-followup-suggestions {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(244, 240, 232, 0.12);
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.42);
}

.reading-result-actions + .reading-followup-suggestions {
  margin-top: -4px;
  border-color: color-mix(in srgb, var(--reader-accent) 28%, rgba(244, 240, 232, 0.1));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 36%, rgba(16, 20, 18, 0.54)), rgba(16, 20, 18, 0.6)),
    rgba(16, 20, 18, 0.48);
}

.reading-followup-entry {
  border: 1px solid color-mix(in srgb, var(--reader-accent) 30%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background: rgba(12, 16, 15, 0.98);
  overflow: auto;
  overscroll-behavior: contain;
}

.reading-followup-entry[hidden],
.reading-followup-form[hidden],
.reading-followup-suggestions[hidden] {
  display: none;
}

.reading-followup-entry:not([open]) {
  display: none;
}

.reading-followup-entry > summary {
  position: relative;
  display: grid;
  gap: 3px;
  min-height: 58px;
  padding: 10px 42px 10px 12px;
  cursor: pointer;
  list-style: none;
}

.reading-followup-entry > summary::-webkit-details-marker {
  display: none;
}

.reading-followup-entry > summary::after {
  position: absolute;
  top: 50%;
  right: 14px;
  color: color-mix(in srgb, var(--reader-accent) 82%, #fff8e8);
  font-size: 1.15rem;
  line-height: 1;
  content: "+";
  transform: translateY(-50%);
}

.reading-followup-entry[open] > summary::after {
  content: "−";
}

.reading-followup-entry > summary span {
  color: color-mix(in srgb, var(--reader-accent) 76%, #fff8e8);
  font-size: 0.67rem;
  font-weight: 900;
}

.reading-followup-entry > summary strong {
  color: #fffaf1;
  font-size: 0.9rem;
}

.reading-followup-entry > summary small {
  color: rgba(244, 240, 232, 0.62);
  font-size: 0.7rem;
  line-height: 1.35;
}

.reading-followup-entry-body {
  display: grid;
  gap: 8px;
  padding: 0 8px 8px;
  border-top: 1px solid color-mix(in srgb, var(--reader-accent) 18%, rgba(244, 240, 232, 0.06));
}

.reading-followup-entry-body > .reading-followup-suggestions {
  margin-top: 8px;
}

.reading-followup-suggestions > div:first-child {
  display: grid;
  gap: 3px;
}

.reading-followup-suggestions strong {
  color: #fff8e8;
}

.reading-followup-suggestions small {
  color: var(--muted);
  line-height: 1.4;
}

.reading-followup-chip-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.reading-followup-chip-list button {
  min-height: 36px;
  white-space: normal;
}

.reading-followup-value {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(240px, 0.95fr);
  gap: 9px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 26%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 36%, rgba(16, 20, 18, 0.42)), rgba(16, 20, 18, 0.42)),
    rgba(16, 20, 18, 0.42);
}

.reading-followup-value[hidden] {
  display: none;
}

.reading-followup-value.blocked {
  border-color: rgba(215, 124, 115, 0.36);
  background:
    linear-gradient(135deg, rgba(215, 124, 115, 0.1), rgba(16, 20, 18, 0.48)),
    rgba(16, 20, 18, 0.44);
}

.reading-followup-value-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.reading-followup-value-copy span {
  color: color-mix(in srgb, var(--reader-accent) 76%, #fff8e8);
  font-size: 0.72rem;
  font-weight: 900;
}

.reading-followup-value-copy strong {
  color: #fff8e8;
  font-size: 0.88rem;
  line-height: 1.3;
}

.reading-followup-value-copy p {
  margin: 0;
  color: rgba(244, 240, 232, 0.68);
  font-size: 0.8rem;
  line-height: 1.45;
}

.reading-followup-value-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.reading-followup-value-grid small {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(244, 240, 232, 0.05);
}

.reading-followup-value-grid strong,
.reading-followup-value-grid span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-followup-value-grid strong {
  color: rgba(244, 240, 232, 0.58);
  font-size: 0.66rem;
  font-weight: 900;
}

.reading-followup-value-grid span {
  color: rgba(255, 248, 232, 0.84);
  font-size: 0.76rem;
  font-weight: 850;
}

.reading-followup-form {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 28%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 44%, rgba(16, 20, 18, 0.58)), rgba(16, 20, 18, 0.66)),
    rgba(16, 20, 18, 0.48);
}

.reading-followup-form[data-chat-dock="conversation"] {
  position: relative;
  margin-top: -5px;
  padding: 11px;
  border-color: color-mix(in srgb, var(--reader-accent) 36%, rgba(244, 240, 232, 0.12));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 58%, rgba(16, 20, 18, 0.62)), rgba(16, 20, 18, 0.7)),
    rgba(16, 20, 18, 0.52);
}

.reading-followup-form[data-chat-dock="conversation"]::before {
  position: absolute;
  top: -11px;
  left: 27px;
  width: 1px;
  height: 11px;
  content: "";
  background: color-mix(in srgb, var(--reader-accent) 36%, rgba(244, 240, 232, 0.1));
}

.reading-followup-form[data-chat-input="dock"] .reading-followup-dock {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--reader-accent) 10%, transparent);
}

.reading-followup-form[data-cost-tone="blocked"] {
  border-color: rgba(215, 124, 115, 0.42);
  background:
    linear-gradient(135deg, rgba(215, 124, 115, 0.12), rgba(16, 20, 18, 0.72)),
    rgba(16, 20, 18, 0.54);
}

.reading-followup-form[data-submitting="true"] {
  opacity: 0.82;
}

.reading-followup-preflight {
  min-width: 0;
}

.reading-followup-preflight > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 20px;
  gap: 8px;
  align-items: center;
  min-height: 40px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 22%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  cursor: pointer;
  list-style: none;
  background: rgba(244, 240, 232, 0.04);
}

.reading-followup-preflight > summary::-webkit-details-marker {
  display: none;
}

.reading-followup-preflight > summary::after {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 32%, rgba(244, 240, 232, 0.12));
  border-radius: 50%;
  color: var(--reader-accent);
  content: "+";
  font-size: 0.82rem;
  font-weight: 900;
}

.reading-followup-preflight[open] > summary::after {
  content: "−";
}

.reading-followup-preflight > summary strong {
  min-width: 0;
  color: #fff8e8;
  font-size: 0.86rem;
  line-height: 1.28;
}

.reading-followup-preflight > summary small {
  min-width: 0;
  color: rgba(244, 240, 232, 0.64);
  font-size: 0.72rem;
  line-height: 1.3;
  text-align: right;
}

.reading-followup-preflight-body {
  display: grid;
  gap: 8px;
  padding-top: 8px;
}

.reading-followup-composer-status {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 24%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 38%, rgba(16, 20, 18, 0.5)), rgba(16, 20, 18, 0.48)),
    rgba(244, 240, 232, 0.04);
}

.reading-followup-composer-status[hidden] {
  display: none;
}

.reading-followup-composer-status.blocked {
  border-color: rgba(215, 124, 115, 0.34);
  background:
    linear-gradient(135deg, rgba(215, 124, 115, 0.1), rgba(16, 20, 18, 0.6)),
    rgba(16, 20, 18, 0.52);
}

.reading-followup-composer-status.sending {
  border-style: dashed;
  opacity: 0.86;
}

.reading-followup-composer-status-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.reading-followup-composer-status-copy span {
  color: color-mix(in srgb, var(--reader-accent) 76%, rgba(244, 240, 232, 0.72));
  font-size: 0.68rem;
  font-weight: 900;
}

.reading-followup-composer-status-copy strong {
  color: #fff8e8;
  font-size: 0.84rem;
  line-height: 1.28;
}

.reading-followup-composer-status-copy p {
  margin: 0;
  color: rgba(244, 240, 232, 0.72);
  font-size: 0.76rem;
  line-height: 1.45;
}

.reading-followup-composer-status-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.reading-followup-composer-status-chips small {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 7px 8px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(244, 240, 232, 0.045);
}

.reading-followup-composer-status-chips em {
  color: rgba(244, 240, 232, 0.56);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 900;
}

.reading-followup-composer-status-chips strong {
  overflow: hidden;
  color: rgba(255, 248, 232, 0.84);
  font-size: 0.72rem;
  line-height: 1.28;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-followup-thread {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 24%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background: rgba(244, 240, 232, 0.045);
}

.reading-followup-thread[hidden] {
  display: none;
}

.reading-followup-thread.blocked {
  border-color: rgba(215, 124, 115, 0.28);
  background: rgba(215, 124, 115, 0.08);
}

.reading-followup-thread-bubble {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  min-width: 0;
}

.reading-followup-thread-bubble img {
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 48%, rgba(217, 183, 96, 0.2));
  border-radius: 50%;
  object-fit: cover;
}

.reading-followup-thread-bubble div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.reading-followup-thread-bubble small {
  color: color-mix(in srgb, var(--reader-accent) 76%, #fff8e8);
  font-size: 0.7rem;
  font-weight: 900;
}

.reading-followup-thread-bubble p {
  margin: 0;
  color: rgba(244, 240, 232, 0.76);
  font-size: 0.8rem;
  line-height: 1.48;
}

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

.reading-followup-thread-chips small {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 7px 8px;
  border: 1px solid rgba(244, 240, 232, 0.09);
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.28);
}

.reading-followup-thread-chips em,
.reading-followup-thread-chips strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-followup-thread-chips em {
  color: rgba(244, 240, 232, 0.56);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 900;
}

.reading-followup-thread-chips strong {
  color: rgba(255, 248, 232, 0.86);
  font-size: 0.72rem;
  font-weight: 850;
}

.reading-followup-dock {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
  align-items: end;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 30%, rgba(244, 240, 232, 0.1));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--reader-glow) 44%, rgba(16, 20, 18, 0.54)), rgba(16, 20, 18, 0.58)),
    rgba(16, 20, 18, 0.5);
}

.reading-followup-dock-avatar {
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 52%, rgba(217, 183, 96, 0.18));
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--reader-glow) 54%, transparent);
}

.reading-followup-dock-body {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.reading-followup-dock-label {
  display: grid;
  min-width: 0;
  gap: 2px;
  cursor: text;
}

.reading-followup-dock-label span {
  color: color-mix(in srgb, var(--reader-accent) 78%, rgba(244, 240, 232, 0.76));
  font-size: 0.68rem;
  font-weight: 900;
}

.reading-followup-dock-label strong {
  color: #fff8e8;
  font-size: 0.86rem;
  line-height: 1.26;
  overflow-wrap: anywhere;
}

.reading-followup-dock-context {
  overflow: hidden;
  color: rgba(244, 240, 232, 0.58);
  font-size: 0.7rem;
  line-height: 1.28;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-followup-message-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(86px, auto);
  gap: 8px;
  align-items: center;
}

.reading-followup-dock .reading-followup-message-row input {
  border-color: color-mix(in srgb, var(--reader-accent) 28%, rgba(244, 240, 232, 0.1));
  background: rgba(5, 9, 8, 0.46);
}

.reading-followup-dock .reading-followup-message-row button {
  min-height: 44px;
  white-space: nowrap;
}

.reading-messages {
  display: grid;
  gap: 10px;
}

.reading-message-list,
#reading-message-list {
  display: grid;
  gap: 8px;
}

.reading-message {
  display: grid;
  gap: 6px;
  padding: 0;
  border-left: 0;
  background: transparent;
}

.reading-message strong {
  line-height: 1.35;
}

.reading-card-modal{position:fixed;inset:0;z-index:24;display:grid;place-items:center;padding:18px;background:rgba(5,7,6,.78);backdrop-filter:blur(14px)}
.reading-card-modal[hidden]{display:none}
.reading-card-modal-card{position:relative;display:grid;width:min(100%,820px);max-height:min(92vh,760px);grid-template-columns:minmax(190px,300px) minmax(0,1fr);gap:20px;overflow:auto;padding:18px;border:1px solid rgba(217,183,96,.48);border-radius:8px;background:radial-gradient(circle at 12% 0,rgba(217,183,96,.18),transparent 38%),radial-gradient(circle at 90% 16%,rgba(100,182,165,.14),transparent 32%),var(--surface);box-shadow:0 24px 70px rgba(0,0,0,.5)}
.reading-card-modal-close{position:absolute;top:12px;right:12px;z-index:2}
.reading-card-modal-image{align-self:start;overflow:hidden;border:1px solid rgba(244,240,232,.12);border-radius:8px;background:rgba(16,20,18,.82);box-shadow:0 18px 48px rgba(0,0,0,.36)}
.reading-card-modal-image img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover}
.reading-card-modal-copy{display:grid;gap:12px;min-width:0;align-content:start;padding-right:42px}
.reading-card-modal-copy h2{margin:0;color:#fff8e8;font-size:1.36rem;line-height:1.32}
.reading-card-modal-copy p{margin:0;color:rgba(244,240,232,.76);line-height:1.75;white-space:pre-line}
.reading-card-modal-meta{display:flex;flex-wrap:wrap;gap:8px}
.reading-card-modal-meta span{padding:5px 9px;border:1px solid rgba(217,183,96,.36);border-radius:999px;color:var(--gold);font-size:.78rem;font-weight:900}

@keyframes pickCardDeal {
  0% {
    opacity: 0;
    transform: translateY(24px) rotate(var(--tilt, 0deg)) scale(0.94);
  }

  100% {
    opacity: 1;
    transform: translateY(0) rotate(var(--tilt, 0deg)) scale(1);
  }
}

@keyframes readingShuffle {
  0%,
  100% {
    filter: brightness(0.92);
    margin-top: 0;
  }

  45% {
    filter: brightness(1.14);
    margin-top: -12px;
  }
}

@keyframes readingDrawStepPulse {
  0%,
  100% {
    filter: brightness(1);
    transform: translateY(0);
  }

  48% {
    filter: brightness(1.16);
    transform: translateY(-2px);
  }
}

@keyframes readingCardEnter {
  0% {
    opacity: 0;
    transform: translateY(18px) rotateY(24deg) scale(0.96);
  }

  100% {
    opacity: 1;
    transform: translateY(0) rotateY(0deg) scale(1);
  }
}

@keyframes readingInsightEnter {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ambientCandleGlow {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.68;
  }

  48% {
    transform: translate3d(0, -5px, 0) scale(1.025);
    opacity: 0.86;
  }
}

@keyframes ambientFloatUp {
  from {
    background-position: 0 40px, 58px 156px;
  }

  to {
    background-position: 0 -230px, 58px -164px;
  }
}

@keyframes ambientMistDrift {
  0%,
  100% {
    transform: translate3d(-2%, 0, 0);
  }

  50% {
    transform: translate3d(3%, -1.5%, 0);
  }
}

@keyframes ambientMistVeil {
  from {
    background-position: -20% 0, 30% 0;
  }

  to {
    background-position: 120% 0, -80% 0;
  }
}

@keyframes ambientCrystalPulse {
  0%,
  100% {
    opacity: 0.58;
    filter: saturate(1);
  }

  50% {
    opacity: 0.82;
    filter: saturate(1.24);
  }
}

@keyframes ambientCrystalTwinkle {
  0%,
  100% {
    opacity: 0.18;
  }

  35% {
    opacity: 0.34;
  }

  64% {
    opacity: 0.12;
  }
}

@keyframes readerIdleBreath {
  0%,
  100% {
    transform: translate3d(calc(var(--reader-look-x, 0) * 7px), calc(var(--reader-look-y, 0) * 4px), 0) scale(1.018);
    filter: saturate(1.08) contrast(1.03) brightness(1.08);
  }

  48% {
    transform: translate3d(calc(var(--reader-look-x, 0) * 9px), calc(var(--reader-look-y, 0) * 5px - 3px), 0) scale(1.04);
    filter: saturate(1.14) contrast(1.05) brightness(1.12);
  }
}

@keyframes readingReaderIdleBreath {
  0%,
  100% {
    transform:
      translate3d(calc(var(--reader-look-x, 0) * 6px), calc(var(--reader-look-y, 0) * 4px), 0)
      scale(var(--reading-reader-motion-scale, 1.012));
    filter: saturate(1.06) contrast(1.03) brightness(1.08);
  }

  48% {
    transform:
      translate3d(calc(var(--reader-look-x, 0) * 8px), calc(var(--reader-look-y, 0) * 5px - 3px), 0)
      scale(calc(var(--reading-reader-motion-scale, 1.012) + 0.018));
    filter: saturate(1.12) contrast(1.04) brightness(1.12);
  }
}

@keyframes readerBlinkSprite {
  0%,
  84.8%,
  89.4%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--reader-eye-tilt)) scaleY(0.18);
    filter: blur(0.55px);
  }

  86.2% {
    opacity: 0.54;
    transform: translate(-50%, -50%) rotate(var(--reader-eye-tilt)) scaleY(0.76);
    filter: blur(0.25px);
  }

  87.1%,
  87.6% {
    opacity: 0.76;
    transform: translate(-50%, -50%) rotate(var(--reader-eye-tilt)) scaleY(1);
    filter: blur(0.14px);
  }

  88.5% {
    opacity: 0.38;
    transform: translate(-50%, -50%) rotate(var(--reader-eye-tilt)) scaleY(0.54);
    filter: blur(0.32px);
  }
}

@keyframes readerClosedBlink {
  0%,
  84.8%,
  89.4%,
  100% {
    opacity: 0;
  }

  86.2% {
    opacity: 0.58;
  }

  87.1%,
  87.6% {
    opacity: 0.98;
  }

  88.5% {
    opacity: 0.34;
  }
}

@keyframes readerRitualBreath {
  0%,
  100% {
    transform:
      translate3d(calc(var(--reader-look-x, 0) * 7px), calc(var(--reader-look-y, 0) * 4px), 0)
      scale(calc(var(--reading-reader-motion-scale, 1.012) + 0.012));
    filter: saturate(1.06) contrast(1.03) brightness(1.02);
  }

  45% {
    transform:
      translate3d(calc(var(--reader-look-x, 0) * 10px), calc(var(--reader-look-y, 0) * 6px - 5px), 0)
      scale(calc(var(--reading-reader-motion-scale, 1.012) + 0.04));
    filter: saturate(1.16) contrast(1.06) brightness(1.08);
  }
}

@keyframes readingReaderLightPulse {
  0%,
  100% {
    opacity: 0.7;
  }

  50% {
    opacity: 0.92;
  }
}

@keyframes readerAuraPulse {
  0%,
  100% {
    opacity: 0.68;
    transform: scale(1);
  }

  50% {
    opacity: 0.96;
    transform: scale(1.045);
  }
}

@keyframes readerPresenceTrace {
  0%,
  100% {
    opacity: 0;
    transform: scaleX(0.22);
  }

  18% {
    opacity: 0.34;
  }

  48% {
    opacity: 0.92;
    transform: scaleX(1);
  }

  82% {
    opacity: 0.24;
  }
}

@keyframes readerHaloDrift {
  0%,
  100% {
    opacity: 0.54;
    filter: blur(16px);
  }

  48% {
    opacity: 0.86;
    filter: blur(20px);
  }
}

@keyframes readerRitualSweep {
  0%,
  100% {
    opacity: 0.22;
    transform: translateX(-42%);
  }

  50% {
    opacity: 0.72;
    transform: translateX(36%);
  }
}

@keyframes readerCardBackPulse {
  0%,
  100% {
    opacity: 0.22;
    transform: scale(0.98);
  }

  50% {
    opacity: 0.58;
    transform: scale(1.02);
  }
}

@keyframes readerPortraitSpeak {
  0%,
  100% {
    filter: saturate(1.02) brightness(1);
  }

  42% {
    filter: saturate(1.14) brightness(1.08);
  }
}

@keyframes readerTypingDots {
  0%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(-1px);
  }
}

@keyframes readingPresencePulse {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.88);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes readerLineGlow {
  0%,
  100% {
    box-shadow: inset 0 0 0 1px rgba(244, 240, 232, 0.04);
  }

  50% {
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--reader-accent) 24%, transparent),
      0 0 24px color-mix(in srgb, var(--reader-accent) 12%, transparent);
  }
}

.reward-modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(7, 10, 12, 0.72);
  backdrop-filter: blur(12px);
}

.reward-modal[hidden] {
  display: none;
}

.reward-modal-card {
  width: min(100%, 360px);
  border: 1px solid rgba(217, 183, 96, 0.62);
  border-radius: 8px;
  padding: 22px;
  background:
    radial-gradient(circle at top right, rgba(255, 116, 72, 0.2), transparent 42%),
    var(--surface-strong);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.45);
}

.reward-modal-card h2 {
  margin: 8px 0 10px;
  color: #fffaf1;
  font-size: 1.25rem;
  line-height: 1.35;
}

.reward-modal-card p {
  margin: 0 0 18px;
  color: rgba(244, 240, 232, 0.78);
  line-height: 1.65;
}

.reward-modal-card .primary-button {
  width: 100%;
}

.ai-consent-modal {
  position: fixed;
  inset: 0;
  z-index: 22;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(7, 10, 12, 0.74);
  backdrop-filter: blur(12px);
}

.ai-consent-modal[hidden] {
  display: none;
}

.ai-consent-card {
  width: min(100%, 430px);
  padding: 22px;
  border: 1px solid rgba(217, 183, 96, 0.52);
  border-radius: 8px;
  background:
    radial-gradient(circle at top right, rgba(100, 182, 165, 0.18), transparent 42%),
    var(--surface-strong);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.45);
}

.ai-consent-card h2 {
  margin: 8px 0 10px;
  color: #fffaf1;
  font-size: 1.25rem;
  line-height: 1.35;
}

.ai-consent-card p:not(.muted) {
  margin: 0;
  color: rgba(244, 240, 232, 0.78);
  line-height: 1.65;
}

.ai-consent-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 18px;
}

.reading-payment-modal {
  position: fixed;
  inset: 0;
  z-index: 23;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(7, 10, 12, 0.76);
  backdrop-filter: blur(12px);
}

.reading-payment-modal[hidden] {
  display: none;
}

.reading-payment-card {
  width: min(100%, 460px);
  max-height: calc(100svh - 44px);
  overflow-y: auto;
  padding: 22px;
  border: 1px solid rgba(217, 183, 96, 0.58);
  border-radius: 8px;
  background:
    radial-gradient(circle at top right, rgba(217, 183, 96, 0.18), transparent 42%),
    var(--surface-strong);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.48);
}

.reading-payment-card h2 {
  margin: 8px 0 10px;
  color: #fffaf1;
  font-size: 1.25rem;
  line-height: 1.35;
}

.reading-payment-card p:not(.muted) {
  margin: 0;
  color: rgba(244, 240, 232, 0.78);
  line-height: 1.65;
}

.reading-payment-summary {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding: 12px;
  border: 1px solid rgba(244, 240, 232, 0.12);
  border-radius: 8px;
  background: rgba(6, 10, 9, 0.34);
}

.reading-payment-summary div {
  display: grid;
  grid-template-columns: minmax(86px, 0.35fr) minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.reading-payment-summary span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.reading-payment-summary strong {
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.45;
}

.reading-payment-proof {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.reading-payment-proof div {
  position: relative;
  padding: 10px 10px 10px 28px;
  border: 1px solid rgba(109, 213, 190, 0.18);
  border-radius: 8px;
  background: rgba(109, 213, 190, 0.07);
}

.reading-payment-proof div::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 16px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(109, 213, 190, 0.72);
}

.reading-payment-proof strong,
.reading-payment-proof span {
  display: block;
}

.reading-payment-proof strong {
  color: #fffaf1;
  font-size: 0.78rem;
  line-height: 1.35;
}

.reading-payment-proof span {
  margin-top: 2px;
  color: rgba(244, 240, 232, 0.68);
  font-size: 0.76rem;
  line-height: 1.45;
}

.reading-payment-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 18px;
}

@media (max-width: 640px) {
  .app-shell {
    padding-inline: 12px;
  }

  .daily-date-rail {
    grid-template-columns: repeat(7, minmax(42px, 1fr));
    gap: 5px;
    min-width: 0;
    max-width: 100%;
  }

  .daily-date-item span:last-child {
    width: 34px;
    height: 34px;
  }

  .tarot-focus-panel {
    height: min(580px, calc(100svh - 118px));
    min-height: 520px;
    padding: 0;
  }

  .daily-weather-disclosure > summary {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px 8px;
  }

  .daily-weather-search > div {
    grid-template-columns: minmax(0, 1fr) 68px;
  }

  .daily-weather-search button {
    min-width: 0;
    padding-inline: 8px;
  }

  .tarot-focus-panel[data-home-state="fresh"] {
    height: min(444px, calc(100svh - 150px));
    min-height: 372px;
  }

  .tarot-focus-panel[data-home-density="focused"] {
    min-height: 372px;
  }

  .tarot-focus-panel[data-home-compactness="launch-simple"] {
    height: min(404px, calc(100svh - 150px));
    min-height: 344px;
  }

  .tarot-focus-panel[data-home-density="recovery"] {
    height: min(520px, calc(100svh - 160px));
    min-height: 480px;
  }

  .tarot-sanctuary {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(150px, 1fr) auto auto auto;
    grid-template-areas:
      "copy"
      "."
      "status"
      "actions"
      "funnel";
    gap: 14px;
    padding: 16px;
  }

  .tarot-sanctuary-copy {
    align-self: start;
    max-width: min(64vw, 16rem);
    padding-top: 2px;
  }

  .tarot-sanctuary-copy h2 {
    max-width: min(48vw, 11rem);
    font-size: clamp(1.65rem, 9vw, 2.25rem);
    line-height: 1;
  }

  .tarot-sanctuary-title-full {
    display: none;
  }

  .tarot-sanctuary-title-mobile {
    display: inline;
  }

  .tarot-sanctuary-copy p:not(.daily-kicker) {
    display: none;
  }

  .tarot-sanctuary-copy small {
    display: none;
  }

  .tarot-sanctuary-demo-badge {
    margin-bottom: 6px;
    padding: 4px 8px;
    font-size: 0.68rem;
  }

  .tarot-sanctuary-reader {
    min-height: 0;
  }

  .tarot-sanctuary-reader::before {
    inset: 0;
  }

  .tarot-sanctuary-reader img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-position: 58% top;
  }

  .tarot-sanctuary-reader span {
    display: none;
  }

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

  .tarot-sanctuary-signal {
    min-height: 72px;
    padding: 8px;
  }

  .tarot-sanctuary-actions {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .tarot-sanctuary-actions button {
    min-height: 46px;
  }

  .tarot-sanctuary-action-card {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-block: 9px;
  }

  .tarot-sanctuary-action-card strong {
    font-size: 0.88rem;
  }

  .tarot-sanctuary-action-card small {
    font-size: 0.7rem;
  }

  .tarot-sanctuary-primary {
    grid-column: auto;
  }

  .tarot-sanctuary-note {
    display: none;
  }

  .tarot-focus-panel[data-home-layout="value-first"][data-home-state="fresh"] .tarot-sanctuary {
    grid-template-rows: minmax(104px, 1fr) auto;
    grid-template-areas:
      "."
      "actions";
  }

  .tarot-focus-panel[data-home-layout="value-first"] .tarot-sanctuary-actions[data-home-cta-mode="primary-plus-one"] {
    grid-template-columns: 1fr;
  }

  .tarot-focus-panel[data-home-layout="value-first"][data-home-density="handoff"] .tarot-sanctuary {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(150px, 1fr) auto;
    grid-template-areas:
      "copy"
      "status";
  }

  .tarot-focus-panel[data-home-density="recovery"] .tarot-sanctuary {
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "copy"
      "actions"
      "proof";
    align-content: end;
  }

  .tarot-sanctuary-commerce-proof {
    gap: 5px;
    padding: 7px;
  }

  .tarot-sanctuary-commerce-proof > summary strong {
    font-size: 0.72rem;
  }

  .tarot-sanctuary-commerce-proof-steps {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .tarot-sanctuary-commerce-proof-steps > span {
    min-height: 42px;
    padding: 6px 7px;
  }

  .tarot-focus-panel[data-home-state="fresh"] .tarot-sanctuary-copy {
    max-width: min(68vw, 15rem);
  }

  .tarot-focus-panel[data-home-density="focused"] .tarot-sanctuary-copy {
    display: none;
  }

  .tarot-focus-panel[data-home-state="fresh"] .tarot-sanctuary-copy h2 {
    max-width: min(54vw, 12rem);
    font-size: clamp(1.42rem, 6.8vw, 1.92rem);
  }

  .daily-ritual {
    grid-template-columns: 1fr;
    padding: 20px 14px;
    text-align: center;
  }

  .daily-ritual h2 {
    font-size: 1.24rem;
  }

  .daily-ritual .primary-button {
    width: 100%;
    justify-self: stretch;
  }

  .daily-loop-heading,
  .onboarding-heading {
    display: grid;
  }

  .daily-loop-steps,
  .onboarding-task-list,
  .economy-rule-list,
  .economy-resource-grid,
  .npc-choice-list,
  .daily-question-options,
  .daily-question-proof > div,
  .daily-question-ai-receipt-grid,
  .daily-context-primary,
  .daily-context-story,
  .daily-context-snapshot,
  .daily-context-why-grid,
  .daily-context-grid,
  .reading-result-v3-grid,
  .reading-result-v4-grid,
  .reading-structured-grid {
    grid-template-columns: 1fr;
  }

  .economy-flow > div {
    grid-template-columns: 1fr;
  }

  .daily-question-evidence summary {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .daily-question-evidence summary span,
  .daily-question-evidence summary small {
    grid-column: 1;
  }

  .daily-question-evidence summary::after {
    grid-column: 2;
  }

  .daily-question-card {
    grid-template-columns: 54px minmax(0, 1fr) 34px;
    gap: 10px;
    padding: 12px 14px;
  }

  .daily-question-orb {
    width: 52px;
    height: 52px;
  }

  .daily-question-card strong {
    font-size: 0.96rem;
    line-height: 1.24;
  }

  .daily-question-card small {
    margin-top: 2px;
    font-size: 0.78rem;
  }

  .daily-question-cost {
    margin-top: 5px;
    padding: 2px 6px;
    font-size: 0.65rem;
  }

  .daily-reading-conversion-points {
    grid-template-columns: 1fr;
  }

  .daily-reading-paths {
    grid-template-columns: 1fr;
  }

  .daily-reading-path-detail-grid {
    grid-template-columns: 1fr;
  }

  .daily-reading-path {
    min-height: 0;
  }

  .daily-question-recommendation {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .daily-paid-reading {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .daily-paid-reading p,
  .daily-paid-reading-values,
  .daily-paid-reading-plan,
  .daily-paid-reading small,
  .daily-paid-reading em {
    grid-column: 1;
  }

  .daily-paid-reading-plan > div {
    grid-template-columns: 1fr;
  }

  .daily-question-bridge small {
    white-space: normal;
  }

  .daily-context-why-head {
    display: grid;
    gap: 4px;
  }

  .daily-context-why-head span {
    max-width: 100%;
    text-align: left;
  }

  .daily-context-head {
    align-items: flex-start;
  }

  .daily-context-head > div {
    max-width: 46%;
  }

  .daily-context-story-item {
    padding: 11px 0;
  }

  .daily-context-primary .daily-context-hook {
    margin: 0;
  }

  .daily-context-evening {
    grid-column: auto;
    padding-left: 10px;
  }

  .daily-context-details summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .daily-context-details summary .daily-context-signature {
    grid-column: 1;
    justify-self: start;
    margin-left: 0;
  }

  .daily-context-details summary::after {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .daily-ritual-deck {
    width: min(100%, 390px);
    gap: 6px;
  }

  .ritual-card span {
    inset: 5px;
  }

  .daily-draw-reveal {
    min-height: 440px;
    padding: 24px 14px;
  }

  .daily-reveal-card {
    width: min(58vw, 176px);
  }

  .daily-question-card {
    grid-template-columns: 56px minmax(0, 1fr) 34px;
    padding: 14px;
  }

  .daily-question-orb {
    width: 52px;
    height: 52px;
  }

  .daily-question-cost {
    white-space: normal;
  }

  .daily-question-footer {
    grid-template-columns: 1fr;
  }

  .daily-question-footer span {
    white-space: normal;
  }

  .daily-question-footer strong {
    text-align: left;
  }

  .daily-mini-panel,
  .daily-overview-card,
  .daily-section-card {
    padding: 16px;
  }

  .daily-section-card p {
    font-size: 0.95rem;
  }

  .reading-options,
  .reading-followup-form {
    grid-template-columns: 1fr;
  }

  .reading-followup-preflight > summary {
    grid-template-columns: minmax(0, 1fr) 20px;
  }

  .reading-followup-preflight > summary small {
    grid-column: 1;
    grid-row: 2;
    text-align: left;
  }

  .reading-followup-preflight > summary::after {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  .reading-followup-thread-chips {
    grid-template-columns: 1fr;
  }

  .reading-followup-thread-chips strong {
    white-space: normal;
  }

  .reading-followup-composer-status-chips {
    grid-template-columns: 1fr;
  }

  .reading-followup-composer-status-chips strong {
    white-space: normal;
  }

  .reading-followup-dock {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
  }

  .reading-followup-dock-avatar {
    width: 34px;
    height: 34px;
  }

  .reading-followup-dock-context {
    white-space: normal;
  }

  .reading-followup-value {
    grid-template-columns: 1fr;
  }

  .reading-followup-message-row {
    grid-template-columns: minmax(0, 1fr) minmax(82px, 34%);
  }

  .reading-followup-dock .reading-followup-message-row button {
    padding-inline: 8px;
    white-space: normal;
  }

  .reading-followup-chip-list {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-padding-inline: 2px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  .reading-followup-chip-list button {
    flex: 0 0 min(250px, 78vw);
    min-height: 48px;
    scroll-snap-align: start;
  }

  .reading-chat-bubble {
    width: 100%;
  }

  .reading-result {
    gap: 12px;
    padding: 12px;
  }

  .reading-chat-bubble.user.origin {
    justify-self: stretch;
  }

  .reading-conversation[data-conversation-continuity="question_visible"] .reading-chat-bubble.user.origin {
    width: 100%;
  }

  .reading-chat-bubble.reader.primary {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .reading-chat-bubble.reader.primary > .reading-chat-avatar {
    display: none;
  }

  .reading-chat-bubble.repair {
    width: 100%;
  }

  .reading-result-feedback {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .reading-followup-feedback-row {
    align-items: stretch;
    flex-direction: column;
  }

  .reading-followup-feedback-row > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reading-repair-offer {
    grid-template-columns: 1fr;
  }

  .reading-repair-offer > button {
    width: 100%;
  }

  .reading-result-feedback.repaired .reading-result-feedback-heading {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .reading-conversation-presence {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 0 0 9px;
  }

  .reading-presence-avatar {
    width: 38px;
    height: 38px;
  }

  .reading-conversation-presence em {
    display: none;
  }

  .reading-conversation-details summary {
    min-height: 66px;
  }

  .reading-conversation-details summary small {
    display: none;
  }

  .reading-conversation-handoff-grid {
    grid-template-columns: 1fr;
  }

  .reading-conversation-handoff-grid strong {
    white-space: normal;
  }

  .reading-conversation-draw-receipt {
    grid-template-columns: 1fr;
  }

  .reading-conversation-draw-receipt-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .reading-conversation-draw-receipt-grid em,
  .reading-conversation-draw-receipt-grid strong {
    white-space: normal;
  }

  .reading-chat-quick-replies {
    grid-template-columns: 1fr;
  }

  .reading-chat-next-step-items {
    grid-template-columns: 1fr;
  }

  .reading-chat-free-answer-items {
    grid-template-columns: 1fr;
  }

  .reading-chat-free-answer-items strong {
    white-space: normal;
  }

  .reading-composer-presence {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .reading-composer-presence-copy strong,
  .reading-composer-presence-copy small {
    white-space: normal;
  }

  .reading-composer-presence-chips {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .reading-composer-presence-chips small,
  .reading-composer-presence-chips b {
    white-space: normal;
  }

  .reading-composer-turn-receipt {
    grid-template-columns: 1fr;
  }

  .reading-composer-turn-receipt small,
  .reading-composer-turn-receipt b {
    white-space: normal;
  }

  .reading-chat-decision-coach-chips {
    grid-template-columns: 1fr;
  }

  .reading-chat-decision-coach-chips strong {
    white-space: normal;
  }

  .reading-composer-receipt-grid {
    grid-template-columns: 1fr;
  }

  .reading-composer-receipt-grid strong {
    white-space: normal;
  }

  .reading-composer-handoff-plan-grid {
    grid-template-columns: 1fr;
  }

  .reading-composer-handoff-plan-grid strong {
    white-space: normal;
  }

  .reading-composer-continuity {
    grid-template-columns: 1fr;
  }

  .reading-composer-continuity-steps {
    grid-template-columns: 1fr;
  }

  .reading-composer-continuity-steps small,
  .reading-composer-continuity-steps b {
    white-space: normal;
  }

  .reading-composer-submit-bridge {
    grid-template-columns: 1fr;
  }

  .reading-composer-submit-items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .reading-composer-submit-copy p {
    -webkit-line-clamp: 1;
  }

  .reading-composer-submit-items small,
  .reading-composer-submit-items b {
    white-space: nowrap;
  }

  .reading-composer-refine-actions {
    grid-template-columns: 1fr;
  }

  .reading-reader-strip {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 14px;
  }

  .reading-reader-strip[data-reader] {
    grid-template-columns: 1fr;
    height: auto;
    gap: 0;
    align-items: start;
    min-height: auto;
    padding: 10px;
    --reading-reader-mobile-ratio: 3 / 2;
    --reading-reader-motion-scale: var(--reading-reader-mobile-scale, 1);
  }

  .reading-reader-portrait-frame {
    width: auto;
    margin: 0;
  }

  .reading-reader-strip[data-reader]::before {
    background:
      radial-gradient(circle at 50% 20%, transparent 0 38%, rgba(6, 8, 10, 0.04) 72%, rgba(6, 8, 10, 0.14) 100%),
      linear-gradient(180deg, rgba(5, 7, 9, 0), rgba(5, 7, 9, 0.16));
  }

  .reading-reader-strip[data-reader] .reading-reader-portrait-frame {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: var(--reading-reader-mobile-ratio, 4 / 5);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--reader-accent) 46%, rgba(244, 240, 232, 0.12));
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
  }

  .reading-reader-strip[data-reader] .reading-reader-portrait-frame::before {
    background:
      radial-gradient(circle at 50% 24%, var(--reader-glow), transparent 30%),
      linear-gradient(180deg, rgba(5, 7, 9, 0), rgba(5, 7, 9, 0.1) 78%, rgba(5, 7, 9, 0.18));
    opacity: 0.5;
  }

  .reading-reader-strip[data-reader] .reading-reader-portrait-frame::after {
    inset: 6% 10% auto auto;
    width: 30%;
    height: 30%;
    opacity: 0.34;
  }

  .reading-reader-strip[data-reader] .reading-reader-portrait-frame > img {
    object-position: var(--reading-reader-mobile-position, var(--reading-reader-position, center 22%));
    filter: saturate(1.06) contrast(1.02) brightness(1.08);
  }

  .reading-reader-strip[data-reader].reader-motion-active .reading-reader-portrait-frame > img {
    filter: saturate(1.1) contrast(1.03) brightness(1.12);
  }

  .reading-reader-strip[data-reader] .reading-reader-copy {
    position: absolute;
    inset: auto 10px 60px;
    z-index: 3;
    max-width: none;
    margin: 0;
    gap: 2px;
    padding: 28px 10px 8px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(180deg, transparent, rgba(7, 10, 10, 0.78) 44%, rgba(7, 10, 10, 0.94));
    backdrop-filter: none;
    pointer-events: none;
  }

  .reading-reader-strip[data-reader] .reading-reader-copy > span,
  .reading-reader-strip[data-reader] .reading-reader-presence {
    display: none;
  }

  .reading-reader-strip[data-reader] .reading-reader-copy strong {
    font-size: 1rem;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.72);
  }

  .reading-reader-strip[data-reader] blockquote {
    display: -webkit-box;
    margin: 0;
    padding: 2px 0 0;
    overflow: hidden;
    border: 0;
    color: rgba(255, 248, 232, 0.86);
    background: transparent;
    font-size: 0.78rem;
    line-height: 1.35;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.78);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  .reading-reader-strip[data-reader] > .reading-visual-controls {
    position: static;
    z-index: 2;
    width: 100%;
    height: 42px;
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 8px;
    padding: 5px;
    overflow: hidden;
    background: rgba(7, 10, 10, 0.42);
    backdrop-filter: none;
  }

  .reading-visual-heading {
    display: none;
  }

  .reading-visual-toggle,
  .reading-visual-select {
    min-width: 0;
    min-height: 30px;
    padding: 3px 6px;
  }

  .reading-visual-toggle {
    flex: 0 1 auto;
  }

  .reading-visual-toggle span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .reading-visual-select {
    flex: 1 1 auto;
    justify-content: flex-end;
  }

  .reading-visual-select > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .reading-visual-select select {
    width: 100%;
    min-width: 0;
  }

  .reading-core-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 7px;
  }

  .reading-core-flow article {
    min-height: 50px;
    padding: 7px;
  }

  .reading-core-flow small {
    display: none;
  }

  .reading-form {
    width: 100%;
    margin-top: 0;
    padding: 9px;
  }

  .reading-message-row {
    grid-template-columns: 1fr;
  }

  .reading-form[data-dialogue-state="starter"] > .reading-message-row,
  .reading-form[data-dialogue-state="short"] > .reading-message-row,
  .reading-form[data-dialogue-state="closed"] > .reading-message-row,
  .reading-form[data-question-editor-focus="expanded"] > .reading-message-row {
    order: -2;
  }

  .reading-form[data-dialogue-state="starter"][data-question-editor-focus="collapsed"] > .reading-message-row,
  .reading-form[data-dialogue-state="short"][data-question-editor-focus="collapsed"] > .reading-message-row,
  .reading-form[data-dialogue-state="closed"][data-question-editor-focus="collapsed"] > .reading-message-row {
    grid-template-columns: minmax(0, 1fr) minmax(92px, 30%);
    gap: 7px;
    padding: 7px;
  }

  .reading-form[data-dialogue-state="starter"] > .reading-chat-composer,
  .reading-form[data-dialogue-state="short"] > .reading-chat-composer,
  .reading-form[data-dialogue-state="closed"] > .reading-chat-composer,
  .reading-form[data-question-editor-focus="expanded"] > .reading-chat-composer {
    order: -1;
  }

  .reading-form[data-question-editor-mode="compose"][data-question-editor-focus="collapsed"] .reading-message-input {
    min-height: 52px;
    gap: 0;
    padding: 4px 8px;
  }

  .reading-form[data-question-editor-mode="compose"][data-question-editor-focus="collapsed"] .reading-message-input-kicker,
  .reading-form[data-question-editor-mode="compose"][data-question-editor-focus="collapsed"] .reading-message-input-hint {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .reading-form[data-question-editor-mode="compose"][data-question-editor-focus="collapsed"] .reading-message-input textarea {
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    margin-top: 0;
    resize: none;
  }

  .reading-form[data-dialogue-state="ready"] .reading-message-row {
    position: sticky;
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    z-index: 18;
    border-color: color-mix(in srgb, var(--reader-accent) 62%, rgba(217, 183, 96, 0.24));
    background:
      linear-gradient(145deg, color-mix(in srgb, var(--reader-glow) 34%, rgba(16, 20, 18, 0.86)), rgba(9, 12, 12, 0.94)),
      rgba(16, 20, 18, 0.92);
    box-shadow:
      0 -12px 34px rgba(0, 0, 0, 0.38),
      inset 0 0 0 1px color-mix(in srgb, var(--reader-accent) 20%, transparent);
    backdrop-filter: blur(18px);
  }

  .reading-form[data-question-editor-mode="compact_confirm"][data-question-editor-focus="collapsed"] .reading-message-row {
    grid-template-columns: minmax(0, 1fr) minmax(108px, 34%);
    gap: 7px;
    padding: 7px;
  }

  .reading-form[data-question-editor-mode="compact_confirm"][data-question-editor-focus="collapsed"] .reading-message-input::after {
    max-width: 44px;
    margin-right: 8px;
    padding-left: 6px;
    font-size: 0.66rem;
  }

  .reading-form[data-question-editor-mode="compact_confirm"][data-question-editor-focus="collapsed"] .reading-message-row > #start-web-reading {
    padding-inline: 8px;
    font-size: 0.76rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .reading-message-row > #start-web-reading {
    min-height: 44px;
  }

  .reading-composer-quick-replies {
    grid-template-columns: repeat(3, minmax(172px, 1fr));
    overflow-x: auto;
    padding-bottom: 3px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  .reading-composer-quick-reply {
    scroll-snap-align: start;
  }

  .reading-composer-paths {
    grid-template-columns: repeat(2, minmax(252px, 1fr));
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  .reading-composer-path {
    min-height: 0;
    scroll-snap-align: start;
  }

  .reading-composer-refine-actions {
    grid-template-columns: 1fr;
  }

  .reading-composer-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .reading-composer-header span {
    max-width: 100%;
    text-align: left;
    white-space: normal;
  }

  .reading-composer-stage {
    max-height: none;
  }

  .reading-composer-bubble {
    max-width: 100%;
  }

  .reading-field textarea {
    min-height: 68px;
  }

  .reading-message-input textarea {
    min-height: 62px;
  }

  .reading-question-helper-heading {
    grid-template-columns: 1fr;
  }

  .reading-form:not(.assist-expanded) .reading-question-helper-heading {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .reading-assist-toggle {
    width: 100%;
  }

  .reading-settings-toggle {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .reading-question-template-list {
    display: grid;
    grid-template-columns: 1fr;
  }

  .reading-question-template {
    border-radius: 8px;
  }

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

  .reading-form .reading-options select {
    min-height: 40px;
    padding-inline: 8px;
    font-size: 0.86rem;
  }

  .reading-spread-advisor-heading {
    grid-template-columns: 1fr;
  }

  .reading-spread-recommendation-list {
    grid-template-columns: 1fr;
  }

  .reading-spread-recommendation {
    min-height: auto;
  }

  .reading-draw-summary-grid {
    grid-template-columns: 1fr;
  }

  .reading-draw-summary-grid strong {
    white-space: normal;
  }

  .reading-draw-ritual {
    grid-template-columns: 1fr;
  }

  .reading-draw-visual {
    min-height: 172px;
  }

  .reading-draw-steps span,
  .reading-draw-selected span {
    flex: 1 1 136px;
  }

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

  .reading-result-ritual-details-body {
    grid-template-columns: 1fr;
  }

  .reading-result-ritual-steps {
    grid-template-columns: 1fr;
  }

  .reading-card-insight {
    grid-template-columns: 1fr;
  }

  .reading-card-insight-head {
    grid-template-columns: 42px minmax(0, 1fr) 74px;
    align-items: center;
  }

  .reading-card-insight-head img {
    width: 74px;
  }

  .reading-card-insight-card {
    display: grid;
  }

  .reading-card-insight-card button {
    width: 100%;
  }

  .reading-card-insight-sections {
    grid-column: 1;
    grid-template-columns: 1fr;
  }

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

  .reading-result-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .reading-guest-save {
    grid-template-columns: minmax(0, 1fr) minmax(104px, 38%);
    gap: 8px;
    padding: 8px 10px;
  }

  .reading-guest-save button {
    width: 100%;
    min-height: 38px;
    padding-inline: 9px;
    white-space: normal;
    line-height: 1.25;
  }

  .reading-guest-save small {
    display: none;
  }

  .reading-guest-save strong {
    font-size: 0.86rem;
    line-height: 1.3;
  }

  .reading-result-support-heading {
    grid-template-columns: 1fr;
    gap: 3px;
    min-height: 64px;
  }

  .reading-result-support-heading small {
    grid-column: 1;
    grid-row: auto;
    max-width: none;
    text-align: left;
  }

  .reading-result-decision-head {
    display: grid;
    gap: 3px;
  }

  .reading-result-decision-options,
  .reading-result-decision-strip[data-options="2"] .reading-result-decision-options {
    grid-template-columns: 1fr;
  }

  .reading-result-decision-option {
    min-height: auto;
  }

  .reading-result-decision-coach-chips {
    grid-template-columns: 1fr;
  }

  .reading-result-decision-coach-chips strong {
    white-space: normal;
  }

  .reading-result-decision-proof {
    grid-template-columns: 1fr;
  }

  .reading-result-decision-proof-items {
    grid-template-columns: 1fr;
  }

  .reading-result-decision-proof-items b {
    -webkit-line-clamp: 3;
  }

  .reading-result-recap {
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
  }

  .reading-result-recap-avatar {
    width: 44px;
    height: 44px;
  }

  .reading-result-recap-points {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }

  .reading-result-recap-points small {
    min-height: auto;
  }

  .reading-result-recap-points strong {
    -webkit-line-clamp: 4;
  }

  .reading-result-upgrade-teaser {
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
  }

  .reading-result-upgrade-teaser-avatar {
    width: 44px;
    height: 44px;
  }

  .reading-result-upgrade-teaser-values,
  .reading-result-upgrade-teaser-plan,
  .reading-result-upgrade-teaser-foot {
    grid-column: 1 / -1;
  }

  .reading-result-upgrade-teaser-values,
  .reading-result-upgrade-teaser-plan {
    grid-template-columns: 1fr;
  }

  .reading-result-upgrade-teaser-values b,
  .reading-result-upgrade-teaser-plan b {
    min-height: auto;
  }

  .reading-result-upgrade-teaser-values span,
  .reading-result-upgrade-teaser-plan span {
    white-space: normal;
  }

  .reading-result-upgrade-teaser-foot {
    justify-items: stretch;
  }

  .reading-result-upgrade-teaser-foot small {
    text-align: left;
  }

  .reading-result-upgrade-teaser-foot strong {
    width: 100%;
  }

  .reading-result-recommendation {
    grid-template-columns: minmax(0, 1fr) minmax(112px, auto);
    align-items: center;
    padding: 9px 10px;
  }

  .reading-result-recommendation-avatar {
    display: none;
  }

  .reading-result-paid-receipt > div {
    grid-template-columns: 1fr;
  }

  .reading-result-paid-receipt b {
    -webkit-line-clamp: 3;
  }

  .reading-result-recommendation-action {
    grid-column: auto;
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .reading-result-recommendation-action em {
    display: none;
  }

  .reading-result-recommendation-action .reading-commerce-action-row,
  .reading-result-recommendation-action button {
    width: 100%;
  }

  .reading-result-continuation-guide {
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
  }

  .reading-result-continuation-avatar {
    width: 42px;
    height: 42px;
  }

  .reading-result-continuation-points {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }

  .reading-result-continuation-guide[data-upgrade-available="false"] .reading-result-continuation-points {
    grid-template-columns: 1fr;
  }

  .reading-result-next-heading {
    display: grid;
  }

  .reading-result-next-heading span {
    max-width: none;
    text-align: left;
  }

  .reading-result-dialogue-bridge {
    grid-template-columns: 1fr;
  }

  .reading-result-dialogue-actions,
  .reading-result-dialogue-actions button {
    width: 100%;
  }

  .reading-result-conversion-points {
    grid-template-columns: 1fr;
  }

  .reading-result-next-grid,
  .reading-result-utility-actions {
    grid-template-columns: 1fr;
  }

  .reading-upgrade-card {
    grid-template-columns: 1fr;
  }

  .reading-upgrade-value-grid {
    grid-template-columns: 1fr;
  }

  .reading-paid-value-grid,
  .reading-paid-followup-prompts {
    grid-template-columns: 1fr;
  }

  .reading-upgrade-plan > div {
    grid-template-columns: 1fr;
  }

  .reading-upgrade-foot {
    grid-template-columns: 1fr;
  }

  .reading-upgrade-foot button {
    width: 100%;
  }

  .reading-followup-commerce {
    grid-template-columns: 1fr;
  }

  .reading-followup-commerce small,
  .reading-followup-commerce .reading-commerce-cta {
    grid-column: 1;
    grid-row: auto;
  }

  .reading-reader-recommendation-list {
    grid-template-columns: 1fr;
  }

  .reading-reader-recommendation-card {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .reading-reader-recommendation-card em {
    grid-column: 2;
    max-width: 100%;
    text-align: left;
  }

  .reader-profile-layout {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .reader-profile-portrait {
    width: min(64vw, 220px);
    margin: 0 auto;
  }

  .reader-profile-portrait img {
    min-height: 260px;
    aspect-ratio: 4 / 5;
  }

  .reader-profile-meta,
  .reader-card-actions {
    grid-template-columns: 1fr;
  }

  .reader-code-row {
    grid-template-columns: 1fr;
  }

  .reader-code-row button {
    width: 100%;
  }

  .reading-pick-heading {
    align-items: center;
  }

  .reading-pick-heading > span {
    width: fit-content;
  }

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

  .reading-pick-meta span {
    min-height: 48px;
    padding: 7px;
  }

  .reading-pick-meta small {
    font-size: 0.66rem;
  }

  .reading-pick-meta strong {
    font-size: 0.76rem;
  }

  .reading-pick-conversation {
    padding: 9px;
  }

  .reading-pick-bubble {
    max-width: 100%;
  }

  .reading-pick-briefing-grid {
    grid-template-columns: 1fr;
  }

  .reading-pick-briefing-grid strong {
    white-space: normal;
  }

  .reading-pick-handoff {
    grid-template-columns: 1fr;
  }

  .reading-pick-handoff-grid {
    grid-template-columns: 1fr;
  }

  .reading-pick-handoff-grid small,
  .reading-pick-handoff-grid strong {
    white-space: normal;
  }

  .reading-draw-handoff-grid {
    grid-template-columns: 1fr;
  }

  .reading-draw-handoff-grid small,
  .reading-draw-handoff-grid strong {
    white-space: normal;
  }

  .reading-pick-deck {
    grid-template-columns: none;
    grid-auto-columns: clamp(76px, 24vw, 92px);
    grid-auto-flow: column;
    justify-content: start;
    overflow-x: auto;
    padding: 4px 2px 8px;
    scroll-padding-inline: 2px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  .reading-pick-card {
    min-height: 108px;
    scroll-snap-align: start;
  }

  .reading-pick-stage:not([hidden]) {
    gap: 9px;
    padding: 13px 12px max(13px, env(safe-area-inset-bottom, 0));
  }

  .reading-pick-heading h3 {
    font-size: 1rem;
  }

  .reading-pick-heading > span {
    padding: 5px 8px;
  }

  .reading-pick-reader-note {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 9px;
    padding: 9px;
  }

  .reading-pick-reader-note img {
    width: 44px;
    height: 44px;
  }

  .reading-pick-reader-note p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.84rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .reading-pick-action {
    gap: 2px;
    padding: 9px 10px;
  }

  .reading-pick-action strong {
    font-size: 0.88rem;
  }

  .reading-pick-action small {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.74rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .reading-pick-prep-details > summary {
    grid-template-columns: 1fr;
    gap: 2px;
    min-height: 50px;
    padding-block: 8px;
  }

  .reading-pick-prep-details > summary strong {
    white-space: normal;
  }

  .reading-draw-ritual {
    grid-template-columns: 1fr;
    gap: 10px;
    min-height: 248px;
    text-align: left;
  }

  .reading-draw-ritual:not([hidden]) {
    min-height: auto;
    padding: 16px 12px max(16px, env(safe-area-inset-bottom, 0));
  }

  .reading-draw-visual {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-height: 84px;
  }

  .reading-draw-avatar {
    width: 44px;
    height: 44px;
  }

  .reading-draw-deck {
    min-height: 88px;
  }

  .reading-draw-deck::before {
    inset: 24px 12% auto;
    height: 46px;
  }

  .reading-draw-deck span {
    top: 3px;
    left: calc(50% - 29px);
    width: 58px;
  }

  .reading-draw-deck span:nth-child(1) {
    transform: translateX(-42px) rotate(-15deg);
  }

  .reading-draw-deck span:nth-child(2) {
    transform: translateX(-21px) rotate(-7deg);
  }

  .reading-draw-deck span:nth-child(3) {
    transform: rotate(0deg);
  }

  .reading-draw-deck span:nth-child(4) {
    transform: translateX(21px) rotate(7deg);
  }

  .reading-draw-deck span:nth-child(5) {
    transform: translateX(42px) rotate(15deg);
  }

  .reading-draw-copy {
    gap: 8px;
  }

  .reading-draw-copy > p {
    margin: 0;
  }

  .reading-draw-copy > strong {
    font-size: 1rem;
    line-height: 1.4;
  }

  .reading-draw-question {
    padding: 8px 9px;
  }

  .reading-draw-question span {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.82rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .reading-draw-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .reading-draw-steps span {
    grid-template-columns: 1fr;
    gap: 4px;
    justify-items: center;
    min-width: 0;
    padding: 6px;
    text-align: center;
  }

  .reading-draw-steps em {
    grid-row: auto;
    width: 22px;
    height: 22px;
  }

  .reading-draw-steps strong {
    font-size: 0.68rem;
    line-height: 1.15;
    white-space: normal;
  }

  .reading-draw-details > summary {
    grid-template-columns: 1fr;
    gap: 2px;
    min-height: 50px;
    padding-block: 8px;
  }

  .reading-draw-details > summary strong {
    white-space: normal;
  }

  .reading-result-heading {
    display: grid;
  }

  .reading-result-heading > span {
    width: fit-content;
  }

  .reading-card-list,
  .reading-card-list[data-layout="single"],
  .reading-card-list[data-layout="three_line"],
  .reading-card-list[data-layout="cross"],
  .reading-card-list[data-layout="celtic_cross"] {
    grid-template-columns: 1fr;
    grid-template-areas: none;
    justify-content: stretch;
  }

  .reading-card-list .reading-card {
    grid-area: auto !important;
  }

  .reading-card {
    min-height: auto;
  }

  .reading-card:hover,
  .reading-card:focus-within {
    transform: translateY(-4px) scale(1.02);
  }

  .reading-card-insights {
    grid-template-columns: 1fr;
  }

  .reading-card-modal {
    align-items: end;
    padding: 10px;
  }

  .reading-card-modal-card {
    max-height: 94vh;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
  }

  .reading-card-modal-image {
    width: min(48vw, 176px);
    margin: 0 auto;
  }

  .reading-card-modal-copy {
    padding-right: 0;
  }

  .tabs {
    justify-content: flex-start;
    gap: 6px;
    overflow: visible;
    scrollbar-width: none;
    scroll-snap-type: none;
  }

  .tabs::-webkit-scrollbar {
    display: none;
  }

  .tabs > .tab {
    flex: 1 1 0;
    min-width: 0;
    font-size: 0.86rem;
    scroll-snap-align: none;
  }

  .tabs-more {
    flex: 0 0 78px;
  }

  .tabs-more-panel .tab {
    min-width: 0;
    height: 40px;
    flex: none;
    font-size: 0.88rem;
  }

  .tab span {
    display: block;
    margin-right: 0;
    line-height: 1;
  }

  .tabs-more-panel .tab span {
    display: inline-block;
    margin-right: 4px;
  }

  .product-card,
  .achievement-item,
  .workshop-recipe {
    align-items: flex-start;
    flex-direction: column;
  }

  .shop-channel-panel {
    grid-template-columns: 1fr;
  }

  .shop-topup-intent {
    grid-template-columns: 1fr;
  }

  .shop-topup-reading-context {
    grid-template-columns: 1fr;
  }

  .shop-topup-handoff-summary {
    grid-template-columns: 1fr;
  }

  .shop-purchase-return {
    grid-template-columns: 1fr;
  }

  .shop-purchase-return-grid {
    grid-template-columns: 1fr;
  }

  .shop-purchase-return-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .shop-channel-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .shop-topup-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .shop-channel-actions a,
  .shop-topup-actions a {
    width: 100%;
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }

  .settings-actions,
  .ai-consent-actions {
    grid-template-columns: 1fr;
  }

  .settings-actions {
    display: grid;
  }

  .ai-consent-modal {
    align-items: end;
    padding: 10px;
  }

  .reading-payment-modal {
    align-items: end;
    padding: 10px;
  }

  .reading-payment-card {
    max-height: calc(100svh - 20px);
  }

  .reading-payment-proof {
    gap: 6px;
  }

  .reading-payment-proof div {
    padding: 8px 8px 8px 24px;
  }

  .reading-payment-proof div::before {
    left: 10px;
    top: 14px;
  }

  .reading-payment-summary div,
  .reading-payment-actions {
    grid-template-columns: 1fr;
  }

  .reading-payment-actions {
    position: sticky;
    bottom: -1px;
    padding-top: 10px;
    background: linear-gradient(to bottom, rgba(16, 20, 18, 0), var(--surface-strong) 34%);
  }

  .cottage-layout {
    grid-template-columns: 1fr;
  }

  .cottage-scene,
  .cottage-room {
    min-height: 560px;
  }

  .cottage-room {
    padding: 14px;
  }

  .cottage-slot-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    min-height: auto;
  }

  .slot-wall,
  .slot-window,
  .slot-table,
  .slot-center,
  .slot-door {
    grid-column: auto;
    grid-row: auto;
  }

  .cottage-decor-card,
  .cottage-reader-toggle {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .cottage-decor-card .cottage-place-button,
  .cottage-reader-toggle button {
    grid-column: 1 / -1;
    width: 100%;
  }

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

  .workshop-recipe-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .product-button,
  .reader-button,
  .skin-pack-action,
  .skin-action,
  .workshop-craft-button {
    width: 100%;
  }

  .skin-modal {
    padding: 10px;
    align-items: end;
  }

  .skin-modal-card {
    max-height: 94vh;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
  }

  .skin-preview {
    width: min(48vw, 176px);
    margin: 0 auto;
  }

  .skin-modal-copy {
    padding-right: 0;
  }

  .skin-option {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .skin-pack-option {
    grid-template-columns: 48px minmax(0, 1fr);
  }
}

@media (max-width: 640px) and (max-height: 640px) {
  body[data-active-tab="reading"] .app-shell {
    padding-top: max(8px, env(safe-area-inset-top, 0px));
  }

  body[data-active-tab="reading"] .topbar {
    gap: 8px;
  }

  body[data-active-tab="reading"] .topbar > div:first-child {
    min-width: 0;
  }

  body[data-active-tab="reading"] .topbar .eyebrow,
  body[data-active-tab="reading"] #connection-status,
  body[data-active-tab="reading"] #reading-view > .section-heading .muted {
    display: none;
  }

  body[data-active-tab="reading"] .topbar h1 {
    margin-top: 0;
    overflow: hidden;
    font-size: 1.08rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-active-tab="reading"] .account-pill {
    margin-top: 3px;
    padding: 2px 6px;
    font-size: 0.7rem;
  }

  body[data-active-tab="reading"] .icon-button {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  body[data-active-tab="reading"] .topbar-logout {
    min-height: 36px;
    padding-inline: 8px;
    font-size: 0.74rem;
  }

  body[data-active-tab="reading"] .tabs {
    margin: 8px 0;
    padding: 4px;
  }

  body[data-active-tab="reading"] .tab,
  body[data-active-tab="reading"] .tabs-more summary {
    height: 36px;
  }

  body[data-active-tab="reading"] .tabs-more {
    flex-basis: 76px;
  }

  body[data-active-tab="reading"] #reading-view > .section-heading h2 {
    margin-top: 0;
    font-size: 1.05rem;
  }

  .reading-reader-strip[data-reader] {
    --reading-reader-mobile-ratio: 2 / 1;
  }

  .reading-reader-strip[data-reader] .reading-reader-copy {
    bottom: 56px;
  }

  .reading-reader-strip[data-reader] > .reading-visual-controls {
    height: 38px;
  }

  .reading-reader-strip[data-reader] blockquote {
    display: none;
  }

}

@media (max-width: 900px) {
  .tarot-focus-panel[data-demo-reader="true"],
  .tarot-focus-panel[data-partner-ref]:not([data-partner-ref=""]) {
    min-height: min(760px, calc(100svh - 110px));
    height: min(760px, calc(100svh - 110px));
  }

  .tarot-focus-panel[data-demo-reader="true"] .tarot-sanctuary,
  .tarot-focus-panel[data-partner-ref]:not([data-partner-ref=""]) .tarot-sanctuary {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "."
      "status"
      "actions";
    padding: 14px;
  }

  .tarot-focus-panel[data-demo-reader="true"] .tarot-sanctuary-copy,
  .tarot-focus-panel[data-partner-ref]:not([data-partner-ref=""]) .tarot-sanctuary-copy {
    position: absolute;
    z-index: 4;
    top: 18px;
    left: 18px;
    max-width: min(42vw, 14rem);
    padding-top: 0;
  }

  .tarot-focus-panel[data-demo-reader="true"] .tarot-sanctuary-title-full,
  .tarot-focus-panel[data-partner-ref]:not([data-partner-ref=""]) .tarot-sanctuary-title-full {
    display: none;
  }

  .tarot-focus-panel[data-demo-reader="true"] .tarot-sanctuary-title-mobile,
  .tarot-focus-panel[data-partner-ref]:not([data-partner-ref=""]) .tarot-sanctuary-title-mobile {
    display: inline;
  }

  .tarot-focus-panel[data-demo-reader="true"] .tarot-sanctuary-copy h2,
  .tarot-focus-panel[data-partner-ref]:not([data-partner-ref=""]) .tarot-sanctuary-copy h2 {
    max-width: 7em;
    font-size: clamp(2rem, 8vw, 3.2rem);
    line-height: 0.98;
  }

  .tarot-focus-panel[data-demo-reader="true"] .tarot-sanctuary-copy p:not(.daily-kicker),
  .tarot-focus-panel[data-demo-reader="true"] .tarot-sanctuary-copy small,
  .tarot-focus-panel[data-partner-ref]:not([data-partner-ref=""]) .tarot-sanctuary-copy p:not(.daily-kicker),
  .tarot-focus-panel[data-partner-ref]:not([data-partner-ref=""]) .tarot-sanctuary-copy small {
    display: none;
  }

  .tarot-focus-panel[data-demo-reader="true"] .tarot-sanctuary-referral,
  .tarot-focus-panel[data-partner-ref]:not([data-partner-ref=""]) .tarot-sanctuary-referral {
    max-width: min(42vw, 13rem);
    margin-top: 10px;
    padding: 10px;
  }

  .tarot-focus-panel[data-demo-reader="true"] .tarot-sanctuary-referral strong,
  .tarot-focus-panel[data-partner-ref]:not([data-partner-ref=""]) .tarot-sanctuary-referral strong {
    display: none;
  }

  .tarot-focus-panel[data-demo-reader="true"] .tarot-sanctuary-referral span,
  .tarot-focus-panel[data-partner-ref]:not([data-partner-ref=""]) .tarot-sanctuary-referral span {
    font-size: 0.76rem;
    line-height: 1.25;
  }

  .tarot-focus-panel[data-demo-reader="true"] .tarot-sanctuary-referral button,
  .tarot-focus-panel[data-partner-ref]:not([data-partner-ref=""]) .tarot-sanctuary-referral button {
    width: 100%;
    min-height: 34px;
    padding: 0 8px;
    font-size: 0.78rem;
    line-height: 1.2;
    white-space: normal;
  }

  .tarot-focus-panel[data-demo-reader="true"] .tarot-sanctuary-reader img,
  .tarot-focus-panel[data-partner-ref]:not([data-partner-ref=""]) .tarot-sanctuary-reader img {
    object-position: var(--daily-reader-mobile-position, var(--daily-reader-position, center top));
  }

  .tarot-focus-panel[data-demo-reader="true"] .tarot-sanctuary-status,
  .tarot-focus-panel[data-partner-ref]:not([data-partner-ref=""]) .tarot-sanctuary-status {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-self: end;
  }

  .tarot-focus-panel[data-demo-reader="true"] .tarot-sanctuary-actions,
  .tarot-focus-panel[data-partner-ref]:not([data-partner-ref=""]) .tarot-sanctuary-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tarot-focus-panel[data-demo-reader="true"] .tarot-sanctuary-primary,
  .tarot-focus-panel[data-partner-ref]:not([data-partner-ref=""]) .tarot-sanctuary-primary {
    grid-column: 1 / -1;
  }
}

@keyframes cardReveal {
  0% {
    opacity: 0.35;
    transform: translateY(10px) rotateY(74deg) scale(0.96);
  }
  58% {
    opacity: 1;
    transform: translateY(0) rotateY(-8deg) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateY(0deg) scale(1);
  }
}

@keyframes dailyRevealCard {
  0% {
    opacity: 0;
    transform: translateY(22px) rotateY(78deg) scale(0.82);
  }
  62% {
    opacity: 1;
    transform: translateY(-4px) rotateY(-9deg) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateY(0deg) scale(1);
  }
}

@media (max-width: 700px) {
  .reading-quality-hold {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .reading-quality-hold-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    justify-content: stretch;
  }

  .reading-quality-hold-actions button {
    width: 100%;
  }
}

@media (min-width: 1000px) {
  .reading-panel {
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.95fr);
    align-items: start;
  }

  .reading-panel > .npc-consult-panel,
  .reading-panel > :not(.reading-reader-strip):not(.reading-form):not(.npc-consult-panel) {
    grid-column: 1 / -1;
  }

  .reading-reader-strip[data-reader] {
    grid-column: 1;
    min-height: clamp(600px, calc(100svh - 160px), 760px);
  }

  .reading-form {
    position: sticky;
    top: 12px;
    grid-column: 2;
    width: 100%;
    max-height: clamp(520px, calc(100svh - 260px), 680px);
    align-self: start;
    margin-top: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .reading-form .reading-message-row > #start-web-reading {
    height: 48px;
    min-height: 48px;
    align-self: end;
  }

  .reading-form[data-dialogue-state="ready"] .reading-message-row {
    position: sticky;
    bottom: 0;
    z-index: 18;
    border-color: color-mix(in srgb, var(--reader-accent) 62%, rgba(217, 183, 96, 0.24));
    background:
      linear-gradient(145deg, color-mix(in srgb, var(--reader-glow) 34%, rgba(16, 20, 18, 0.9)), rgba(9, 12, 12, 0.97)),
      rgba(16, 20, 18, 0.94);
    box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(14px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tarot-sanctuary-reader::before,
  .tarot-sanctuary-reader::after,
  .tarot-sanctuary-reader img,
  .reading-reader-ambient,
  .reading-reader-strip[data-reader] .reading-reader-portrait-frame::before,
  .reading-reader-strip[data-reader] .reading-reader-portrait-frame::after,
  .reading-reader-strip[data-reader] .reading-reader-portrait-frame > img,
  .reading-reader-strip[data-reader] .reading-reader-copy::after,
  .reading-reader-presence::after,
  .reading-reader-blink,
  .reading-reader-eye,
  .reading-reader-eye::before,
  .reading-reader-eye::after,
  .reading-draw-ritual::before,
  .reading-draw-ritual::after,
  .reading-draw-deck::before,
  .reading-draw-steps span.active,
  .reading-pick-stage::before,
  .reading-pick-card::before,
  .reading-result-ritual::before,
  .reading-result-ritual-reader img,
  .reading-result.reader-speaking .reading-reader-closing {
    animation: none !important;
  }

  .tarot-sanctuary-reader img,
  .reading-reader-strip[data-reader] .reading-reader-portrait-frame > img,
  .reading-result-ritual-reader img {
    transform: none !important;
  }
}

.reading-panel[data-entry-state] {
  gap: 12px;
}

.reading-panel[data-entry-state] .reading-reader-strip[data-reader] .reading-reader-portrait-frame > img {
  object-position: var(--reading-reader-mobile-position, var(--reading-reader-position, center 22%));
}

.reading-panel[data-entry-state="starter"] .reading-reader-switcher {
  top: 20px;
  right: 20px;
  left: auto;
}

.reading-panel[data-entry-state="starter"] > .reading-form {
  position: static;
  width: 100%;
  max-height: none;
  margin-top: 0;
  overflow: visible;
}

.reading-panel[data-entry-state="starter"] .reading-form > .reading-message-row {
  order: -2;
}

.reading-panel[data-entry-state="starter"] .reading-form > .reading-chat-composer {
  order: -1;
  padding: 0;
  border: 0;
  background: transparent;
}

.reading-panel[data-entry-state="starter"] .reading-chat-composer .reading-composer-header,
.reading-panel[data-entry-state="starter"] .reading-chat-composer .reading-composer-presence,
.reading-panel[data-entry-state="starter"] .reading-chat-composer .reading-composer-stage,
.reading-panel[data-entry-state="starter"] .reading-chat-composer .reading-composer-meta,
.reading-panel[data-entry-state="starter"] .reading-settings-toggle,
.reading-panel[data-entry-state] .reading-core-flow,
.reading-panel[data-entry-state] .reading-history,
.reading-panel[data-entry-state] .reading-empty {
  display: none;
}

body[data-starter-side="locked"] .tabs-more-panel .tab[data-tab="history"],
body[data-starter-side="locked"] .tabs-more-panel .tab[data-tab="cottage"],
body[data-starter-side="locked"] .tabs-more-panel .tab[data-tab="workshop"],
body[data-starter-side="locked"] .tabs-more-panel .tab[data-tab="achievements"] {
  display: none;
}

body[data-starter-side="locked"] .tabs-more-group[data-more-group="play"] {
  display: none;
}

body[data-dialog-open="true"] {
  overflow: hidden;
}

@media (min-width: 1000px) {
  .reading-panel[data-entry-state="starter"] > .reading-form {
    grid-column: 2;
  }
}

@media (max-width: 640px) {
  .app-shell {
    padding-top: max(10px, env(safe-area-inset-top, 0px));
    padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px));
  }

  .topbar {
    min-height: 48px;
    gap: 8px;
  }

  .topbar > div:first-child {
    min-width: 0;
  }

  .topbar .eyebrow,
  .topbar .status-pill:not(.offline),
  .topbar .account-pill[hidden] {
    display: none;
  }

  .topbar h1 {
    margin: 0;
    overflow: hidden;
    font-size: 1.2rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar-actions {
    gap: 6px;
  }

  .topbar .icon-button,
  .topbar-logout {
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .tabs {
    position: fixed;
    top: auto;
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    left: max(12px, env(safe-area-inset-left, 0px));
    z-index: 30;
    width: auto;
    max-width: 480px;
    min-height: 60px;
    margin: 0 auto;
    padding: 6px;
    border-color: rgba(217, 183, 96, 0.3);
    border-radius: 14px;
    background: rgba(13, 18, 16, 0.96);
    box-shadow:
      0 12px 36px rgba(0, 0, 0, 0.54),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }

  .tabs > .tab,
  .tabs-more summary {
    height: 48px;
    min-height: 48px;
    border-radius: 10px;
    font-size: 0.78rem;
  }

  .tabs-more {
    flex-basis: 82px;
  }

  .tabs-more-panel {
    top: auto;
    right: 0;
    bottom: calc(100% + 10px);
    max-height: min(64svh, 430px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 12px;
    box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.5);
  }

  .tabs-more-panel .tab {
    min-height: 44px;
  }

  .tarot-focus-panel[data-home-audience="newcomer"][data-home-state="fresh"],
  .tarot-focus-panel[data-home-audience="newcomer"][data-home-compactness="launch-simple"] {
    height: min(474px, calc(100svh - 138px));
    min-height: 420px;
  }

  .tarot-focus-panel[data-home-audience="newcomer"][data-home-density="focused"] .tarot-sanctuary {
    grid-template-rows: auto minmax(126px, 1fr) auto;
    grid-template-areas:
      "copy"
      "."
      "actions";
    gap: 8px;
    padding: 14px;
  }

  .tarot-focus-panel[data-home-audience="newcomer"][data-home-density="focused"] .tarot-sanctuary-copy {
    display: grid;
    max-width: min(72vw, 17rem);
    gap: 5px;
    padding: 10px 12px;
    border: 1px solid rgba(244, 240, 232, 0.1);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(8, 11, 11, 0.82), rgba(8, 11, 11, 0.38));
    backdrop-filter: blur(8px);
  }

  .tarot-focus-panel[data-home-audience="newcomer"] .tarot-sanctuary-copy h2 {
    max-width: none;
    font-size: 1.32rem;
    line-height: 1.1;
  }

  .tarot-focus-panel[data-home-audience="newcomer"] .tarot-sanctuary-copy p:not(.daily-kicker) {
    display: block;
    margin: 0;
    color: rgba(244, 240, 232, 0.76);
    font-size: 0.78rem;
    line-height: 1.35;
  }

  .tarot-focus-panel[data-home-audience="newcomer"] .tarot-sanctuary-copy > small {
    display: none;
  }

  .tarot-focus-panel[data-home-audience="newcomer"] .tarot-starter-route {
    margin-top: 2px;
    padding-top: 6px;
  }

  .tarot-focus-panel[data-home-audience="newcomer"] .tarot-starter-route > span {
    font-size: 0.72rem;
  }

  .tarot-focus-panel[data-home-audience="newcomer"] .tarot-starter-route ol {
    gap: 4px;
  }

  .tarot-focus-panel[data-home-audience="newcomer"] .tarot-starter-route li {
    gap: 3px;
    font-size: 0.7rem;
  }

  .tarot-focus-panel[data-home-audience="newcomer"] .tarot-starter-route b {
    width: 19px;
    height: 19px;
    font-size: 0.66rem;
  }

  .tarot-focus-panel[data-home-audience="newcomer"] .tarot-sanctuary-actions {
    gap: 8px;
  }

  .tarot-focus-panel[data-home-audience="newcomer"] .tarot-sanctuary-action-card {
    min-height: 54px;
    padding: 9px 11px;
  }

  .tarot-focus-panel[data-home-audience="newcomer"] .tarot-sanctuary-action-card strong {
    font-size: 0.9rem;
  }

  .tarot-focus-panel[data-home-audience="newcomer"] .tarot-sanctuary-action-card small,
  .tarot-focus-panel[data-home-audience="newcomer"] .tarot-sanctuary-action-card em {
    font-size: 0.75rem;
  }

  #reading-view > .section-heading {
    margin-top: 8px;
  }

  #reading-view > .section-note {
    margin-bottom: 10px;
    font-size: 0.8rem;
  }

  .reading-panel[data-entry-state="starter"] .reading-reader-switcher {
    top: 14px;
    right: 14px;
    width: auto;
  }

  .reading-panel[data-entry-state="starter"] .reading-reader-switcher-toggle {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 4px;
    border-radius: 50%;
  }

  .reading-panel[data-entry-state="starter"] .reading-reader-switcher-toggle span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .reading-panel[data-entry-state="starter"] .reading-form {
    padding: 8px;
  }

  .reading-panel[data-entry-state="starter"] .reading-form[data-dialogue-state="starter"] > .reading-message-row {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 7px;
  }

  .reading-panel[data-entry-state="starter"] .reading-settings-toggle {
    display: none;
  }

  .reading-panel[data-entry-state="starter"] .reading-message-input {
    min-height: 82px;
  }

  .reading-panel[data-entry-state="starter"] .reading-message-input textarea {
    min-height: 58px;
    max-height: 120px;
  }

  .reading-panel[data-entry-state="starter"] .reading-message-row > #start-web-reading {
    width: 100%;
    min-height: 46px;
  }

  .reading-panel[data-entry-state="starter"] .reading-composer-quick-replies {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding-bottom: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .reading-panel[data-entry-state="starter"] .reading-composer-quick-title {
    margin-top: 2px;
  }

  .reading-panel[data-entry-state="starter"] .reading-composer-quick-title strong {
    font-size: 0.78rem;
  }

  .reading-panel[data-entry-state="starter"] .reading-composer-quick-title small {
    font-size: 0.72rem;
  }

  .reading-panel[data-entry-state="starter"] .reading-composer-quick-reply {
    min-width: 0;
    min-height: 48px;
    padding: 7px 5px;
  }

  .reading-panel[data-entry-state="starter"] .reading-composer-quick-reply strong {
    font-size: 0.73rem;
  }

  .reading-panel[data-entry-state="starter"] .reading-composer-quick-reply small {
    display: none;
  }

  .reading-form[data-dialogue-state="ready"] .reading-message-row {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 640px) and (max-height: 640px) {
  .reading-panel[data-entry-state="starter"] .reading-message-input {
    min-height: 64px;
    padding: 5px 7px;
  }

  .reading-panel[data-entry-state="starter"] .reading-message-input-kicker,
  .reading-panel[data-entry-state="starter"] .reading-message-input-hint {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .reading-panel[data-entry-state="starter"] .reading-message-input textarea {
    min-height: 52px;
  }

  .reading-panel[data-entry-state="starter"] .reading-composer-quick-title {
    display: none;
  }
}

#today-view[data-daily-phase="choosing"] .tarot-focus-panel,
#today-view[data-daily-phase="drawing"] .tarot-focus-panel,
#today-view[data-daily-phase="revealing"] .tarot-focus-panel,
#today-view[data-daily-state="revealed"] .tarot-focus-panel:not([data-home-density="recovery"]) {
  display: none;
}

#today-view[data-daily-state="fresh"] .tarot-starter-route,
#today-view[data-daily-state="fresh"] .tarot-sanctuary-note {
  display: none;
}

#today-view[data-daily-state="fresh"][data-daily-phase="choosing"] .daily-ritual,
#today-view[data-daily-state="fresh"][data-daily-phase="drawing"] .daily-ritual {
  display: grid;
}

.daily-ritual {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: clamp(16px, 3vw, 26px);
  text-align: center;
}

.daily-ritual h2,
.daily-ritual p {
  justify-self: center;
}

.daily-ritual h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 3vw, 2rem);
}

.daily-ritual p {
  max-width: 42rem;
  font-size: 0.92rem;
}

.daily-ritual-deck-toolbar,
.reading-pick-deck-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(217, 183, 96, 0.2);
  border-radius: 10px;
  background: rgba(9, 12, 12, 0.56);
  text-align: left;
}

.daily-ritual-deck-toolbar > span,
.reading-pick-deck-toolbar > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.daily-ritual-deck-toolbar strong,
.reading-pick-deck-toolbar strong {
  color: #fff8e8;
  font-size: 0.9rem;
}

.daily-ritual-deck-toolbar small,
.reading-pick-deck-toolbar small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.daily-ritual-deck-toolbar > em,
.reading-pick-deck-toolbar > em {
  color: var(--gold);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.daily-ritual-deck .ritual-card em,
.reading-pick-card > em {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 2;
  display: grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  padding-inline: 5px;
  border: 1px solid rgba(255, 248, 232, 0.24);
  border-radius: 999px;
  color: rgba(255, 248, 232, 0.84);
  background: rgba(7, 10, 10, 0.76);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
}

.daily-ritual.drawing .daily-ritual-deck .ritual-card:not(.selected) {
  opacity: 0.36;
  transform: translate(-50%, var(--fan-drop)) rotate(var(--fan-angle)) scale(0.94);
}

.daily-ritual-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.daily-ritual .daily-ritual-actions .primary-button,
.daily-ritual .daily-ritual-actions .secondary-button {
  width: auto;
  min-width: min(100%, 168px);
  min-height: 46px;
  justify-self: auto;
}

#today-view[data-daily-state="revealed"] .daily-core-result {
  order: 1;
}

#today-view[data-daily-state="revealed"] .daily-question-card {
  order: 2;
}

#today-view[data-daily-state="revealed"] .daily-insights-disclosure {
  order: 3;
}

.daily-intent-selector {
  display: grid;
  width: min(100%, 780px);
  gap: 9px;
  justify-self: center;
  padding: 12px 14px;
  border: 1px solid rgba(217, 183, 96, 0.18);
  border-radius: 14px;
  background: rgba(7, 12, 11, 0.44);
  text-align: left;
}

.daily-intent-heading {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
}

.daily-intent-heading strong {
  color: #fff8e8;
  font-size: 0.88rem;
}

.daily-intent-options {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
}

.daily-intent-options::-webkit-scrollbar {
  display: none;
}

.daily-intent-options button {
  min-width: max-content;
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid rgba(244, 240, 232, 0.14);
  border-radius: 999px;
  color: rgba(244, 240, 232, 0.72);
  background: rgba(244, 240, 232, 0.04);
  cursor: pointer;
}

.daily-intent-options button[aria-pressed="true"] {
  border-color: rgba(239, 204, 111, 0.72);
  color: #fff4cf;
  background: linear-gradient(135deg, rgba(217, 183, 96, 0.25), rgba(93, 137, 125, 0.18));
}

.daily-intent-options button:focus-visible {
  outline: 2px solid #f2cf75;
  outline-offset: 2px;
}

.daily-core-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(217, 183, 96, 0.34);
  border-radius: 20px;
  background:
    radial-gradient(circle at 8% 6%, rgba(217, 183, 96, 0.18), transparent 32%),
    radial-gradient(circle at 90% 42%, rgba(68, 126, 114, 0.15), transparent 34%),
    linear-gradient(145deg, rgba(31, 39, 35, 0.96), rgba(8, 12, 12, 0.98));
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32);
}

.daily-reader-presence {
  order: 0;
  grid-column: 1;
  display: flex;
  min-height: 0;
  gap: 12px;
  align-items: center;
  padding: 17px 22px 11px;
}

.daily-reader-presence img {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border: 1px solid rgba(239, 204, 111, 0.62);
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  box-shadow: 0 0 0 5px rgba(217, 183, 96, 0.07);
}

.daily-reader-presence span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.daily-reader-presence small {
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 900;
}

.daily-reader-presence strong {
  color: #fff8e8;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
}

.daily-core-result > .daily-intent-selector.compact {
  order: 1;
  grid-column: 2;
  width: auto;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  margin: 0 22px 0 0;
  padding: 9px 0 13px;
  border: 0;
  border-bottom: 1px solid rgba(244, 240, 232, 0.09);
  border-radius: 0;
  background: transparent;
}

.daily-core-result .daily-feature-card {
  order: 2;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(142px, 186px) minmax(0, 1fr);
  gap: 20px 24px;
  align-items: center;
  min-height: 0;
  padding: 22px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.daily-core-result .daily-card-thumb {
  grid-row: 1 / span 2;
  align-self: stretch;
  min-height: 240px;
  border: 1px solid rgba(239, 204, 111, 0.42);
  border-radius: 10px;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.38), 0 0 28px rgba(217, 183, 96, 0.08);
}

.daily-feature-copy {
  min-width: 0;
}

.daily-core-result .daily-card-name-line {
  margin: 0 0 7px;
  color: var(--gold);
  font-size: 0.76rem;
  font-weight: 900;
}

.daily-core-result .daily-feature-copy h2 {
  max-width: 34rem;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 3.3vw, 2.25rem);
  line-height: 1.16;
}

.daily-core-result .daily-feature-copy #daily-message {
  margin: 10px 0 0;
  color: #f5ead4;
  font-size: 0.98rem;
  line-height: 1.65;
}

.daily-action-spotlight {
  display: grid;
  gap: 5px;
  margin-top: 16px;
  padding: 13px 15px;
  border: 1px solid rgba(217, 183, 96, 0.28);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(217, 183, 96, 0.13), rgba(85, 126, 116, 0.1));
}

.daily-action-spotlight small {
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 900;
}

.daily-action-spotlight strong {
  color: #fff8e8;
  font-size: 0.94rem;
  line-height: 1.5;
}

.daily-core-result .daily-card-progress {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 7px 10px;
  align-items: center;
  justify-content: flex-start;
  padding-top: 12px;
  border-top: 1px solid rgba(244, 240, 232, 0.08);
  text-align: left;
}

.daily-core-result .daily-card-progress::before {
  display: none;
}

.daily-core-result .daily-score {
  display: inline-flex;
  gap: 3px;
  align-items: baseline;
  color: rgba(244, 240, 232, 0.48);
}

.daily-core-result .daily-score strong {
  color: #fff4d6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
}

.daily-core-result .daily-score small,
.daily-core-result .daily-card-progress > small,
.daily-core-result .daily-reward-note {
  margin: 0;
  color: rgba(244, 240, 232, 0.5);
  font-size: 0.68rem;
}

.daily-core-result .daily-stars {
  display: flex;
  min-height: 0;
  gap: 3px;
}

.daily-core-result .daily-stars span {
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  border-radius: 1px;
  background: rgba(244, 240, 232, 0.16);
}

.daily-core-result .daily-stars span.active {
  background: var(--gold);
  box-shadow: 0 0 8px rgba(217, 183, 96, 0.46);
}

.daily-core-result #daily-card-number {
  margin-left: auto;
  color: rgba(244, 240, 232, 0.66);
  font-size: 0.72rem;
}

.daily-insights-disclosure {
  overflow: hidden;
  border: 1px solid rgba(217, 183, 96, 0.22);
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(34, 40, 36, 0.74), rgba(13, 17, 16, 0.92)),
    rgba(16, 20, 18, 0.84);
}

.daily-insights-disclosure > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 12px;
  align-items: center;
  min-height: 64px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
}

.daily-insights-disclosure > summary::-webkit-details-marker {
  display: none;
}

.daily-insights-disclosure > summary > span {
  display: grid;
  gap: 3px;
}

.daily-insights-disclosure > summary strong {
  color: #fff8e8;
  font-size: 0.94rem;
}

.daily-insights-disclosure > summary small {
  color: var(--muted);
  font-size: 0.76rem;
}

.daily-insights-disclosure > summary > em {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(217, 183, 96, 0.28);
  border-radius: 50%;
  color: var(--gold);
  font-style: normal;
  transition: transform 180ms ease;
}

.daily-insights-disclosure[open] > summary > em {
  transform: rotate(45deg);
}

.daily-insights-body {
  display: grid;
  gap: 14px;
  padding: 0 14px 14px;
  border-top: 1px solid rgba(244, 240, 232, 0.08);
}

.daily-insights-body > :first-child {
  margin-top: 14px;
}

.reading-pick-deck-toolbar {
  position: relative;
  z-index: 1;
}

.reading-pick-deck {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 180px;
  gap: clamp(4px, 0.7vw, 9px);
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 20px 2px 14px;
  touch-action: pan-y;
}

.reading-pick-card,
.reading-pick-card:nth-child(3n + 1),
.reading-pick-card:nth-child(3n + 2),
.reading-pick-card:nth-child(3n) {
  width: auto;
  min-width: 48px;
  max-width: 94px;
  min-height: 142px;
  flex: 1 1 0;
  transform: translateY(var(--fan-lift, 0)) rotate(var(--fan-rotate, 0deg));
}

.reading-pick-card:hover:not(:disabled),
.reading-pick-card:focus-visible {
  z-index: 2;
  transform: translateY(-10px) rotate(0deg) scale(1.025);
}

.reading-pick-card.picked {
  transform: translateY(8px) rotate(0deg) scale(0.94);
}

@media (min-width: 1000px) {
  body[data-active-tab="reading"] .app-shell {
    width: min(1320px, calc(100% - 32px));
  }

  .reading-panel[data-entry-state] {
    position: relative;
    display: block;
    min-height: clamp(760px, calc(100svh - 80px), 900px);
  }

  .reading-panel[data-entry-state] > .npc-consult-panel {
    display: none;
  }

  .reading-panel[data-entry-state] .reading-reader-strip[data-reader] {
    position: relative;
    display: grid;
    width: 100%;
    min-height: clamp(760px, calc(100svh - 80px), 900px);
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    padding: 24px;
    border-radius: 12px;
  }

  .reading-panel[data-entry-state] .reading-reader-strip[data-reader]::before {
    background:
      radial-gradient(circle at 47% 28%, transparent 0 28%, rgba(6, 8, 10, 0.12) 56%, rgba(6, 8, 10, 0.68) 100%),
      linear-gradient(90deg, rgba(5, 7, 9, 0.42), rgba(5, 7, 9, 0.02) 54%, rgba(5, 7, 9, 0.5)),
      linear-gradient(180deg, rgba(5, 7, 9, 0.02), rgba(5, 7, 9, 0.74));
  }

  .reading-panel[data-entry-state] .reading-reader-strip[data-reader] .reading-reader-portrait-frame {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    overflow: hidden;
    border: 0;
    border-radius: 0;
  }

  .reading-panel[data-entry-state] .reading-reader-strip[data-reader] > .reading-visual-controls {
    display: flex;
  }

  .reading-panel[data-entry-state="starter"] .reading-reader-switcher {
    top: 20px;
    right: 20px;
    left: auto;
    width: min(360px, calc(100% - 40px));
  }

}

@media (max-width: 999px) {
  .reading-panel[data-entry-state] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .reading-panel[data-entry-state] > .npc-consult-panel {
    display: none;
  }

  .reading-panel[data-entry-state] .reading-reader-strip[data-reader] {
    order: 1;
    position: relative;
    display: grid;
    min-height: clamp(460px, calc(100svh - 132px), 720px);
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    padding: 12px;
    border-radius: 10px;
  }

  .reading-panel[data-entry-state] .reading-reader-strip[data-reader] .reading-reader-portrait-frame {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    overflow: hidden;
    border: 0;
    border-radius: 0;
  }

  .reading-panel[data-entry-state="starter"] .reading-reader-switcher {
    top: 14px;
    right: 14px;
    left: auto;
    width: auto;
  }

}

@media (max-width: 640px) {
  .daily-ritual {
    gap: 11px;
    padding: 14px 12px;
  }

  .daily-ritual-deck-toolbar,
  .reading-pick-deck-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px;
  }

  .daily-ritual-deck-toolbar > em,
  .reading-pick-deck-toolbar > em {
    grid-column: 1;
    grid-row: 2;
    white-space: normal;
  }

  .daily-ritual-actions {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }

  .daily-ritual .daily-ritual-actions .primary-button,
  .daily-ritual .daily-ritual-actions .secondary-button {
    width: 100%;
    min-width: 0;
    padding-inline: 9px;
  }

  .daily-intent-selector {
    padding: 11px;
  }

  .daily-intent-heading {
    display: grid;
    gap: 2px;
  }

  .daily-reader-presence {
    gap: 6px;
    padding: 6px;
  }

  .daily-reader-presence img {
    width: 34px;
    height: 34px;
  }

  .daily-reader-presence strong {
    font-size: 0.78rem;
  }

  .daily-core-result {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 16px;
  }

  .daily-core-result > .daily-intent-selector.compact {
    grid-column: 1;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    margin: 0 6px;
    padding: 3px 0 6px;
  }

  .daily-core-result .daily-intent-heading {
    display: none;
  }

  .daily-core-result .daily-intent-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    overflow: visible;
  }

  .daily-core-result .daily-intent-options button {
    min-width: 0;
    min-height: 32px;
    padding: 4px;
    font-size: 0.65rem;
    white-space: normal;
  }

  .daily-core-result .daily-feature-card {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 6px;
    padding: 7px;
  }

  .daily-core-result .daily-card-thumb {
    grid-row: 1;
    min-height: 0;
    align-self: start;
  }

  .daily-core-result .daily-feature-copy h2 {
    font-size: 1rem;
  }

  .daily-core-result .daily-feature-copy #daily-message {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 3px;
    font-size: 0.72rem;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .daily-action-spotlight {
    margin-top: 4px;
    padding: 5px;
  }

  .daily-action-spotlight strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.68rem;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  .daily-core-result .daily-card-progress {
    grid-column: 2;
    gap: 4px;
    padding-top: 4px;
  }

  .daily-core-result :is(.daily-reward-note, .daily-stars, #daily-card-number) {
    display: none;
  }

  .daily-question-card {
    min-height: 88px;
  }

  .daily-insights-disclosure > summary {
    min-height: 58px;
    padding: 10px 12px;
  }

  .reading-pick-deck {
    min-height: 142px;
    gap: 3px;
    padding: 16px 0 10px;
  }

  .reading-pick-card,
  .reading-pick-card:nth-child(3n + 1),
  .reading-pick-card:nth-child(3n + 2),
  .reading-pick-card:nth-child(3n) {
    min-width: 44px;
    max-width: 52px;
    min-height: 108px;
  }
}

@media (max-width: 640px) and (max-height: 640px) {
  .reading-panel[data-entry-state="starter"] .reading-reader-strip[data-reader] {
    min-height: clamp(280px, 48svh, 340px);
  }

  .reading-panel[data-entry-state="starter"] .reading-reader-strip[data-reader] .reading-reader-portrait-frame {
    width: auto;
    height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .daily-insights-disclosure > summary > em,
  .daily-ritual-deck .ritual-card,
  .reading-pick-card {
    transition: none;
  }
}

#today-view[data-daily-phase="shuffling"] .tarot-focus-panel {
  display: none;
}

#today-view[data-daily-state="fresh"][data-daily-phase="shuffling"] .daily-ritual {
  display: grid;
}

#today-view[data-daily-phase="shuffling"] .daily-ritual-deck-toolbar,
#today-view[data-daily-phase="shuffling"] .daily-ritual-deck,
#today-view[data-daily-phase="shuffling"] .daily-ritual-actions .primary-button {
  display: none;
}

.tarot-reshuffle-button {
  display: inline-flex;
  min-height: 40px;
  gap: 6px;
  align-items: center;
  justify-content: center;
  padding: 7px 11px;
  border: 1px solid rgba(217, 183, 96, 0.32);
  border-radius: 999px;
  color: #fff8e8;
  background: rgba(217, 183, 96, 0.08);
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.tarot-reshuffle-button:hover,
.tarot-reshuffle-button:focus-visible {
  border-color: rgba(217, 183, 96, 0.74);
  outline: 2px solid rgba(217, 183, 96, 0.16);
  outline-offset: 2px;
  background: rgba(217, 183, 96, 0.15);
  transform: translateY(-1px);
}

.tarot-reshuffle-button > span:first-child {
  color: var(--gold);
  font-size: 1rem;
  line-height: 1;
}

.tarot-shuffle-stage {
  display: grid;
  min-height: 360px;
  place-items: center;
  align-content: center;
  gap: 10px;
  overflow: hidden;
  padding: 24px;
  border: 1px solid rgba(217, 183, 96, 0.24);
  border-radius: 14px;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(217, 183, 96, 0.2), transparent 42%),
    radial-gradient(ellipse at 50% 70%, rgba(100, 182, 165, 0.1), transparent 52%),
    linear-gradient(145deg, rgba(10, 14, 14, 0.68), rgba(21, 27, 24, 0.78));
}

.tarot-shuffle-stage[hidden] {
  display: none;
}

.tarot-shuffle-stage > strong {
  color: #fff8e8;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.12rem;
}

.tarot-shuffle-stage > small {
  max-width: 32rem;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
  text-align: center;
}

.tarot-shuffle-stack {
  position: relative;
  width: min(100%, 390px);
  height: 220px;
}

.tarot-shuffle-stack::after {
  position: absolute;
  right: 22%;
  bottom: 5px;
  left: 22%;
  height: 24px;
  content: "";
  border-radius: 50%;
  background: rgba(217, 183, 96, 0.28);
  filter: blur(18px);
}

.tarot-shuffle-stack span {
  position: absolute;
  top: 48%;
  left: 50%;
  z-index: var(--z);
  width: 78px;
  height: 126px;
  border: 1px solid rgba(217, 183, 96, 0.62);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(217, 183, 96, 0.12), rgba(100, 182, 165, 0.12)),
    url("/assets/cards/back.svg") center / cover;
  transform-origin: 50% 50%;
  animation: tarotShuffleFullDeck 1050ms cubic-bezier(0.2, 0.75, 0.22, 1) both;
}

.tarot-shuffle-stack span:first-child {
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.34);
}

@keyframes tarotShuffleFullDeck {
  0%, 100% {
    transform: translate(-50%, calc(-50% + var(--i) * 0.16px));
  }
  32% {
    transform:
      translate(calc(-50% + var(--s) * 58px), calc(-50% + var(--r) * 0.18px))
      rotate(calc(var(--s) * 7deg));
  }
  62% {
    transform:
      translate(calc(-50% + var(--s) * 12px), calc(-50% + var(--i) * 0.15px))
      rotate(calc(var(--s) * -1.5deg));
  }
  80% {
    transform:
      translate(calc(-50% + var(--s) * 30px), calc(-50% + var(--r) * 0.16px))
      rotate(calc(var(--s) * 3deg));
  }
}

.daily-ritual-deck,
.reading-pick-deck {
  position: relative;
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  padding: 0 calc(50% - 45px);
  scrollbar-width: none;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  cursor: grab;
}

.tarot-fan-track {
  position: relative;
  width: max(100%, 1500px);
  height: 220px;
}

.daily-ritual-deck {
  min-height: 200px;
  padding-inline: calc(50% - 42px);
}

.daily-ritual-deck .tarot-fan-track {
  width: max(100%, 1400px);
  height: 200px;
}

.daily-ritual-deck::-webkit-scrollbar,
.reading-pick-deck::-webkit-scrollbar,
.reading-reader-switcher-list::-webkit-scrollbar {
  display: none;
}

.daily-ritual-deck.dragging,
.reading-pick-deck.dragging,
.reading-reader-switcher-list.dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

.daily-ritual-deck .ritual-card,
.daily-ritual-deck .ritual-card:nth-child(n) {
  position: absolute;
  top: 18px;
  left: var(--fan-left);
  z-index: var(--fan-z);
  width: 72px;
  min-width: 72px;
  max-width: 72px;
  min-height: 116px;
  margin: 0;
  transform: translate(-50%, var(--fan-drop)) rotate(var(--fan-angle));
  transform-origin: 50% 110%;
  animation: tarotFanOpen 460ms cubic-bezier(0.18, 0.82, 0.2, 1) var(--deal-delay) both;
}

.reading-pick-card,
.reading-pick-card:nth-child(3n + 1),
.reading-pick-card:nth-child(3n + 2),
.reading-pick-card:nth-child(3n) {
  position: absolute;
  top: 16px;
  left: var(--fan-left);
  z-index: var(--fan-z);
  width: 78px;
  min-width: 78px;
  max-width: 78px;
  min-height: 138px;
  margin: 0;
  transform: translate(-50%, var(--fan-drop)) rotate(var(--fan-angle));
  transform-origin: 50% 112%;
  animation: tarotFanOpen 520ms cubic-bezier(0.18, 0.82, 0.2, 1) var(--deal-delay) both;
}

.reading-pick-card::before{animation:none}

.tarot-fan-track .ritual-card em,
.tarot-fan-track .reading-pick-card > em {
  opacity: 0;
}

.tarot-fan-track .ritual-card.selected em,
.tarot-fan-track .reading-pick-card.picked > em {
  opacity: 1;
}

#reading-pick-stage:not([data-pick-count="0"]) .reading-pick-card {
  animation: none;
}

.daily-ritual-deck .ritual-card:focus-visible,
.reading-pick-card:focus-visible {
  z-index: 160;
  transform: translate(-50%, calc(var(--fan-drop) - 18px)) rotate(0deg) scale(1.04);
}

@media (hover: hover) {
  .daily-ritual-deck .ritual-card:hover,
  .reading-pick-card:hover:not(:disabled) {
    z-index: 160;
    transform: translate(-50%, calc(var(--fan-drop) - 18px)) rotate(0deg) scale(1.04);
  }
}

.daily-ritual-deck .ritual-card.selected,
.reading-pick-card.picked{
  z-index:150;
  opacity:.58;
  transform:translate(-50%, calc(var(--fan-drop) + 46px)) rotate(0) scale(.88)
}

.reading-pick-card.picked{z-index:0;pointer-events:none}

@keyframes tarotFanOpen {
  from {
    opacity: 0.18;
    transform: translate(calc(-50% + var(--fan-start-x)), 58px) rotate(0deg) scale(0.88);
  }
  to {
    opacity: 1;
    transform: translate(-50%, var(--fan-drop)) rotate(var(--fan-angle));
  }
}

.reading-shuffle-stage {
  min-height: 390px;
}

.reading-reader-switcher {
  --reader-accent: var(--gold);
  --reader-glow: rgba(217, 183, 96, 0.22);
  position: relative;
  inset: auto;
  z-index: 7;
  display: grid;
  width: 100%;
  max-width: 100%;
  grid-column: 1 / -1;
  gap: 7px;
  justify-items: stretch;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 36%, rgba(244, 240, 232, 0.12));
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(8, 11, 12, 0.78), rgba(8, 11, 12, 0.48)),
    color-mix(in srgb, var(--reader-glow) 32%, transparent);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(14px);
  pointer-events: auto;
}

.reading-reader-switcher[hidden] {
  display: none;
}

.reading-reader-switcher-heading {
  display: flex;
  min-height: 44px;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.reading-reader-switcher-heading > span {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.reading-reader-switcher-heading > span strong {
  color: #fff0c7;
  font-size: 0.78rem;
}

.reading-reader-switcher-heading > span small {
  overflow: hidden;
  color: rgba(244, 240, 232, 0.62);
  font-size: 0.65rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-reader-switcher-toggle {
  justify-self: auto;
  display: inline-flex;
  min-height: 44px;
  grid-template-columns: none;
  gap: 5px;
  align-items: center;
  padding: 5px 9px;
  border: 1px solid rgba(217, 183, 96, 0.28);
  border-radius: 999px;
  color: #fff8e8;
  background: rgba(10, 13, 13, 0.7);
  box-shadow: none;
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.reading-reader-switcher-heading .reading-reader-switcher-toggle {
  display: inline-flex;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 44px;
  padding: 5px 9px;
  border-radius: 999px;
}

.reading-reader-switcher-toggle span {
  color: #fff8e8;
  font-size: 0.68rem;
  font-weight: 900;
  white-space: nowrap;
}

.reading-reader-switcher-toggle:hover,
.reading-reader-switcher-toggle:focus-visible {
  border-color: color-mix(in srgb, var(--reader-accent) 72%, rgba(244, 240, 232, 0.18));
  outline: 2px solid rgba(217, 183, 96, 0.14);
  outline-offset: 2px;
  background: color-mix(in srgb, var(--reader-glow) 62%, rgba(10, 13, 13, 0.78));
}

.reading-reader-switcher-panel {
  justify-self: stretch;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  max-height: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transform: none;
}

.reading-reader-switcher-panel[hidden] {
  display: none;
}

.reading-reader-switcher-list {
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  gap: 8px;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  padding: 4px 4px 6px;
  scroll-padding-inline: 4px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.reading-reader-chip-item {
  display: block;
  width: 76px;
  min-width: 76px;
  flex: 0 0 76px;
  scroll-snap-align: start;
}

.reading-reader-chip {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 88px auto auto auto;
  gap: 3px;
  align-items: start;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: var(--text);
  text-align: center;
  background: transparent;
  scroll-snap-align: none;
  cursor: pointer;
  transition: opacity 160ms ease;
}

.reading-reader-chip:hover,
.reading-reader-chip:focus-visible,
.reading-reader-chip.active {
  border-color: transparent;
  outline: none;
  background: transparent;
}

.reading-reader-chip-portrait {
  position: relative;
  display: block;
  width: 100%;
  height: 88px;
  overflow: hidden;
  border: 1px solid rgba(217, 183, 96, 0.52);
  border-radius: 10px;
  background: rgba(13, 16, 16, 0.82);
  box-shadow: 0 9px 20px rgba(0, 0, 0, 0.26);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.reading-reader-chip:hover .reading-reader-chip-portrait,
.reading-reader-chip:focus-visible .reading-reader-chip-portrait,
.reading-reader-chip.active .reading-reader-chip-portrait {
  border-color: color-mix(in srgb, var(--reader-accent) 86%, #fff0bd);
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.32),
    0 0 18px color-mix(in srgb, var(--reader-accent) 28%, transparent);
  transform: translateY(-2px);
}

.reading-reader-chip:focus-visible .reading-reader-chip-portrait {
  outline: 2px solid #fff0bd;
  outline-offset: 2px;
}

.reading-reader-chip-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  object-fit: cover;
  transform: none;
}

.reading-reader-chip-portrait i {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  min-width: 19px;
  height: 19px;
  place-items: center;
  padding-inline: 4px;
  border: 1px solid rgba(255, 248, 232, 0.26);
  border-radius: 999px;
  color: #fff3c7;
  background: rgba(8, 10, 10, 0.76);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
}

.reading-reader-chip-portrait i:empty {
  display: none;
}

.reading-reader-chip > strong,
.reading-reader-chip > small,
.reading-reader-chip > em {
  display: block;
  grid-column: 1;
  overflow: hidden;
  padding-inline: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reading-reader-chip > strong {
  color: #fff8e8;
  font-size: 0.72rem;
  line-height: 1.2;
}

.reading-reader-chip > small {
  color: rgba(244, 240, 232, 0.62);
  font-size: 0.61rem;
  line-height: 1.2;
}

.reading-reader-chip > em {
  justify-self: stretch;
  color: color-mix(in srgb, var(--reader-accent) 82%, var(--gold));
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.reading-reader-chip.locked {
  opacity: 0.74;
}

.reading-reader-chip:disabled {
  cursor: wait;
  opacity: 0.56;
  transform: none;
}

.reading-reader-switcher[data-collapsed="true"] {
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  padding: 4px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.reading-reader-switcher[data-collapsed="true"] .reading-reader-switcher-heading > span {
  display: none;
}

@media (min-width: 1000px) {
  .reading-panel[data-entry-state="starter"] .reading-reader-switcher {
    position: relative;
    inset: auto;
    width: auto;
    margin-bottom: 12px;
  }
}

@media (max-width: 999px) {
  .reading-panel[data-entry-state="starter"] .reading-reader-switcher {
    order: 0;
    position: relative;
    inset: auto;
    width: auto;
  }

  .reading-panel[data-entry-state="starter"] .reading-reader-switcher-toggle {
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 44px;
    padding: 5px 9px;
    border-radius: 999px;
  }

  .reading-panel[data-entry-state="starter"] .reading-reader-switcher-toggle span {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
    border: 0;
  }

}

@media (max-width: 640px) {
  .daily-ritual-deck-toolbar,
  .reading-pick-deck-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .daily-ritual-deck-toolbar .tarot-reshuffle-button,
  .reading-pick-deck-toolbar .tarot-reshuffle-button {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .daily-ritual-deck,
  .reading-pick-deck {
    padding-inline: calc(50% - 41px);
  }

  .daily-ritual-deck {
    padding-inline: calc(50% - 39px);
  }

  .tarot-fan-track {
    width: 1380px;
    height: 205px;
  }

  .daily-ritual-deck .tarot-fan-track {
    width: 1320px;
    height: 190px;
  }

  .daily-ritual-deck .ritual-card,
  .daily-ritual-deck .ritual-card:nth-child(n) {
    width: 64px;
    min-width: 64px;
    max-width: 64px;
    min-height: 104px;
  }

  .reading-pick-card,
  .reading-pick-card:nth-child(3n + 1),
  .reading-pick-card:nth-child(3n + 2),
  .reading-pick-card:nth-child(3n) {
    width: 68px;
    min-width: 68px;
    max-width: 68px;
    min-height: 120px;
  }

  .tarot-shuffle-stage {
    min-height: 294px;
    gap: 8px;
    padding: 16px;
  }

  .tarot-shuffle-stack {
    width: min(100%, 320px);
    height: 184px;
  }

  .tarot-shuffle-stack span {
    width: 64px;
    height: 104px;
  }

  .reading-shuffle-stage {
    min-height: 320px;
  }

  .reading-reader-switcher-heading > span small {
    max-width: 190px;
  }

  .reading-reader-chip {
    grid-template-rows: 78px auto auto auto;
  }

  .reading-reader-chip-item {
    width: 68px;
    min-width: 68px;
    flex-basis: 68px;
  }

  .reading-reader-chip-portrait {
    height: 78px;
  }
}

@media (max-width: 640px) and (max-height: 640px) {
  .tarot-shuffle-stage { min-height: 250px; }
  .reading-shuffle-stage { min-height: 270px; }
  .tarot-shuffle-stack { height: 145px; transform: scale(0.84); }
  .reading-pick-deck { min-height: 150px; }
  .reading-pick-deck .tarot-fan-track { height: 150px; }
  .reading-pick-card,
  .reading-pick-card:nth-child(3n + 1),
  .reading-pick-card:nth-child(3n + 2),
  .reading-pick-card:nth-child(3n) {
    top: 4px;
    width: 52px;
    min-width: 52px;
    max-width: 52px;
    min-height: 84px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tarot-shuffle-stack span,
  .daily-ritual-deck .ritual-card,
  .reading-pick-card,
  .reading-pick-card::before,
  .reading-draw-deck span {
    animation: none !important;
  }

  .tarot-shuffle-stack span {
    opacity: 1;
    transform: translate(-50%, calc(-50% + var(--i) * 0.16px));
  }

  .daily-ritual-deck .ritual-card,
  .reading-pick-card {
    opacity: 1;
  }
}

.reading-pick-reveals,.reading-result>.reading-card-list{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 5px;scroll-snap-type:x proximity;scrollbar-width:none}
.reading-pick-reveals::-webkit-scrollbar,.reading-result>.reading-card-list::-webkit-scrollbar{display:none}
.reading-pick-reveals[data-count="1"],.reading-result>.reading-card-list[data-count="1"]{justify-content:center}
.reading-pick-reveal{display:grid;flex:0 0 clamp(70px,13vw,86px);gap:4px;padding:5px;border:1px solid rgba(217,183,96,.46);border-radius:8px;background:rgba(13,17,16,.88);box-shadow:0 10px 24px #0005;scroll-snap-align:center}
.reading-pick-reveal.current{animation:readingCardEnter 520ms ease both}
.reading-pick-reveal img{width:100%;aspect-ratio:2/3;border-radius:5px;object-fit:cover}
img[data-card-orientation="reversed"]{transform:rotate(180deg);transform-origin:center}
.reading-pick-reveal div{display:grid;gap:1px;min-width:0;text-align:center}
.reading-pick-reveal span,.reading-pick-reveal small{overflow:hidden;color:var(--muted);font-size:.62rem;text-overflow:ellipsis;white-space:nowrap}
.reading-pick-reveal strong{overflow:hidden;color:#fff8e8;font-size:.72rem;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
#reading-pick-stage:not([data-pick-count="0"]) .reading-pick-reader-note{display:none}
.reading-result>.reading-card-list{justify-content:flex-start}
.reading-result>.reading-card-list .reading-card{flex:0 0 clamp(78px,17vw,104px);min-height:0;grid-area:auto;grid-template-rows:auto auto;gap:5px;padding:6px;scroll-snap-align:center}
.reading-result>.reading-card-list .reading-card img{width:100%}
.reading-result>.reading-card-list .reading-card div{gap:2px}
.reading-result>.reading-card-list .reading-card span,.reading-result>.reading-card-list .reading-card small,.reading-result>.reading-card-list .reading-card strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reading-result>.reading-card-list .reading-card span,.reading-result>.reading-card-list .reading-card small{font-size:.64rem}
.reading-result>.reading-card-list .reading-card strong{font-size:.78rem}
.reading-result>.reading-card-list .reading-card:hover,.reading-result>.reading-card-list .reading-card:focus-within{transform:translateY(-2px)}
@media(min-width:641px){#reading-pick-stage:not([data-pick-count="0"]){gap:10px}}
@media(max-width:640px){.reading-pick-reveal{flex-basis:68px;padding:4px}.reading-result>.reading-card-list .reading-card{flex-basis:76px}}
@media(max-width:640px) and (max-height:640px){#reading-pick-stage:not([data-pick-count="0"]){gap:6px;padding:10px}#reading-pick-stage:not([data-pick-count="0"]) .reading-pick-action,#reading-pick-stage:not([data-pick-count="0"]) .reading-pick-deck-toolbar,#reading-pick-stage:not([data-pick-count="0"]) .reading-pick-prep-details{display:none}#reading-pick-stage:not([data-pick-count="0"]) .reading-pick-reveal{flex-basis:54px;padding:3px}#reading-pick-stage:not([data-pick-count="0"]) .reading-pick-deck,#reading-pick-stage:not([data-pick-count="0"]) .tarot-fan-track{min-height:130px;height:130px}}
@media(prefers-reduced-motion:reduce){.reading-pick-reveal.current{animation:none}.reading-result>.reading-card-list .reading-card{animation:none;opacity:1;transform:none}}

/* Reader-first stage: one viewport host owns every question / draw / answer surface. */
.reading-stage-dialog-host {
  position: fixed;
  inset: 0;
  z-index: 29;
  display: grid;
  align-items: end;
  justify-items: stretch;
  overflow: hidden;
  padding: 18px;
  pointer-events: none;
  isolation: isolate;
}

body:not([data-active-tab="reading"]) #reading-stage-dialog-host {
  display: none !important;
}

.reading-stage-dialog-host::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  opacity: 0.32;
  background: linear-gradient(180deg, transparent 26%, rgba(5, 7, 9, 0.08) 48%, rgba(5, 7, 9, 0.7) 100%);
  pointer-events: none;
  transition: opacity 180ms ease;
}

.reading-stage-dialog-host[data-stage-surface="question"]::before {
  opacity: 0.18;
}

.reading-stage-dialog-host > .reading-form,
.reading-stage-dialog-host > .reading-recovery:not([hidden]),
.reading-stage-dialog-host > .reading-pick-stage:not([hidden]),
.reading-stage-dialog-host > .reading-draw-ritual:not([hidden]),
.reading-stage-dialog-host > .reading-result:not([hidden]) {
  position: relative;
  inset: auto;
  z-index: 1;
  width: 100%;
  max-width: calc(100vw - 36px);
  max-height: min(62svh, 620px);
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid color-mix(in srgb, var(--reader-accent) 56%, rgba(244, 240, 232, 0.16));
  border-radius: 16px;
  background:
    linear-gradient(155deg, rgba(24, 30, 27, 0.985), rgba(8, 11, 11, 0.99)),
    color-mix(in srgb, var(--reader-glow) 26%, transparent);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.56), inset 0 0 0 1px rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(18px);
  transform: none;
  pointer-events: auto;
  scrollbar-gutter: stable;
}

#reading-view .reading-stage-dialog-host > .reading-form {
  position: relative;
  width: min(590px, calc(100vw - 36px));
  max-height: min(48svh, 500px);
  overflow-y: auto;
  justify-self: end;
}

#reading-view .reading-stage-dialog-host > .reading-recovery:not([hidden]) {
  width: min(590px, calc(100vw - 36px));
  max-height: min(62svh, 620px);
  overflow-y: auto;
  justify-self: end;
}

.reading-stage-dialog-host > .reading-pick-stage:not([hidden]) {
  width: min(980px, calc(100vw - 36px));
  max-height: min(68svh, 680px);
  justify-self: center;
}

.reading-stage-dialog-host > .reading-draw-ritual:not([hidden]) {
  width: min(720px, calc(100vw - 36px));
  max-height: min(46svh, 460px);
  justify-self: center;
}

.reading-stage-dialog-host > .reading-result:not([hidden]) {
  width: clamp(440px, 38vw, 620px);
  max-height: min(62svh, 650px);
  justify-self: end;
  gap: 13px;
  padding: 16px;
}

.reading-stage-dialog-host .reading-followup-entry {
  position: relative;
  inset: auto;
  z-index: auto;
  width: 100%;
  max-height: none;
  overflow: visible;
  border-radius: 12px;
  background: rgba(12, 16, 15, 0.88);
  box-shadow: none;
}

.reading-stage-dialog-host[data-stage-surface="followup"] > .reading-result {
  overflow: hidden;
}

.reading-stage-dialog-host[data-stage-surface="followup"] > .reading-result > :not(#reading-followup-entry) {
  display: none !important;
}

.reading-stage-dialog-host[data-stage-surface="followup"] #reading-followup-entry[open] {
  display: block;
  overflow-y: auto;
  max-height: min(58svh, 600px);
}

.reading-stage-dialog-host .reading-result > .reading-card-list {
  position: sticky;
  top: 0;
  z-index: 3;
  margin: -4px -4px 0;
  padding: 4px;
  background: linear-gradient(180deg, rgba(13, 17, 16, 0.98) 76%, transparent);
}

#reading-view .reading-panel[data-entry-state][data-stage-phase] .reading-reader-strip .reading-reader-copy {
  display: grid;
}

@media (min-width: 1000px) {
  .reading-panel[data-entry-state] .reading-reader-strip[data-reader] .reading-reader-copy {
    position: absolute;
    top: 72px;
    right: auto;
    bottom: auto;
    left: 24px;
    z-index: 4;
    width: min(290px, calc(100% - 48px));
    max-width: none;
    margin: 0;
    gap: 7px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--reader-accent) 44%, rgba(244, 240, 232, 0.13));
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(8, 11, 11, 0.88), rgba(8, 11, 11, 0.56));
    backdrop-filter: blur(14px);
    pointer-events: auto;
  }

  .reading-panel[data-entry-state] .reading-reader-strip[data-reader] .reading-reader-copy > p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .reading-panel[data-entry-state] .reading-reader-strip[data-reader] blockquote {
    margin-top: 3px;
    padding: 9px 10px;
    font-size: 0.82rem;
    line-height: 1.45;
  }

  .reading-panel[data-entry-state] .reading-reader-strip[data-reader] > .reading-visual-controls {
    top: 18px;
    right: 18px;
    left: auto;
    width: auto;
    max-width: min(360px, calc(100% - 36px));
  }
}

@media (max-width: 999px) {
  body[data-active-tab="reading"] {
    overflow: hidden;
  }

  body[data-active-tab="reading"] .app-shell {
    height: 100svh;
    overflow: hidden;
  }

  .reading-stage-dialog-host {
    padding: 10px 10px calc(88px + env(safe-area-inset-bottom, 0px));
  }

  .reading-stage-dialog-host > .reading-form,
  .reading-stage-dialog-host > .reading-recovery:not([hidden]),
  .reading-stage-dialog-host > .reading-pick-stage:not([hidden]),
  .reading-stage-dialog-host > .reading-draw-ritual:not([hidden]),
  .reading-stage-dialog-host > .reading-result:not([hidden]) {
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
    border-radius: 16px;
  }

  #reading-view .reading-stage-dialog-host > .reading-form {
    width: 100%;
    max-width: 100%;
    max-height: min(46svh, 460px);
    justify-self: stretch;
  }

  #reading-view .reading-stage-dialog-host > .reading-recovery:not([hidden]) {
    width: 100%;
    max-width: 100%;
    max-height: min(58svh, 540px);
    justify-self: stretch;
  }

  #reading-view .reading-stage-dialog-host > .reading-form[data-dialogue-state="ready"] {
    padding-bottom: 12px;
  }

  #reading-view .reading-stage-dialog-host > .reading-form[data-dialogue-state="ready"] > .reading-message-row {
    position: static;
    bottom: auto;
    order: -2;
    background: #101412;
  }

  .reading-stage-dialog-host > .reading-pick-stage:not([hidden]) {
    max-height: min(64svh, 620px);
  }

  /* Keep progress and collapsed details visible with system-font variation. */
  .reading-stage-dialog-host > .reading-draw-ritual:not([hidden]) {
    max-height: min(56svh, 480px);
  }

  .reading-stage-dialog-host > .reading-result:not([hidden]) {
    max-height: min(50svh, 520px);
  }

  .reading-panel[data-entry-state] .reading-reader-strip[data-reader] .reading-reader-copy {
    position: absolute;
    top: 64px;
    right: auto;
    bottom: auto;
    left: 12px;
    z-index: 4;
    width: min(58vw, 230px);
    max-width: none;
    margin: 0;
    gap: 4px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--reader-accent) 40%, rgba(244, 240, 232, 0.12));
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(8, 11, 11, 0.84), rgba(8, 11, 11, 0.5));
    backdrop-filter: blur(12px);
  }

  .reading-panel[data-entry-state] .reading-reader-strip[data-reader] .reading-reader-copy strong {
    font-size: 1rem;
  }

  .reading-panel[data-entry-state] .reading-reader-strip[data-reader] .reading-reader-copy > p {
    display: none;
  }

  .reading-panel[data-entry-state] .reading-reader-strip[data-reader] .reading-reader-presence {
    display: grid;
    padding: 7px 8px;
  }

  .reading-panel[data-entry-state] .reading-reader-strip[data-reader] blockquote {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .reading-panel[data-entry-state] .reading-reader-strip[data-reader] > .reading-visual-controls {
    position: absolute;
    top: 12px;
    right: 12px;
    left: auto;
    width: auto;
    max-width: calc(100% - 24px);
  }
}

@media (max-width: 640px) {
  #reading-view .reading-stage-dialog-host > .reading-form[data-dialogue-state="ready"] .reading-composer-bubble.user {
    display: none;
  }

  #reading-view .reading-stage-dialog-host > .reading-form[data-dialogue-state="ready"] .reading-composer-bubble.handoff p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .reading-stage-dialog-host > .reading-result:not([hidden]) {
    gap: 10px;
    max-height: min(44svh, 430px);
    padding: 12px;
  }

  .reading-stage-dialog-host[data-stage-surface="followup"] > .reading-result:not([hidden]) {
    padding: 0;
  }

  .reading-stage-dialog-host[data-stage-surface="followup"] #reading-followup-entry[open] {
    max-height: min(44svh, 430px);
  }

  .reading-panel[data-entry-state] .reading-reader-strip[data-reader] .reading-reader-portrait-frame > img {
    object-fit: contain;
    object-position: center top;
    background: #080a0b;
  }

  .reading-panel[data-entry-state][data-reading-flow-state] .reading-reader-strip[data-reader] .reading-reader-portrait-frame > img {
    object-position: var(--reading-reader-mobile-position, var(--reading-reader-position, center 22%));
  }

  #reading-view .reading-panel[data-entry-state][data-stage-phase] .reading-reader-strip .reading-reader-copy {
    display: none;
  }
}

@media (max-width: 360px), (max-height: 640px) {
  .reading-result > .reading-card-list .reading-card {
    flex-basis: 52px;
    gap: 2px;
    padding: 3px;
  }

  .reading-result > .reading-card-list .reading-card :is(span, small) {
    display: none;
  }

  .reading-result > .reading-card-list .reading-card strong {
    font-size: 0.62rem;
  }

  #reading-view .reading-result .reading-conversation-presence {
    display: none;
  }

  .reading-stage-dialog-host {
    padding-inline: 6px;
  }

  #reading-view .reading-stage-dialog-host > .reading-form {
    max-height: min(44svh, 330px);
  }

  #reading-view .reading-stage-dialog-host > .reading-recovery:not([hidden]) {
    max-height: min(54svh, 360px);
  }

  #reading-view .reading-stage-dialog-host > .reading-draw-ritual:not([hidden]) {
    max-height: min(78svh, 440px);
  }

  .reading-stage-dialog-host > .reading-result:not([hidden]) {
    max-height: min(44svh, 330px);
  }

  .reading-panel[data-entry-state] .reading-reader-strip[data-reader] blockquote,
  .reading-panel[data-entry-state] .reading-reader-strip[data-reader] .reading-reader-presence {
    display: none;
  }
}

/* === Today full-viewport hero contract (2026-08-20) ===
 * Presentation only: Daily state, recovery, actions, and focal variables remain authoritative.
 */
#today-view .tarot-focus-panel {
  aspect-ratio: auto;
}

#today-view[data-daily-state="revealed"] .tarot-focus-panel:not([data-home-density="recovery"]) {
  display: grid;
  pointer-events: none;
}

#today-view[data-daily-state="revealed"] .tarot-focus-panel:not([data-home-density="recovery"]) .tarot-sanctuary {
  height: 100%;
  min-height: 100%;
  padding: 0;
}

#today-view[data-daily-state="revealed"] .tarot-focus-panel:not([data-home-density="recovery"]) .tarot-sanctuary > :not(.tarot-sanctuary-reader) {
  display: none;
}

@media (min-width: 641px) {
  body[data-active-tab="today"] .app-shell {
    width: min(1200px, calc(100% - 32px));
  }

  #today-view[data-daily-state="fresh"][data-daily-phase="idle"] .daily-oracle {
    gap: 0;
    padding-bottom: 0;
  }

  #today-view[data-daily-state="fresh"][data-daily-phase="idle"] .tarot-focus-panel:not([data-home-density="recovery"]),
  #today-view[data-daily-state="revealed"] .tarot-focus-panel:not([data-home-density="recovery"]) {
    min-height: clamp(620px, 72vh, 880px);
    max-height: none;
  }

  #today-view[data-daily-state="revealed"] .daily-oracle {
    grid-template: minmax(clamp(620px, 72vh, 880px), auto) auto / minmax(0, 1fr);
    gap: 16px;
  }

  #today-view[data-daily-state="revealed"] :is(.tarot-focus-panel:not([data-home-density="recovery"]), .daily-core-result, .daily-question-card) {
    grid-area: 1 / 1;
  }

  #today-view[data-daily-state="revealed"] :is(.daily-core-result, .daily-question-card) {
    z-index: 2;
    width: min(440px, calc(100% - 48px));
    margin: 24px;
    justify-self: start;
  }

  #today-view[data-daily-state="revealed"] .daily-core-result {
    align-self: start;
  }

  #today-view[data-daily-state="revealed"] .daily-question-card {
    z-index: 3;
    align-self: end;
    justify-self: end;
    backdrop-filter: blur(12px);
  }

  #today-view[data-daily-state="revealed"] .daily-insights-disclosure {
    grid-row: 2;
  }
}

@media (max-width: 640px) {
  body[data-active-tab="today"] {
    overflow-x: hidden;
  }

  body[data-active-tab="today"] .app-shell {
    --today-mobile-hero-height: calc(100svh - 108px - max(10px, env(safe-area-inset-top, 0px)) - max(8px, env(safe-area-inset-bottom, 0px)));
    display: flex;
    width: 100%;
    height: 100svh;
    min-height: 100svh;
    flex-direction: column;
    padding-bottom: calc(60px + max(8px, env(safe-area-inset-bottom, 0px)));
  }

  body[data-active-tab="today"] .topbar {
    flex: 0 0 48px;
  }

  body[data-active-tab="today"] #today-view.active {
    display: flex;
    min-height: 0;
    flex: 1;
  }

  body[data-active-tab="today"] #today-view .daily-oracle {
    width: 100%;
    min-height: 0;
    flex: 1;
  }

  body[data-active-tab="today"] #today-view.active[data-daily-state="revealed"] {
    min-height: var(--today-mobile-hero-height);
    flex: none;
  }

  #today-view[data-daily-state="fresh"][data-daily-phase="idle"] .daily-oracle {
    height: 100%;
    gap: 0;
    padding: 0;
  }

  #today-view[data-daily-state="fresh"][data-daily-phase="idle"] .tarot-focus-panel:not([data-home-density="recovery"]) {
    height: 100%;
    min-height: 0;
    max-height: none;
  }

  #today-view[data-daily-state="fresh"][data-daily-phase="idle"] .tarot-focus-panel:not([data-home-density="recovery"]) .tarot-sanctuary {
    height: 100%;
    min-height: 100%;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "copy" "." "actions";
    padding: 12px;
  }

  #today-view[data-daily-state="fresh"][data-daily-phase="idle"] .tarot-sanctuary-copy p:not(.daily-kicker) {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 5px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  #today-view .tarot-sanctuary-reader img {
    object-position: var(--daily-reader-mobile-position, var(--daily-reader-position, center top));
  }

  #today-view[data-daily-state="revealed"] .tarot-focus-panel:not([data-home-density="recovery"]) .tarot-sanctuary-reader img {
    object-position: var(
      --daily-reader-revealed-mobile-position,
      var(--daily-reader-mobile-position, var(--daily-reader-position, center top))
    );
  }

  #today-view[data-daily-state="revealed"] .daily-oracle {
    height: auto;
    min-height: var(--today-mobile-hero-height);
    grid-template: minmax(var(--today-mobile-hero-height), auto) auto / minmax(0, 1fr);
    gap: 12px;
    padding: 0;
  }

  #today-view[data-daily-state="revealed"] :is(.tarot-focus-panel:not([data-home-density="recovery"]), .daily-core-result, .daily-question-card) {
    grid-area: 1 / 1;
  }

  #today-view[data-daily-state="revealed"] .tarot-focus-panel:not([data-home-density="recovery"]) {
    height: 100%;
    min-height: var(--today-mobile-hero-height);
    max-height: none;
  }

  #today-view[data-daily-state="revealed"] :is(.daily-core-result, .daily-question-card) {
    z-index: 2;
    width: min(62%, 240px);
    margin: 10px;
    justify-self: start;
  }

  #today-view[data-daily-state="revealed"] .daily-core-result {
    align-self: start;
    backdrop-filter: blur(12px);
  }

  #today-view[data-daily-state="revealed"] .daily-question-card {
    z-index: 3;
    align-self: end;
    backdrop-filter: blur(12px);
  }

  #today-view[data-daily-state="revealed"] .daily-insights-disclosure {
    grid-row: 2;
    margin-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 360px), (max-height: 640px) {
  #today-view[data-daily-state="revealed"] .tarot-focus-panel:is([data-reader="selene"], [data-reader="gentle"]) {
    --daily-reader-revealed-mobile-position: 8% top;
  }

  #today-view[data-daily-state="revealed"] :is(.daily-core-result, .daily-question-card) {
    margin: 6px;
  }

  #today-view[data-daily-state="revealed"] .daily-question-card {
    min-height: 72px;
    grid-template-columns: 36px minmax(0, 1fr) 20px;
    gap: 7px;
    padding: 8px;
  }

  #today-view[data-daily-state="revealed"] .daily-question-orb {
    width: 36px;
    height: 36px;
  }

  #today-view[data-daily-state="revealed"] .daily-question-card small {
    display: none;
  }
}

@supports (height: 100dvh) {
  @media (max-width: 640px) {
    body[data-active-tab="today"] .app-shell {
      --today-mobile-hero-height: calc(100dvh - 108px - max(10px, env(safe-area-inset-top, 0px)) - max(8px, env(safe-area-inset-bottom, 0px)));
      height: 100dvh;
      min-height: 100dvh;
    }
  }
}

/* Bounded Reading conversation: shared bubbles and controls, responsive placement only. */
.reading-flow-thread,
.reading-flow-directions,
.reading-flow-suggestions,
.reading-flow-spread-choices,
.reading-flow-actions,
.reading-flow-more-spreads,
.reading-flow-commerce {
  display: grid;
  gap: 8px;
}

.reading-flow-thread {
  align-content: start;
}

.reading-flow-current-reader,
.reading-flow-directions > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.reading-flow-current-reader {
  justify-content: space-between;
  color: var(--reader-accent);
  font-weight: 900;
}

.reading-flow-directions,
.reading-flow-commerce {
  padding: 10px;
  border: 1px solid rgba(244, 240, 232, 0.1);
  border-radius: 8px;
  background: rgba(16, 20, 18, 0.5);
}

.reading-flow-directions > strong {
  color: #fff8e8;
  font-size: 0.84rem;
}

.reading-flow-directions button,
.reading-flow-suggestions button,
.reading-flow-actions button,
.reading-flow-more-spreads button,
.reading-flow-commerce button {
  min-height: 44px;
}

.reading-flow-custom-question,
.reading-flow-more-spreads button,
.reading-flow-commerce button {
  width: 100%;
}

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

.reading-flow-suggestions .reading-question-template {
  border-radius: 8px;
  white-space: normal;
}

.reading-flow-spread-choices,
.reading-flow-actions.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.reading-flow-spread-choices .reading-spread-recommendation {
  min-height: 116px;
  grid-template-rows: auto auto auto;
}

.reading-flow-commerce p,
.reading-flow-delivery-status {
  margin: 0;
  color: rgba(244, 240, 232, 0.7);
  font-size: 0.76rem;
  line-height: 1.45;
}

.reading-flow-commerce > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 7px;
}

[data-reading-delivery-gated="true"] {
  display: none !important;
}

#reading-view .reading-panel[data-reading-flow-state][data-stage-phase] .reading-reader-strip .reading-reader-copy {
  display: none;
}

.reading-panel[data-reading-flow-state] .reading-chat-segment[data-reading-delivery-bubble="true"] {
  margin-top: 6px;
  padding: 10px;
  border-top: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--reader-glow) 30%, rgba(16, 20, 18, 0.62));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--reader-accent) 24%, rgba(244, 240, 232, 0.08));
}

#reading-view .reading-form[data-reading-flow-state] > .reading-chat-composer {
  order: 0;
}

#reading-view .reading-form[data-reading-flow-state] > .reading-message-row {
  order: 1;
}

#reading-view .reading-form[data-reading-flow-state] > .reading-status {
  order: 2;
}

.reading-form[data-reading-flow-state="direction_or_question"] .reading-message-row,
.reading-form[data-reading-flow-state="draw_ready"] .reading-message-row {
  position: sticky;
  bottom: 0;
  z-index: 18;
}

.reading-form[data-reading-flow-state="draw_ready"] .reading-message-row {
  grid-template-columns: minmax(0, 1fr);
}

.reading-form[data-reading-flow-state="draw_ready"] #start-web-reading {
  width: 100%;
  min-height: 48px;
}

@media (max-width: 360px), (max-height: 640px) {
  .reading-form[data-reading-flow-state="direction_or_question"] .reading-message-row {
    position: static;
  }
}

@media (min-width: 1000px) {
  .reading-stage-dialog-host[data-reading-flow-state] {
    position: fixed;
    align-items: start;
    justify-items: start;
    padding: clamp(236px, 30vh, 284px) 30px 24px;
  }

  #reading-view .reading-stage-dialog-host[data-reading-flow-state] > .reading-form {
    position: absolute;
    top: clamp(236px, 30vh, 284px);
    right: auto;
    left: 30px;
    width: min(500px, calc(100vw - 60px));
    max-height: min(72svh, 620px);
    justify-self: start;
    margin-right: auto;
    margin-left: 0;
  }

  #reading-view .reading-stage-dialog-host[data-reading-flow-state] > .reading-recovery:not([hidden]),
  #reading-view .reading-stage-dialog-host[data-reading-flow-state] > .reading-result:not([hidden]) {
    position: absolute;
    top: clamp(236px, 30vh, 284px);
    right: auto;
    left: 30px;
    justify-self: start;
    margin-right: auto;
    margin-left: 0;
  }

  .reading-panel[data-reading-flow-state] > .reading-reader-switcher:not([hidden]) {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 31;
    width: min(520px, calc(100% - 40px));
  }
}

@media (max-width: 999px) {
  #reading-view .reading-stage-dialog-host[data-reading-flow-state] > .reading-form {
    max-height: min(65svh, 580px);
  }

  .reading-panel[data-reading-flow-state] > .reading-reader-switcher:not([hidden]) {
    position: fixed;
    inset: auto 10px calc(80px + env(safe-area-inset-bottom, 0px));
    z-index: 31;
    width: auto;
    max-height: min(46svh, 360px);
  }
}

/* Compact Reading keeps one scroll owner while reserving an unobscured reader band. */
@media (max-width: 360px), (max-height: 640px) {
  #reading-view .reading-stage-dialog-host[data-reading-flow-state] > .reading-form {
    max-height: min(44svh, 330px);
  }

  .reading-form[data-reading-flow-state="reader_greeting"] .reading-flow-bubble.greeting {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 4px;
    padding: 7px 9px;
  }

  .reading-form[data-reading-flow-state="reader_greeting"] .reading-flow-bubble.greeting .reading-chat-avatar {
    width: 28px;
    height: 28px;
  }

  .reading-form[data-reading-flow-state="reader_greeting"] .reading-flow-bubble.greeting .reading-chat-content {
    gap: 2px;
  }

  .reading-form[data-reading-flow-state="reader_greeting"] .reading-flow-bubble.greeting p {
    font-size: 0.8rem;
    line-height: 1.35;
  }

  .reading-form[data-reading-flow-state="reader_greeting"] .reading-flow-current-reader {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .reading-form[data-reading-flow-state="reader_greeting"] .reading-flow-current-reader > span {
    min-width: 0;
    overflow: hidden;
    font-size: 0.84rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .reading-form[data-reading-flow-state="reader_greeting"] .reading-flow-current-reader .reading-assist-toggle {
    flex: 0 0 auto;
    align-self: auto;
    width: auto;
    min-width: 0;
    min-height: 32px;
    padding: 5px 8px;
  }

  .reading-form[data-reading-flow-state="reader_greeting"] .reading-flow-directions {
    gap: 6px;
    padding: 7px;
  }

  .reading-form[data-reading-flow-state="direction_or_question"]:focus-within .reading-message-row {
    position: sticky;
    bottom: 0;
    z-index: 18;
  }

  .reading-form[data-reading-flow-state="direction_or_question"]:focus-within .reading-message-input textarea {
    min-height: 44px;
    max-height: 64px;
  }
}

@supports (height: 100dvh) {
  @media (max-width: 999px) {
    .reading-stage-dialog-host[data-reading-flow-state] {
      bottom: auto;
      height: 100dvh;
    }

    #reading-view .reading-stage-dialog-host[data-reading-flow-state] > .reading-form {
      max-height: min(65dvh, 580px);
    }
  }

  @media (max-width: 360px), (max-height: 640px) {
    #reading-view .reading-stage-dialog-host[data-reading-flow-state] > .reading-form {
      max-height: min(44dvh, 330px);
    }
  }
}

/* A rotated compact phone uses a two-column handoff instead of overlapping cards. */
@media (max-width: 640px) and (max-height: 400px) and (orientation: landscape) {
  #today-view[data-daily-state="revealed"] .daily-oracle {
    grid-template: var(--today-mobile-hero-height) auto / minmax(0, 1fr);
  }

  #today-view[data-daily-state="revealed"] .tarot-focus-panel:not([data-home-density="recovery"]) {
    height: var(--today-mobile-hero-height);
    min-height: 0;
  }

  #today-view[data-daily-state="revealed"] :is(.daily-core-result, .daily-question-card) {
    width: calc(50% - 12px);
    margin: 6px;
  }

  #today-view[data-daily-state="revealed"] .daily-core-result {
    align-self: start;
    justify-self: start;
  }

  #today-view[data-daily-state="revealed"] .daily-question-card {
    align-self: end;
    justify-self: end;
  }

  #today-view[data-daily-state="revealed"] .daily-core-result > .daily-intent-selector.compact,
  #today-view[data-daily-state="revealed"] .daily-core-result .daily-card-progress {
    display: none;
  }

  #today-view[data-daily-state="revealed"] .daily-core-result .daily-feature-card {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 5px;
    padding: 5px;
  }

  #today-view[data-daily-state="revealed"] .daily-action-spotlight {
    padding: 3px;
  }

  #today-view[data-daily-state="revealed"] .daily-core-result .daily-feature-copy h2,
  #today-view[data-daily-state="revealed"] .daily-question-card strong {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
}

@media (max-width: 420px) {
  .reading-flow-spread-choices {
    gap: 6px;
  }

  .reading-flow-spread-choices .reading-spread-recommendation {
    min-height: 106px;
    padding: 8px;
  }
}