/* Focused reading and direct social sharing */
.stats-method-note {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.65;
  margin: -2px 0 18px;
  max-width: 760px;
}

.stats-ethics-note {
  align-items: flex-start;
  background: color-mix(in srgb, var(--accent-soft) 54%, var(--paper));
  border-left: 3px solid var(--accent);
  color: var(--muted);
  display: flex;
  font-size: 0.82rem;
  line-height: 1.65;
  margin: -6px 0 20px;
  padding: 9px 12px;
}

.social-share-panel {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  margin-top: 4px;
  padding-top: 16px;
}

.social-share-title {
  font-size: 0.86rem;
  font-weight: 800;
}

.social-share-subtitle {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  margin-top: 2px;
}

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

.social-share-button {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  display: grid;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 750;
  gap: 9px;
  grid-template-columns: 38px minmax(0, 1fr);
  min-height: 52px;
  padding: 7px 10px;
  text-align: left;
}

.social-share-button:hover {
  border-color: var(--line-strong);
  box-shadow: 0 6px 16px rgba(38, 46, 42, 0.08);
  transform: translateY(-1px);
}

.social-share-button:disabled {
  box-shadow: none;
  transform: none;
}

.social-brand-mark {
  align-items: center;
  background: #2f3b37;
  border-radius: 6px;
  color: #fff;
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 900;
  height: 34px;
  justify-content: center;
  letter-spacing: 0;
  width: 34px;
}

.social-share-line .social-brand-mark {
  background: #06c755;
  font-size: 0.55rem;
}

.social-share-facebook .social-brand-mark {
  background: #1877f2;
  font-family: Arial, sans-serif;
  font-size: 1.35rem;
}

.social-share-x .social-brand-mark {
  background: #111;
  font-size: 0.95rem;
}

.social-share-instagram .social-brand-mark {
  background: #b23a75;
}

.social-share-native {
  background: #173d36;
  border-color: #173d36;
  color: #fff;
  grid-template-columns: 42px minmax(0, 1fr);
  min-height: 64px;
  width: 100%;
}

html[data-theme="dark"] .social-share-native {
  background: #215047;
  border-color: #4d8176;
  color: #fff;
}

.social-share-native .social-brand-mark {
  background: rgba(255, 255, 255, 0.14);
  height: 38px;
  width: 38px;
}

.social-share-native strong,
.social-share-native small {
  display: block;
}

.social-share-native small {
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.72rem;
  font-weight: 500;
  margin-top: 2px;
}

.desktop-share-guide {
  background: rgba(63, 154, 138, 0.065);
  border: 1px solid rgba(63, 154, 138, 0.22);
  border-radius: var(--radius);
  display: grid;
  gap: 4px;
  padding: 10px 12px;
}

.desktop-share-guide strong {
  font-size: 0.82rem;
}

.desktop-share-guide p {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.6;
  margin: 0;
}

.more-share-button {
  align-items: center;
  display: inline-flex;
  gap: 9px;
  justify-self: start;
}

.more-share-button > span:first-child {
  font-size: 1.1rem;
  letter-spacing: 2px;
  line-height: 1;
}

.create-link-only-button {
  justify-self: start;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background:
    linear-gradient(90deg, rgba(63, 154, 138, 0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(118, 102, 178, 0.04) 1px, transparent 1px),
    var(--bg);
  background-size: 42px 42px;
  color: var(--ink);
  font-family:
    "Noto Sans TC",
    "Microsoft JhengHei",
    "PingFang TC",
    system-ui,
    sans-serif;
  letter-spacing: 0;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

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

.auth-shell {
  align-items: center;
  display: flex;
  min-height: 100vh;
  justify-content: center;
  padding: 24px;
}

.auth-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-width: 460px;
  padding: 36px;
  width: 100%;
}

.brand-kicker,
.eyebrow {
  color: var(--peace);
  font-size: 0.78rem;
  font-weight: 700;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.auth-panel h1,
.page-heading h2 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

.auth-copy {
  color: var(--muted);
  line-height: 1.7;
  margin: 18px 0 26px;
}

.auth-privacy-note {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.6;
  margin: -8px 0 18px;
}

.reading-entry-context {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
  margin: 4px 0 0;
  text-align: center;
}

.inline-link {
  background: transparent;
  border: 0;
  color: #277a6c;
  font: inherit;
  font-weight: 700;
  min-height: 28px;
  padding: 0 2px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.email-auth-section,
.email-auth-form,
.password-recovery-form {
  display: grid;
  gap: 14px;
}

.email-mode-label {
  color: #26332f;
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}

.auth-field {
  color: #3e4641;
  display: grid;
  font-size: 0.88rem;
  font-weight: 600;
  gap: 7px;
}

.auth-input {
  background: #fff;
  border: 1px solid #c9d0cb;
  border-radius: var(--radius);
  color: var(--ink);
  min-height: 44px;
  padding: 9px 12px;
  width: 100%;
}

.auth-input:focus {
  border-color: var(--peace);
  box-shadow: 0 0 0 3px rgba(63, 154, 138, 0.14);
  outline: 0;
}

.auth-primary-button {
  width: 100%;
}

.auth-text-actions {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.auth-check-option {
  align-items: start;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  gap: 10px;
  grid-template-columns: 20px minmax(0, 1fr);
  margin-top: 16px;
}

.auth-check-option input {
  accent-color: #1f3b35;
  height: 18px;
  margin: 2px 0 0;
  width: 18px;
}

.auth-credentials-option {
  background: rgba(63, 154, 138, 0.07);
  border: 1px solid rgba(63, 154, 138, 0.2);
  border-radius: var(--radius);
  margin-top: 0;
  padding: 10px 12px;
}

.auth-check-option strong,
.auth-check-option small {
  display: block;
}

.auth-check-option strong {
  font-size: 0.88rem;
}

.auth-check-option small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.5;
  margin-top: 2px;
}

.text-button {
  background: transparent;
  border: 0;
  color: #356c61;
  font-weight: 600;
  min-height: 36px;
  padding: 4px 0;
}

.text-button:hover:not(:disabled) {
  color: #1f3b35;
  text-decoration: underline;
}

.auth-divider {
  align-items: center;
  color: var(--muted);
  display: grid;
  font-size: 0.78rem;
  gap: 12px;
  grid-template-columns: 1fr auto 1fr;
  margin: 18px 0;
}

.auth-divider::before,
.auth-divider::after {
  background: var(--line);
  content: "";
  height: 1px;
}

.auth-guest-divider {
  margin-top: 18px;
}

.auth-guest-button {
  border-color: #8aa49c;
  color: #1f5146;
  font-weight: 700;
  min-height: 44px;
  width: 100%;
}

.auth-guest-hint {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
  margin: 10px 0 0;
  text-align: center;
}

.password-recovery-form h2 {
  font-size: 1.2rem;
  margin: 0;
}

.password-recovery-form > p {
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 4px;
}

.recovery-cancel {
  justify-self: center;
}

.google-button,
.primary-button {
  align-items: center;
  border-radius: var(--radius);
  display: inline-flex;
  gap: 10px;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
}

.google-button {
  background: #fff;
  border: 1px solid #c9d0cb;
  color: #252825;
  font-weight: 600;
  width: 100%;
}

.google-button:hover:not(:disabled) {
  background: #f7f9f7;
  border-color: #9eaaa2;
}

.primary-button {
  background: #1f3b35;
  border: 1px solid #1f3b35;
  color: #fff;
}

.auth-status {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
  margin: 14px 0 0;
  min-height: 1.35em;
  text-align: center;
}

.auth-status.is-error {
  color: #9b3f38;
}

.google-mark {
  align-items: center;
  display: inline-flex;
  height: 20px;
  justify-content: center;
  width: 20px;
}

.google-mark svg {
  display: block;
  height: 18px;
  width: 18px;
}

.google-mark.is-local {
  background: #1f3b35;
  border-radius: 50%;
  color: #fff;
  font-size: 0.58rem;
  font-weight: 800;
  height: 24px;
  width: 24px;
}

.google-mark.is-local svg {
  display: none;
}

.google-mark.is-local::after {
  content: "BF";
}

.app {
  min-height: 100vh;
}

.topbar {
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(220px, 1fr) auto minmax(140px, 1fr);
  min-height: 72px;
  padding: 12px 24px;
  position: sticky;
  top: 0;
  z-index: 5;
}

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

.brand-lockup > div {
  min-width: 0;
}

.brand-symbol,
.account-initial {
  align-items: center;
  background: #213c36;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 800;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.brand-name,
.translation-line {
  margin: 0;
}

.brand-name {
  font-weight: 800;
}

.translation-line {
  color: var(--muted);
  font-size: 0.82rem;
}

.view-tabs {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: repeat(4, minmax(74px, 1fr));
  padding: 4px;
}

.view-tabs:has(#adminTab:not([hidden])) {
  grid-template-columns: repeat(5, minmax(68px, 1fr));
}

.tab-button {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  min-height: 36px;
  padding: 0 12px;
  white-space: nowrap;
}

.tab-button.is-active {
  background: var(--surface);
  box-shadow: 0 4px 14px rgba(48, 58, 52, 0.12);
  color: var(--ink);
  font-weight: 700;
}

.account-area {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.account-switcher {
  align-items: center;
  background: rgba(255, 254, 251, 0.72);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  gap: 3px;
  min-height: 34px;
  padding: 3px;
}

.account-choice {
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 700;
  min-height: 26px;
  padding: 0 10px;
}

.account-choice.is-active {
  background: #1f3b35;
  color: #fff;
}

.skin-switcher {
  align-items: center;
  background: rgba(255, 254, 251, 0.72);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 4px;
  min-height: 34px;
  padding: 3px 5px;
}

.quick-skin-buttons {
  display: inline-flex;
  gap: 4px;
}

.skin-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  padding-left: 6px;
  white-space: nowrap;
}

.skin-button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  height: 28px;
  justify-content: center;
  padding: 3px;
  width: 28px;
}

.skin-button:hover,
.skin-button.is-active {
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 3px 10px rgba(45, 43, 35, 0.11);
}

.skin-button.is-active {
  outline: 1px solid #1f3b35;
  outline-offset: 1px;
}

.skin-swatch {
  border: 1px solid rgba(36, 40, 36, 0.18);
  border-radius: 50%;
  display: block;
  height: 20px;
  width: 20px;
}

.skin-swatch-gentle {
  background:
    radial-gradient(circle at 62% 34%, rgba(217, 155, 43, 0.58), transparent 34%),
    linear-gradient(135deg, #fbf7ec, #9bcfc0 52%, #eef6ec);
}

.skin-swatch-awe {
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.86), transparent 36%),
    linear-gradient(135deg, #7666b2, #d8d2ff 54%, #f8f0de);
}

.skin-swatch-lament {
  background:
    linear-gradient(180deg, #dbe9f2, #f3f0ea 58%, #d99b2b),
    linear-gradient(135deg, transparent, rgba(105, 114, 127, 0.3));
}

.skin-swatch-sacred {
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 249, 223, 0.96), transparent 34%),
    linear-gradient(135deg, #d6c17a, #eef7f4 58%, #3f9a8a);
}

.skin-swatch-intense {
  background:
    linear-gradient(135deg, #c64f43, #d99b2b 36%, #7666b2 68%, #3f9a8a);
}

.skin-swatch-garden {
  background:
    radial-gradient(circle at 70% 24%, rgba(255, 240, 168, 0.82), transparent 30%),
    linear-gradient(135deg, #eaf7e9, #5a9d4a 58%, #bf5b70);
}

.skin-swatch-hakka-indigo {
  background: linear-gradient(135deg, #f5f4e8 0 18%, #295b83 18% 42%, #e8edf0 42% 58%, #173b61 58% 82%, #f5f4e8 82%);
}

.skin-swatch-starfield {
  background:
    radial-gradient(circle at 68% 28%, #fff6c4 0 4%, transparent 5%),
    radial-gradient(circle at 28% 62%, #d7e7ff 0 3%, transparent 4%),
    linear-gradient(135deg, #08152c, #263b6f 58%, #645087);
}

.skin-swatch-moonlit {
  background:
    radial-gradient(circle at 68% 28%, #fffbea 0 18%, transparent 20%),
    linear-gradient(145deg, #8ba4bd, #293f61 58%, #89a7aa);
}

.skin-swatch-aurora {
  background: linear-gradient(135deg, #10243f, #21a985 35%, #86d8b8 50%, #755db0 72%, #172341);
}

.skin-swatch-alpine-mist {
  background: linear-gradient(145deg, #eaf1ee, #8ea9a0 42%, #46625e 44% 66%, #d5e4e5 68%);
}

.skin-swatch-coastline {
  background: linear-gradient(165deg, #ddecf2 0 35%, #4d95aa 36% 61%, #eef3e8 62% 72%, #607b62 73%);
}

.skin-swatch-woodland {
  background:
    radial-gradient(circle at 66% 30%, #f3d995 0 12%, transparent 28%),
    linear-gradient(135deg, #163e38, #49825a 55%, #a5bd6d);
}

.skin-swatch-wildflower {
  background:
    radial-gradient(circle at 28% 32%, #e898a7 0 12%, transparent 14%),
    radial-gradient(circle at 72% 56%, #e4b442 0 12%, transparent 14%),
    linear-gradient(135deg, #eff4df, #7cab70 62%, #dbe8c9);
}

.skin-swatch-rain-window {
  background:
    radial-gradient(circle at 28% 30%, rgba(255, 217, 120, 0.8), transparent 22%),
    linear-gradient(135deg, #50667b, #8fa7b5 48%, #384a65);
}

.skin-swatch-stained-glass {
  background: conic-gradient(from 35deg, #cf9e2e, #3a8f91, #6b5ba5, #b75265, #cf9e2e);
}

.skin-swatch-ink-landscape {
  background: linear-gradient(145deg, #f4f2e9 0 30%, #79938b 31% 44%, #2d3938 45% 62%, #ecebe4 63%);
}

.skin-swatch-desert-weave {
  background: repeating-linear-gradient(135deg, #183d62 0 5px, #b84538 5px 9px, #d79b2a 9px 13px, #eee3c9 13px 18px);
}

.app-menu {
  position: relative;
}

.app-menu-scrim {
  background: rgba(24, 32, 29, 0.2);
  border: 0;
  inset: 72px 0 0;
  padding: 0;
  position: fixed;
  z-index: 4;
}

.menu-button {
  align-items: center;
  background: rgba(255, 254, 251, 0.78);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  height: 34px;
  justify-content: center;
  padding: 0;
  width: 38px;
}

.menu-button:hover,
.menu-button[aria-expanded="true"] {
  background: #ffffff;
  border-color: var(--line-strong);
  box-shadow: 0 5px 16px rgba(45, 43, 35, 0.1);
}

.menu-line {
  background: #1f3b35;
  border-radius: 999px;
  display: block;
  height: 2px;
  width: 18px;
}

.app-menu-panel {
  background: rgba(255, 254, 251, 0.98);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(31, 45, 39, 0.16);
  max-height: min(720px, calc(100vh - 84px));
  min-width: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  position: absolute;
  right: 0;
  scrollbar-gutter: stable;
  top: calc(100% + 8px);
  z-index: 20;
}

.app-menu-heading {
  align-items: center;
  background: inherit;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  margin: -4px -2px 10px;
  min-height: 42px;
  padding: 0 2px 8px;
  position: sticky;
  top: 0;
  z-index: 2;
}

.app-menu-heading strong {
  color: var(--ink);
  font-size: 0.9rem;
}

@media (max-height: 700px) {
  .app-menu-panel {
    max-height: calc(100dvh - 24px);
    max-width: calc(100vw - 24px);
    position: fixed;
    right: 12px;
    top: 12px;
    width: min(360px, calc(100vw - 24px));
  }
}

body.app-menu-open .workspace {
  filter: saturate(0.76);
}

.menu-guide-button {
  align-items: center;
  background: rgba(234, 247, 243, 0.66);
  border: 1px solid rgba(63, 154, 138, 0.28);
  border-radius: var(--radius);
  color: var(--ink);
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
  min-height: 54px;
  padding: 8px 10px;
  text-align: left;
  width: 100%;
}

.menu-guide-button:hover {
  background: #ffffff;
  border-color: var(--peace);
}

.menu-feature-button {
  align-items: center;
  background: linear-gradient(135deg, rgba(31, 59, 53, 0.06), rgba(217, 155, 43, 0.11));
  border: 1px solid rgba(217, 155, 43, 0.42);
  border-radius: var(--radius);
  color: var(--ink);
  display: grid;
  gap: 9px;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  margin-bottom: 8px;
  min-height: 58px;
  padding: 8px 9px;
  text-align: left;
  width: 100%;
}

.menu-feature-button:hover {
  background: var(--surface);
  border-color: var(--joy);
}

.menu-feature-symbol {
  align-items: center;
  background: #1f3b35;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 850;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.menu-feature-badge {
  background: rgba(217, 155, 43, 0.16);
  border: 1px solid rgba(217, 155, 43, 0.36);
  border-radius: 999px;
  color: #7d5411;
  font-size: 0.62rem;
  font-weight: 850;
  padding: 4px 6px;
  white-space: nowrap;
}

.menu-guide-symbol {
  align-items: center;
  background: #1f3b35;
  border-radius: 50%;
  color: #ffffff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 800;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.menu-guide-copy,
.menu-guide-copy strong,
.menu-guide-copy small {
  display: block;
}

.menu-locale {
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding: 14px 2px 10px;
}

.menu-locale > label {
  font-size: 0.82rem;
  font-weight: 800;
}

.menu-locale select {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  min-height: 36px;
  min-width: 0;
  padding: 0 8px;
  width: 100%;
}

.menu-translation {
  padding: 4px 0 12px;
}

.menu-translation select {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  min-height: 36px;
  min-width: 0;
  padding: 0 8px;
  width: 100%;
}

.bible-tradition-fieldset {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.bible-tradition-fieldset legend {
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  padding: 0;
}

.bible-tradition-choices {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bible-tradition-choices button {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  font: inherit;
  font-weight: 760;
  justify-content: center;
  min-height: 48px;
  min-width: 0;
  padding: 0.42rem 0.35rem;
}

.bible-tradition-choices button.is-active {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 16%, transparent);
}

.bible-tradition-choices button.is-unavailable:not(.is-active) {
  color: var(--muted);
}

.bible-tradition-choices button small {
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 600;
  line-height: 1.15;
  margin-top: 0.18rem;
}

.bible-version-details {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .7rem .8rem;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  font-size: .82rem;
}

.bible-version-details summary {
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 760;
}

.bible-version-details-content {
  border-top: 1px solid var(--line);
  margin-top: 0.6rem;
  padding-top: 0.6rem;
}

.bible-version-details dl,
.bible-version-details p { margin: 0; }
.bible-version-details dl { display: grid; gap: .35rem; }
.bible-version-details dl > div { display: grid; grid-template-columns: 6.3rem minmax(0, 1fr); gap: .5rem; }
.bible-version-details dt { color: var(--muted); }
.bible-version-details dd { margin: 0; overflow-wrap: anywhere; }
.bible-version-details p { margin-top: .55rem; color: var(--muted); line-height: 1.45; }
.bible-version-details a { display: inline-block; margin-top: .45rem; }

.bible-current-reading {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 760;
  margin: 0;
}

.bible-alternative-versions {
  display: grid;
  gap: 0.45rem;
}

.bible-alternative-versions:empty {
  display: none;
}

.bible-alternative-versions button {
  justify-content: flex-start;
  min-height: 42px;
  text-align: left;
  width: 100%;
}

.menu-legal-links {
  border-top: 1px solid var(--line);
  display: flex;
  gap: 8px;
  padding-top: 10px;
}

.menu-legal-links button {
  background: transparent;
  border: 0;
  color: var(--muted);
  flex: 1;
  font-size: 0.78rem;
  min-height: 30px;
}

.menu-legal-links button:hover {
  color: #277a6c;
}

.menu-guide-copy small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.35;
  margin-top: 2px;
}

.menu-group,
.menu-subgroup {
  color: var(--ink);
}

.menu-translation-group {
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 4px;
}

.menu-group > summary,
.menu-subgroup > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-weight: 800;
  justify-content: space-between;
  list-style: none;
  min-height: 44px;
  padding: 8px 6px;
}

.menu-group > summary::-webkit-details-marker,
.menu-subgroup > summary::-webkit-details-marker {
  display: none;
}

.menu-group > summary::after,
.menu-subgroup > summary::after {
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  content: "";
  flex: 0 0 auto;
  height: 8px;
  margin-inline: 12px 4px;
  opacity: 0.76;
  transform: rotate(45deg);
  transition: transform 160ms ease;
  width: 8px;
}

.menu-group[open] > summary::after,
.menu-subgroup[open] > summary::after {
  transform: rotate(225deg);
}

.menu-group > summary:hover,
.menu-subgroup > summary:hover {
  background: var(--surface-soft);
  border-radius: 6px;
}

.display-mode-options {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 7px;
  display: grid;
  gap: 3px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 2px 0 10px;
  padding: 3px;
}

.display-mode-options button {
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: var(--muted);
  font-size: 0.78rem;
  min-height: 36px;
  padding: 0 5px;
}

.display-mode-options button:hover {
  color: var(--ink);
}

.display-mode-options button.is-active {
  background: var(--surface);
  box-shadow: 0 3px 10px rgba(45, 43, 35, 0.1);
  color: var(--ink);
  font-weight: 800;
}

.menu-reading-settings,
.menu-account-controls {
  display: grid;
  gap: 10px;
  padding: 2px 6px 10px;
}

.menu-reading-settings fieldset {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.menu-reading-settings legend {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 750;
  margin-bottom: 4px;
}

.menu-save-capability {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
  margin: 0;
}

body[data-reader-font-size="small"] #readerView .verse-text {
  font-size: 1rem;
}

body[data-reader-font-size="medium"] #readerView .verse-text {
  font-size: 1.08rem;
}

body[data-reader-font-size="large"] #readerView .verse-text {
  font-size: 1.24rem;
}

.menu-group-hint {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.55;
  margin: 5px 0 8px;
}

.menu-group-status {
  color: var(--accent-strong);
  font-size: 0.76rem;
  line-height: 1.5;
  margin: -3px 0 10px;
  min-height: 1.15em;
}

.marker-style-options {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-bottom: 10px;
}

.marker-style-option {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  display: grid;
  gap: 2px;
  justify-items: center;
  min-height: 54px;
  padding: 5px 3px;
  position: relative;
}

.marker-selected-check {
  align-items: center;
  background: var(--accent-strong);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-size: 0.62rem;
  font-weight: 900;
  height: 16px;
  justify-content: center;
  opacity: 0;
  position: absolute;
  right: 4px;
  top: 4px;
  transform: scale(0.7);
  transition: opacity 140ms ease, transform 140ms ease;
  width: 16px;
}

.marker-style-option.is-active .marker-selected-check {
  opacity: 1;
  transform: scale(1);
}

.marker-style-option .marker-symbol {
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  line-height: 1;
}

.marker-style-option .marker-label {
  font-size: 0.7rem;
  white-space: nowrap;
}

.marker-style-option:hover,
.marker-style-option.is-active {
  border-color: var(--accent);
  color: var(--ink);
}

.marker-style-option.is-active {
  background: rgba(63, 154, 138, 0.09);
  box-shadow: inset 3px 0 0 var(--accent);
  font-weight: 800;
}

.menu-subgroup {
  border-top: 1px solid var(--line);
  margin-inline-start: 14px;
  margin-top: 4px;
  padding-top: 4px;
}

.menu-skin-list {
  display: grid;
  gap: 8px;
  padding: 4px 0 10px;
}

.menu-skin-item {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) 38px;
}

.personal-emotion-list {
  overflow-x: clip;
}

.personal-emotion-item {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  padding: 8px 0;
}

.personal-emotion-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.personal-emotion-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.personal-emotion-actions .plain-button {
  min-height: 38px;
  white-space: nowrap;
}

.menu-skin-option {
  align-items: center;
  background: rgba(255, 254, 251, 0.82);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  display: flex;
  font-weight: 700;
  gap: 10px;
  min-height: 48px;
  padding: 7px 10px;
  text-align: left;
  width: 100%;
}

.menu-skin-name,
.menu-skin-note {
  display: block;
}

.menu-skin-note {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.35;
  margin-top: 2px;
}

.menu-skin-option:hover,
.menu-skin-option.is-active {
  background: #ffffff;
  border-color: var(--line-strong);
}

.menu-skin-option.is-active {
  box-shadow: inset 3px 0 0 #1f3b35;
}

.shortcut-action {
  align-items: center;
  background: rgba(255, 254, 251, 0.86);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: #1f3b35;
  display: inline-flex;
  font-size: 1.2rem;
  font-weight: 800;
  height: 38px;
  justify-content: center;
  padding: 0;
  width: 38px;
}

.shortcut-action:hover:not(:disabled) {
  background: #ffffff;
  border-color: var(--line-strong);
  box-shadow: 0 5px 14px rgba(45, 43, 35, 0.09);
}

.shortcut-action:disabled {
  color: var(--muted);
}

.plain-button {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  min-height: 34px;
  padding: 0 12px;
}

.workspace {
  margin: 0 auto;
  max-width: 1280px;
  padding: 28px 24px 48px;
}

.scope-toolbar {
  align-items: center;
  background: rgba(255, 254, 251, 0.94);
  border: 1px solid rgba(218, 214, 202, 0.92);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(29, 42, 39, 0.1);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin: -4px 0 18px;
  margin-inline-start: auto;
  max-width: 100%;
  padding: 7px 10px;
  width: fit-content;
}

.select-field.scope-field {
  align-items: center;
  display: flex;
  gap: 8px;
  white-space: nowrap;
}

.select-field.scope-field > span {
  color: var(--ink);
  font-weight: 700;
}

.select-field.scope-field select {
  min-height: 34px;
  min-width: 128px;
}

.scope-hint {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
  max-width: 360px;
}

.stats-range-toolbar {
  background: rgba(255, 254, 251, 0.94);
  border: 1px solid rgba(218, 214, 202, 0.92);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(29, 42, 39, 0.12);
  display: grid;
  gap: 12px;
  margin: -4px 0 18px;
  padding: 12px;
}

.stats-range-heading {
  align-items: baseline;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.stats-range-heading h3,
.stats-range-heading p {
  margin: 0;
}

.stats-range-heading h3 {
  font-size: 1rem;
}

.stats-range-controls {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(190px, 1.45fr) repeat(3, minmax(100px, 0.72fr));
}

.stats-range-controls select {
  min-width: 0;
  width: 100%;
}

.view-panel {
  display: none;
}

.view-panel.is-active {
  display: block;
}

.page-heading {
  margin-bottom: 22px;
}

.page-heading.compact {
  margin-bottom: 0;
}

.gentle-return-panel {
  align-items: center;
  background: rgba(243, 249, 246, 0.94);
  border-bottom: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 4px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin: -4px 0 22px;
  padding: 16px 18px;
  box-shadow: 0 8px 22px rgba(47, 73, 61, 0.055);
}

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

.gentle-return-copy {
  align-items: flex-start;
  display: grid;
  gap: 14px;
  grid-template-columns: 12px minmax(0, 1fr);
}

.gentle-return-mark {
  background: var(--accent);
  border-radius: 2px;
  display: block;
  height: 42px;
  margin-top: 3px;
  opacity: 0.76;
  width: 3px;
}

.gentle-return-panel .eyebrow {
  margin-bottom: 4px;
}

.gentle-return-panel h3 {
  font-size: 1.05rem;
  margin: 0;
}

.gentle-return-summary,
.gentle-return-guide {
  color: var(--muted);
  line-height: 1.6;
  margin: 5px 0 0;
}

.gentle-return-guide {
  font-size: 0.84rem;
}

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

.teaching-invite {
  align-items: center;
  background: color-mix(in srgb, var(--surface) 92%, var(--peace) 8%);
  border-bottom: 1px solid var(--line);
  border-left: 4px solid var(--peace);
  border-top: 1px solid var(--line);
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin: -4px 0 22px;
  padding: 15px 18px;
}

.teaching-invite[hidden] {
  display: none;
}

.teaching-invite .eyebrow {
  margin-bottom: 3px;
}

.teaching-invite h3 {
  font-size: 1.02rem;
  margin: 0;
}

.teaching-invite p:not(.eyebrow) {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
  margin: 4px 0 0;
}

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

.quiet-action-button {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  padding: 9px 7px;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
}

.quiet-action-button:hover,
.quiet-action-button:focus-visible {
  color: var(--ink);
  text-decoration-color: currentColor;
}

.ended-feeling-reviews {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 14px;
}

.ended-feeling-reviews[hidden] {
  display: none;
}

.ended-feeling-reviews h4 {
  font-size: 0.92rem;
  margin: 0 0 8px;
}

.ended-feeling-review {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 8px 0;
}

.ended-feeling-review + .ended-feeling-review {
  border-top: 1px solid var(--line);
}

.ended-feeling-review p {
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.map-layout,
.reader-layout,
.stats-layout,
.vault-layout {
  display: grid;
  gap: 18px;
}

.map-layout {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
}

.reader-layout {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  min-height: 0;
}

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

.vault-layout {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
}

.map-board,
.side-panel,
.scripture-panel,
.mark-panel,
.stats-panel,
.vault-panel,
.prompt-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.map-board,
.scripture-panel,
.mark-panel,
.stats-panel,
.vault-panel,
.prompt-panel {
  padding: 18px;
}

.side-panel {
  background: transparent;
  border: 0;
  display: grid;
  gap: 18px;
}

.section-heading {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.mark-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.section-heading h3,
.history-box h4 {
  font-size: 1rem;
  margin: 0;
}

#statsSampleSize {
  line-height: 1.55;
  max-width: min(72%, 620px);
  text-align: right;
}

.quiet-stat,
.selection-status {
  color: var(--muted);
  font-size: 0.9rem;
}

.book-map {
  display: grid;
  gap: 12px;
}

.book-row {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(140px, 190px) minmax(0, 1fr) auto;
  min-height: 96px;
  padding: 12px;
}

.book-row button {
  align-self: center;
}

.book-strips {
  display: grid;
  gap: 8px;
}

.book-title {
  font-weight: 800;
}

.book-subtitle {
  color: var(--muted);
  display: block;
  font-size: 0.82rem;
  margin-top: 4px;
}

.book-review-content {
  display: grid;
  gap: 22px;
}

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

.book-review-summary,
.book-review-detail {
  background: #fbfaf6;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: 12px;
  padding: 16px;
}

.book-review-summary-heading,
.book-review-detail-heading {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.book-review-summary-heading span,
.book-review-detail-heading span {
  color: var(--muted);
  font-size: 0.8rem;
}

.book-review-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 12px;
}

.book-review-legend-item {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-size: 0.78rem;
  gap: 6px;
}

.book-review-chapters {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
}

.book-review-chapter {
  background:
    linear-gradient(145deg, var(--chapter-soft, rgba(63, 154, 138, 0.08)), transparent 68%),
    #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--chapter-color, var(--line-strong));
  border-radius: 6px;
  color: var(--ink);
  display: grid;
  font: inherit;
  gap: 4px;
  min-height: 72px;
  padding: 10px;
  text-align: left;
}

.book-review-chapter:hover,
.book-review-chapter.is-active {
  border-color: var(--chapter-color, var(--line-strong));
  box-shadow: 0 7px 18px rgba(43, 55, 49, 0.09);
}

.book-review-chapter strong {
  font-size: 0.86rem;
}

.book-review-chapter span {
  color: var(--muted);
  font-size: 0.74rem;
}

.book-review-empty {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.65;
  margin: 0;
}

.emotion-strip {
  align-items: stretch;
  border-radius: 999px;
  display: flex;
  height: 18px;
  overflow: hidden;
  width: 100%;
}

.emotion-segment {
  background: var(--segment-color);
  display: flex;
  height: 100%;
  justify-content: center;
  min-width: 3px;
  overflow: hidden;
  position: relative;
}

.emotion-segment:first-child,
.emotion-segment:first-of-type {
  border-radius: 999px 0 0 999px;
}

.emotion-segment:last-child,
.emotion-segment:last-of-type {
  border-radius: 0 999px 999px 0;
}

.emotion-segment:only-child,
.emotion-segment:only-of-type {
  border-radius: 999px;
}

.segment-percent {
  color: #fffdf7;
  font-size: 0.72rem;
  font-weight: 800;
  left: 50%;
  line-height: 1;
  position: absolute;
  text-shadow: 0 1px 3px rgba(26, 33, 29, 0.48);
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  z-index: 1;
}

.emotion-strip.empty {
  background: #eef1ee;
  height: 18px;
  overflow: hidden;
}

.strip-row {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: 72px minmax(0, 1fr);
}

.strip-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  padding-top: 1px;
  white-space: nowrap;
}

.strip-visual {
  min-width: 0;
}

.distribution-list,
.recent-list,
.ranking-list {
  display: grid;
  gap: 10px;
}

.distribution-row,
.ranking-row {
  display: grid;
  gap: 8px;
}

.distribution-top,
.ranking-top {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.emotion-dot {
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
  height: 10px;
  width: 10px;
}

.label-line {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.bar-track {
  background: #edf0ec;
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}

.bar-fill {
  border-radius: 999px;
  height: 100%;
}

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

.vault-metric {
  background: rgba(255, 254, 251, 0.76);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: 3px;
  min-height: 82px;
  padding: 12px;
}

.vault-metric span {
  font-size: 1.55rem;
  font-weight: 800;
}

.vault-metric small,
.vault-note-list,
.vault-event span {
  color: var(--muted);
}

.vault-note-list {
  display: grid;
  gap: 8px;
  line-height: 1.7;
  margin-bottom: 16px;
}

.vault-note-list p {
  margin: 0;
}

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

.share-management-panel {
  grid-column: 1 / -1;
}

.feeling-vault-panel {
  grid-column: 1 / -1;
}

.feeling-vault-heading {
  align-items: start;
}

.vault-emotion-filters {
  display: flex;
  gap: 8px;
  margin: 4px 0 16px;
  overflow-x: auto;
  padding: 2px 1px 8px;
  scrollbar-width: thin;
}

.vault-emotion-filter {
  align-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 7px;
  min-height: 36px;
  padding: 0 11px;
}

.vault-emotion-filter small {
  color: inherit;
  font-size: 0.74rem;
}

.vault-emotion-filter.is-active {
  background: var(--surface-soft);
  border-color: var(--line-strong);
  color: var(--ink);
  font-weight: 700;
}

.vault-time-zone-tool {
  border-block: 1px solid var(--line);
  margin: 0 0 14px;
  padding: 10px 0;
}

.vault-time-zone-tool > summary {
  color: var(--ink);
  cursor: pointer;
  font-weight: 800;
  list-style-position: inside;
}

.vault-time-zone-tool > p {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.55;
  margin: 8px 0;
}

.vault-time-zone-controls {
  align-items: end;
  display: grid;
  gap: 9px;
  grid-template-columns: minmax(140px, 0.7fr) minmax(190px, 1.3fr) auto;
}

.vault-time-zone-controls label {
  color: var(--muted);
  display: grid;
  font-size: 0.76rem;
  gap: 4px;
}

.vault-time-zone-controls input,
.vault-time-zone-controls select {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--ink);
  min-height: 39px;
  min-width: 0;
  padding: 0 9px;
  width: 100%;
}

.vault-time-zone-preview {
  background: var(--surface-soft);
  border-left: 3px solid var(--accent);
  margin-top: 10px;
  padding: 10px 12px;
}

.vault-time-zone-preview > strong {
  display: block;
  font-size: 0.86rem;
}

.vault-time-zone-preview ul {
  display: grid;
  gap: 5px;
  list-style: none;
  margin: 8px 0;
  padding: 0;
}

.vault-time-zone-preview li {
  align-items: center;
  color: var(--muted);
  display: grid;
  font-size: 0.75rem;
  gap: 6px;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.vault-time-zone-preview li span:last-child {
  color: var(--ink);
  font-weight: 700;
}

.vault-time-zone-preview p,
.vault-time-zone-preview small {
  color: var(--muted);
  font-size: 0.72rem;
  margin: 5px 0 0;
}

.vault-time-zone-actions {
  display: flex;
  gap: 8px;
  margin-top: 9px;
}

.vault-feeling-records {
  display: grid;
}

.vault-feeling-chapter-group {
  border-top: 1px solid var(--line);
  min-width: 0;
  padding: 12px 2px 2px;
}

.vault-feeling-chapter-group:last-child {
  border-bottom: 1px solid var(--line);
}

.vault-feeling-chapter-heading {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  min-height: 48px;
  padding: 2px 0 10px;
}

.vault-feeling-chapter-title {
  display: grid;
  gap: 2px;
}

.vault-feeling-chapter-title strong {
  font-size: 1rem;
}

.vault-feeling-chapter-title span {
  color: var(--muted);
  font-size: 0.78rem;
}

.vault-feeling-chapter-records {
  min-width: 0;
  padding-left: 26px;
}

.vault-feeling-record {
  align-items: center;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(92px, 0.22fr) minmax(0, 1fr) auto;
  min-height: 92px;
  padding: 14px 2px;
}

.vault-feeling-record:last-child {
  border-bottom: 1px solid var(--line);
}

.vault-feeling-record.is-grouped {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 78px;
  min-width: 0;
  padding: 11px 2px;
}

.vault-feeling-record.is-grouped:first-child {
  border-top-color: color-mix(in srgb, var(--emotion-color) 38%, var(--line));
}

.vault-feeling-record.is-grouped .vault-feeling-copy,
.vault-feeling-record.is-grouped .vault-feeling-open {
  grid-column: auto;
  grid-row: auto;
}

.vault-feeling-record.is-grouped .vault-feeling-copy,
.vault-feeling-record.is-grouped .vault-feeling-copy span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.vault-feeling-emotion {
  align-items: center;
  color: var(--emotion-color);
  display: flex;
  gap: 9px;
}

.vault-feeling-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.vault-feeling-copy strong,
.vault-feeling-copy span,
.vault-feeling-copy p {
  overflow-wrap: anywhere;
}

.vault-feeling-copy span,
.vault-feeling-copy p {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.vault-feeling-copy p {
  color: color-mix(in srgb, var(--emotion-color) 68%, var(--ink));
  margin: 2px 0 0;
}

.clue-error-state {
  margin-top: 8px;
}

.section-copy {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
  margin: 4px 0 0;
}

.vault-share-list {
  display: grid;
  gap: 10px;
}

.vault-share-item {
  align-items: center;
  background: color-mix(in srgb, var(--surface) 92%, var(--accent-soft));
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 13px 14px;
}

.vault-share-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.vault-share-copy strong,
.vault-share-copy span,
.vault-share-copy p {
  overflow-wrap: anywhere;
}

.vault-share-copy span,
.vault-share-copy p {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.vault-share-copy p {
  margin: 4px 0 0;
}

.vault-share-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.account-lifecycle {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 16px;
}

.account-lifecycle p,
.admin-privacy-copy {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
  margin: 4px 0 0;
}

.danger-button {
  border-color: rgba(198, 79, 67, 0.42);
  color: #9b3d35;
}

.danger-solid-button {
  background: #9b3d35;
  border-color: #9b3d35;
  margin-top: 14px;
  width: 100%;
}

.admin-metrics {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 18px;
}

.admin-metric {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 92px;
  padding: 14px;
}

.admin-metric span,
.admin-metric small {
  display: block;
}

.admin-metric span {
  font-size: 1.55rem;
  font-weight: 800;
}

.admin-metric small {
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 4px;
}

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

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

.aggregate-row {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
}

.legal-dialog {
  background: transparent;
  border: 0;
  max-height: calc(100vh - 32px);
  max-width: 720px;
  padding: 0;
  width: calc(100vw - 32px);
}

.legal-dialog::backdrop {
  background: rgba(29, 36, 33, 0.42);
  backdrop-filter: blur(5px);
}

.legal-dialog-panel {
  background: #fffefb;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 24px;
}

.legal-dialog-panel section {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.legal-dialog-panel h4 {
  font-size: 0.98rem;
  margin: 0 0 6px;
}

.legal-dialog-panel p {
  line-height: 1.75;
}

.legal-version {
  color: var(--muted);
  font-size: 0.8rem;
}

.compact-dialog {
  max-width: 520px;
}

.consent-dialog {
  max-width: 620px;
}

.consent-dialog p {
  color: var(--ink);
}

.consent-links,
.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.consent-links {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.consent-actions {
  justify-content: flex-end;
  margin-top: 18px;
}

.confirmation-field {
  display: grid;
  gap: 7px;
  font-size: 0.86rem;
  font-weight: 700;
  margin-top: 14px;
}

.danger-button:hover {
  background: rgba(198, 79, 67, 0.08);
}

.vault-event-list {
  display: grid;
  gap: 10px;
}

.vault-event {
  align-items: start;
  background: rgba(255, 254, 251, 0.76);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: 10px;
  grid-template-columns: 14px minmax(0, 1fr);
  padding: 10px 12px;
}

.vault-event strong,
.vault-event span {
  display: block;
}

.prompt-text {
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0 0 18px;
}

.prompt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
}

.prompt-choice {
  align-items: center;
  background: rgba(255, 254, 251, 0.86);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  display: inline-flex;
  font-weight: 700;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
}

.prompt-choice:hover:not(:disabled) {
  border-color: var(--line-strong);
  box-shadow: 0 6px 18px rgba(45, 43, 35, 0.08);
}

.prompt-icon {
  align-items: center;
  background: #1f3b35;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-size: 0.88rem;
  height: 22px;
  justify-content: center;
  width: 22px;
}

.emotion-dialog {
  background: transparent;
  border: 0;
  max-width: 520px;
  padding: 0;
  width: min(calc(100vw - 28px), 520px);
}

.emotion-dialog::backdrop {
  backdrop-filter: blur(10px);
  background: rgba(24, 37, 32, 0.42);
}

.emotion-dialog-panel {
  background: var(--surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(24, 37, 32, 0.22);
  padding: 24px;
}

.dialog-heading {
  align-items: start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.dialog-heading h3 {
  font-size: 1.18rem;
  margin: 0;
}

.prompt-dialog-verse {
  background:
    linear-gradient(90deg, rgba(63, 154, 138, 0.08), transparent 62%),
    rgba(255, 254, 251, 0.84);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  line-height: 1.8;
  margin: 0 0 12px;
  padding: 12px;
}

.prompt-dialog-copy {
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 16px;
}

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

.dialog-read-button {
  margin-top: 14px;
  width: 100%;
}

.history-dialog {
  max-width: 560px;
  width: min(calc(100vw - 28px), 560px);
}

.feeling-clue-dialog {
  max-height: calc(100vh - 24px);
  max-width: 760px;
  overflow: auto;
  width: min(calc(100vw - 24px), 760px);
}

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

.feeling-clue-panel .dialog-heading {
  background: var(--surface);
  margin-bottom: 0;
  padding-bottom: 10px;
  position: sticky;
  top: 0;
  z-index: 3;
}

.feeling-clue-prompt {
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.6;
  margin: 0;
}

.clue-scope-summary {
  align-items: center;
  background: var(--surface-soft);
  border-inline-start: 3px solid var(--accent);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 10px 12px;
}

.clue-scope-summary > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.clue-scope-summary small {
  color: var(--muted);
}

.clue-scope-summary strong {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.clue-scope-summary .plain-button.is-active {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #fff;
}

.clue-scope-hint {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
  margin: -6px 0 0;
}

.clue-reading-moment {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
  margin: -6px 0 0;
}

.clue-context-control {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 3px;
}

.clue-context-button {
  background: transparent;
  border: 0;
  color: var(--muted);
  min-height: 38px;
  padding: 5px 9px;
}

.clue-context-button.is-active {
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(31, 45, 39, 0.08);
  color: var(--ink);
  font-weight: 700;
}

.feeling-clue-scripture {
  border: 1px solid var(--line);
  max-height: min(42vh, 390px);
  overflow-y: auto;
  padding: 5px 12px;
}

.clue-verse-row {
  align-items: start;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  display: grid;
  gap: 10px;
  grid-template-columns: 38px minmax(0, 1fr);
  padding: 10px 0;
}

.clue-verse-row:last-child {
  border-bottom: 0;
}

.clue-verse-row.is-original-feeling {
  background: linear-gradient(90deg, var(--emotion-soft), transparent 72%);
}

.clue-verse-row.is-clue-selected {
  box-shadow: inset 4px 0 0 var(--emotion-color);
}

.clue-verse-row.is-note-scope {
  outline: 1px solid color-mix(in srgb, var(--emotion-color) 38%, var(--line));
  outline-offset: -1px;
}

.clue-verse-row.is-scope-editing {
  cursor: pointer;
}

.clue-verse-row.is-scope-editing:not(.is-note-scope) {
  opacity: 0.54;
}

.clue-verse-row.is-scope-editing.is-note-scope {
  background: color-mix(in srgb, var(--emotion-color) 16%, var(--surface));
}

.clue-verse-row.is-clue-selected p {
  background: color-mix(in srgb, var(--emotion-color) 13%, transparent);
  border-radius: 3px;
}

.clue-verse-toggle {
  align-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  display: inline-flex;
  font-size: 0.8rem;
  font-weight: 800;
  height: 32px;
  justify-content: center;
  -webkit-user-select: none;
  user-select: none;
  width: 32px;
}

.clue-verse-row.is-clue-selected .clue-verse-toggle {
  background: var(--emotion-color);
  border-color: var(--emotion-color);
  color: #fff;
}

.clue-verse-row p {
  cursor: text;
  line-height: 1.8;
  margin: 1px 0 0;
  user-select: text;
}

.clue-selection-status,
.clue-privacy-note,
.clue-save-status {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
  margin: 0;
}

.selection-feelings-panel {
  display: grid;
  gap: 16px;
}

.selection-feeling-group {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 9px;
  padding-top: 14px;
}

.selection-feeling-group h4 {
  font-size: 0.9rem;
  margin: 0;
}

.selection-feeling-group .section-copy {
  margin: 0;
}

.selection-feeling-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 34px;
}

.selection-feeling-chip {
  align-items: center;
  background: color-mix(in srgb, var(--emotion-color) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--emotion-color) 54%, var(--line));
  border-radius: 999px;
  color: var(--ink);
  display: inline-flex;
  font-size: 0.85rem;
  font-weight: 700;
  gap: 7px;
  min-height: 34px;
  padding: 5px 11px;
}

.selection-feeling-chip .emotion-dot {
  flex: 0 0 auto;
}

.selection-feeling-chip.is-mine {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--emotion-color) 28%, transparent);
}

.selection-feeling-percent {
  font-variant-numeric: tabular-nums;
}

.selection-feeling-mine {
  border-left: 1px solid color-mix(in srgb, var(--emotion-color) 48%, var(--line));
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  padding-left: 7px;
}

.clue-field {
  display: grid;
  gap: 7px;
}

.clue-field > span,
.clue-revisit-fieldset legend {
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 700;
}

.clue-field-heading {
  align-items: baseline;
  display: flex;
  gap: 8px;
}

.clue-field-heading #feelingClueNoteCount {
  margin-left: auto;
}

.clue-field-heading #feelingClueNoteCount.is-over-limit {
  color: var(--danger);
  font-weight: 700;
}

.clue-field small,
.clue-revisit-fieldset small {
  color: var(--muted);
  font-weight: 400;
}

.clue-anchor-control {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr);
}

.clue-field input,
.clue-field textarea {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font: inherit;
  min-width: 0;
  padding: 10px 12px;
  resize: vertical;
}

.clue-revisit-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.clue-source-fieldset {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
}

.clue-revisit-fieldset legend {
  margin-bottom: 8px;
}

.clue-revisited-emotions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.clue-revisited-button {
  align-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  gap: 7px;
  min-height: 36px;
  padding: 0 11px;
}

.clue-revisited-button.is-active {
  background: var(--surface-soft);
  border-color: var(--line-strong);
  color: var(--ink);
  font-weight: 700;
}

.clue-privacy-note {
  border-left: 3px solid #3f9a8a;
  padding-left: 10px;
}

.clue-save-status {
  min-height: 1.3em;
}

.clue-dialog-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.clue-delete-button {
  margin-right: auto;
}

.feeling-clue-list-dialog {
  max-width: 560px;
  width: min(calc(100vw - 24px), 560px);
}

.feeling-clue-list-panel {
  display: grid;
  gap: 12px;
  max-height: min(82vh, 720px);
  overflow-y: auto;
}

.feeling-clue-list-records {
  display: grid;
  gap: 10px;
}

.feeling-clue-list-record {
  align-items: start;
  background: linear-gradient(90deg, var(--clue-soft), var(--surface) 46%);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--clue-color);
  border-radius: var(--radius);
  color: var(--ink);
  display: grid;
  gap: 10px;
  grid-template-columns: 32px minmax(0, 1fr);
  padding: 12px;
  text-align: left;
  width: 100%;
}

.feeling-clue-list-record:hover,
.feeling-clue-list-record:focus-visible {
  border-color: color-mix(in srgb, var(--clue-color) 55%, var(--line));
  transform: translateY(-1px);
}

.feeling-clue-list-number {
  align-items: center;
  background: var(--clue-color);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 800;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.feeling-clue-list-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.feeling-clue-list-copy strong {
  align-items: center;
  display: inline-flex;
  gap: 7px;
}

.feeling-clue-list-copy small,
.feeling-clue-list-copy > span {
  color: var(--muted);
  line-height: 1.5;
}

.feeling-clue-list-note {
  color: var(--ink) !important;
}

.guide-dialog {
  background: transparent;
  border: 0;
  max-height: calc(100vh - 28px);
  max-width: 900px;
  overflow: auto;
  padding: 0;
  width: min(calc(100vw - 28px), 900px);
}

.guide-dialog::backdrop {
  backdrop-filter: blur(9px);
  background: rgba(31, 45, 39, 0.28);
}

.guide-dialog-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}

.guide-heading {
  margin-bottom: 14px;
}

.guide-close-button {
  align-items: center;
  background: rgba(255, 254, 251, 0.82);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.25rem;
  height: 36px;
  justify-content: center;
  padding: 0;
  width: 36px;
}

.guide-close-button:hover {
  background: #ffffff;
  border-color: var(--line-strong);
}

.guide-module-tabs {
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0 0 14px;
  overflow-x: auto;
}

.guide-module-tab {
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  gap: 2px;
  min-height: 54px;
  min-width: 118px;
  padding: 8px 10px;
  text-align: left;
}

.guide-module-tab span {
  color: inherit;
  font-size: 0.85rem;
  font-weight: 800;
}

.guide-module-tab small {
  color: var(--muted);
  font-size: 0.66rem;
}

.guide-module-tab:hover,
.guide-module-tab:focus-visible {
  background: color-mix(in srgb, var(--peace) 8%, transparent);
  color: var(--ink);
}

.guide-module-tab.is-active {
  border-bottom-color: var(--peace);
  color: var(--ink);
}

.guide-module-tab.is-viewed small {
  color: var(--peace);
}

.guide-module-intro {
  margin: 0 2px 14px;
}

.guide-module-intro strong {
  display: block;
  font-size: 1rem;
}

.guide-module-intro p {
  color: var(--muted);
  line-height: 1.55;
  margin: 5px 0 0;
}

.guide-lesson-stage {
  min-height: 340px;
}

.guide-lesson-stage[hidden] {
  display: none;
}

.guide-lesson-board {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--peace) 7%, transparent), transparent 48%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 18px;
  min-height: 340px;
  padding: 24px;
}

.guide-lesson-demo-heading {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 4px;
  padding-bottom: 14px;
}

.guide-lesson-demo-heading span,
.guide-current-feeling span {
  color: var(--peace);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.guide-timeline {
  display: grid;
  gap: 0;
}

.guide-timeline-row {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 13px 4px;
}

.guide-timeline-row.is-new {
  animation: guideLessonReveal 320ms ease-out both;
}

.guide-timeline-row div {
  display: grid;
  gap: 2px;
}

.guide-timeline-row small,
.guide-demo-feedback,
.guide-ethics-note {
  color: var(--muted);
  line-height: 1.55;
}

.guide-demo-dot {
  background: var(--guide-dot-color);
  border-radius: 50%;
  height: 12px;
  width: 12px;
}

.guide-demo-dot.is-hope {
  --guide-dot-color: #5a9d4a;
}

.guide-demo-dot.is-confusion {
  --guide-dot-color: #567da6;
}

.guide-current-feeling {
  align-content: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 8px;
  min-height: 120px;
  text-align: center;
}

.guide-current-feeling strong {
  font-size: 1.75rem;
}

.guide-lesson-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: center;
}

.guide-demo-feedback {
  margin: 0;
  text-align: center;
}

.guide-clue-question {
  font-size: 1.02rem;
  font-weight: 800;
  margin: 0;
}

.guide-clue-verse {
  align-self: center;
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  font-size: 1.12rem;
  line-height: 1.9;
  margin: 0;
  padding: 26px 6px;
}

.guide-clue-marker {
  color: var(--peace);
  font-size: 0.78rem;
  margin-left: 4px;
  position: relative;
  top: -0.3em;
}

.guide-collective-summary {
  display: grid;
  gap: 5px;
}

.guide-collective-summary span {
  color: var(--muted);
}

.guide-collective-bands {
  display: grid;
  gap: 13px;
}

.guide-collective-bands > div {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 58px minmax(0, 1fr);
  padding: 4px 0;
}

.guide-collective-bands > div.is-my-position {
  color: var(--ink);
  font-weight: 900;
  outline: 2px solid color-mix(in srgb, #567da6 45%, transparent);
  outline-offset: 5px;
}

.guide-collective-bands i {
  background:
    linear-gradient(90deg, var(--guide-color) var(--guide-band), transparent var(--guide-band)),
    color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 999px;
  display: block;
  height: 12px;
}

.guide-ethics-note {
  border-left: 3px solid var(--peace);
  font-size: 0.78rem;
  margin: 0;
  padding-left: 10px;
}

@keyframes guideLessonReveal {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.guide-animation {
  --guide-duration: 20s;
  --guide-emotion-left-x: 77.55%;
  --guide-emotion-right-x: 90.25%;
  --guide-emotion-row-one-y: 38.3%;
  --guide-emotion-row-two-y: 46.63%;
  --guide-handle-x: 6.32%;
  --guide-verse-four-y: 74.73%;
  --guide-verse-one-y: 36.64%;
  --guide-verse-three-y: 62.03%;
  --guide-verse-two-y: 49.34%;
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(135deg, rgba(63, 154, 138, 0.08), transparent 44%),
    linear-gradient(315deg, rgba(217, 155, 43, 0.08), transparent 42%),
    #f8f7f2;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  position: relative;
}

.guide-demo-topbar {
  align-items: center;
  background: rgba(255, 254, 251, 0.9);
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 52px;
  padding: 8px 14px;
}

.guide-demo-topbar strong,
.guide-demo-topbar small {
  display: block;
}

.guide-demo-topbar strong {
  font-size: 0.88rem;
}

.guide-demo-topbar small {
  color: var(--muted);
  font-size: 0.68rem;
  margin-top: 1px;
}

.guide-demo-brand {
  align-items: center;
  background: #1f3b35;
  border-radius: 50%;
  color: #ffffff;
  display: inline-flex;
  font-size: 0.62rem;
  font-weight: 800;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.guide-demo-status {
  color: #356c61;
  display: grid;
  font-size: 0.72rem;
  font-weight: 700;
  min-width: 86px;
  text-align: right;
}

.guide-demo-status span {
  grid-area: 1 / 1;
  opacity: 0;
}

.guide-stage-message {
  align-items: center;
  display: grid;
  min-height: 48px;
  padding: 8px 18px 4px;
}

.guide-stage-message p {
  color: #26332f;
  font-size: clamp(0.82rem, 1.4vw, 1rem);
  font-weight: 700;
  grid-area: 1 / 1;
  letter-spacing: 0;
  margin: 0;
  opacity: 0;
  text-align: center;
  transform: translateY(4px);
}

.guide-demo-content {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.55fr) minmax(160px, 0.65fr);
  min-height: 0;
  opacity: 1;
  padding: 6px 18px 16px;
}

.guide-reader-demo,
.guide-emotion-demo {
  background: rgba(255, 254, 251, 0.88);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 0;
  padding: 12px;
}

.guide-reader-label {
  align-items: end;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin-bottom: 8px;
}

.guide-reader-label span {
  color: var(--peace);
  font-size: 0.58rem;
  font-weight: 800;
}

.guide-reader-label strong {
  font-size: 0.82rem;
}

.guide-demo-verses {
  display: grid;
  gap: 7px;
}

.guide-demo-verse {
  align-items: center;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(222, 218, 207, 0.86);
  border-radius: 6px;
  display: grid;
  gap: 8px;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  min-height: 54px;
  padding: 7px 9px;
}

.guide-demo-verse > span {
  align-items: center;
  background: rgba(232, 235, 230, 0.84);
  border-radius: 50%;
  color: #617068;
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 700;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.guide-demo-verse p {
  font-size: clamp(0.68rem, 1.25vw, 0.84rem);
  line-height: 1.4;
  margin: 0;
  min-width: 0;
}

.guide-demo-verse em {
  border: 1px solid #d99b2b;
  border-radius: 999px;
  color: #b9780c;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 700;
  opacity: 0;
  padding: 3px 7px;
}

.guide-demo-verse .guide-tag-peace {
  border-color: #3f9a8a;
  color: #2f7d70;
}

.guide-demo-verse .guide-tag-hope {
  border-color: #5a9d4a;
  color: #467f3a;
}

.guide-emotion-heading {
  margin-bottom: 9px;
}

.guide-emotion-heading strong,
.guide-emotion-heading small {
  display: block;
}

.guide-emotion-heading strong {
  font-size: 0.82rem;
}

.guide-emotion-heading small {
  color: var(--muted);
  font-size: 0.62rem;
  margin-top: 2px;
}

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

.guide-emotion-choice {
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--emotion-color);
  border-radius: 6px;
  display: flex;
  font-size: 0.68rem;
  font-weight: 700;
  justify-content: center;
  min-height: 34px;
  padding: 4px;
}

.guide-choice-joy {
  --emotion-color: #d99b2b;
}

.guide-choice-peace {
  --emotion-color: #3f9a8a;
}

.guide-choice-hope {
  --emotion-color: #5a9d4a;
}

.guide-choice-awe {
  --emotion-color: #7666b2;
}

.guide-choice-pain {
  --emotion-color: #bf5b70;
}

.guide-choice-confused {
  --emotion-color: #567da6;
}

.guide-choice-sad {
  --emotion-color: #6f7883;
}

.guide-choice-angry {
  --emotion-color: #c64f43;
}

.guide-pointer {
  background: #ffffff;
  border: 3px solid #1f3b35;
  border-radius: 50%;
  box-shadow:
    0 0 0 5px rgba(63, 154, 138, 0.2),
    0 5px 14px rgba(31, 59, 53, 0.22);
  height: 16px;
  left: var(--guide-handle-x);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: var(--guide-verse-one-y);
  transform: translate(-50%, -50%);
  width: 16px;
  z-index: 3;
}

.guide-progress {
  background: rgba(222, 218, 207, 0.68);
  height: 4px;
}

.guide-progress span {
  background: linear-gradient(90deg, #3f9a8a, #d99b2b);
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
}

.guide-principle {
  color: var(--muted);
  line-height: 1.6;
  margin: 14px 0 0;
  text-align: center;
}

.guide-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 12px;
}

.guide-controls button {
  min-width: 118px;
}

.guide-animation.is-paused *,
.guide-animation.is-paused *::before,
.guide-animation.is-paused *::after {
  animation-play-state: paused !important;
}

.guide-animation.is-playing .guide-demo-content {
  animation: guideContentCycle var(--guide-duration) linear infinite;
}

.guide-animation.is-playing .guide-status-ready {
  animation: guideStatusReady var(--guide-duration) linear infinite;
}

.guide-animation.is-playing .guide-status-single {
  animation: guideStatusSingle var(--guide-duration) linear infinite;
}

.guide-animation.is-playing .guide-status-multi {
  animation: guideStatusMulti var(--guide-duration) linear infinite;
}

.guide-animation.is-playing .guide-status-saved {
  animation: guideStatusSaved var(--guide-duration) linear infinite;
}

.guide-animation.is-playing .guide-message-read {
  animation: guideMessageRead var(--guide-duration) linear infinite;
}

.guide-animation.is-playing .guide-message-first {
  animation: guideMessageFirst var(--guide-duration) linear infinite;
}

.guide-animation.is-playing .guide-message-second {
  animation: guideMessageSecond var(--guide-duration) linear infinite;
}

.guide-animation.is-playing .guide-message-select {
  animation: guideMessageSelect var(--guide-duration) linear infinite;
}

.guide-animation.is-playing .guide-message-feel {
  animation: guideMessageFeel var(--guide-duration) linear infinite;
}

.guide-animation.is-playing .guide-message-save {
  animation: guideMessageSave var(--guide-duration) linear infinite;
}

.guide-animation.is-playing .guide-verse-one {
  animation: guideVerseOne var(--guide-duration) linear infinite;
}

.guide-animation.is-playing .guide-verse-two {
  animation: guideVerseTwo var(--guide-duration) linear infinite;
}

.guide-animation.is-playing .guide-verse-three {
  animation: guideVerseThree var(--guide-duration) linear infinite;
}

.guide-animation.is-playing .guide-verse-four {
  animation: guideVerseFour var(--guide-duration) linear infinite;
}

.guide-animation.is-playing .guide-tag-joy {
  animation: guideTagJoy var(--guide-duration) linear infinite;
}

.guide-animation.is-playing .guide-tag-peace {
  animation: guideTagPeace var(--guide-duration) linear infinite;
}

.guide-animation.is-playing .guide-tag-hope {
  animation: guideTagHope var(--guide-duration) linear infinite;
}

.guide-animation.is-playing .guide-choice-joy {
  animation: guideJoyChoice var(--guide-duration) linear infinite;
}

.guide-animation.is-playing .guide-choice-peace {
  animation: guidePeaceChoice var(--guide-duration) linear infinite;
}

.guide-animation.is-playing .guide-choice-hope {
  animation: guideHopeChoice var(--guide-duration) linear infinite;
}

.guide-animation.is-playing .guide-pointer {
  animation: guidePointerMotion var(--guide-duration) ease-in-out infinite;
  transform: translate(-50%, -50%) !important;
}

.guide-animation.is-playing .guide-progress span {
  animation: guideProgress var(--guide-duration) linear infinite;
}

.guide-animation.is-static .guide-status-saved,
.guide-animation.is-static .guide-message-save,
.guide-animation.is-static .guide-demo-verse em {
  opacity: 1;
  transform: none;
}

.guide-animation.is-static .guide-verse-one {
  background: rgba(217, 155, 43, 0.1);
  border-color: rgba(217, 155, 43, 0.54);
  box-shadow: inset 4px 0 0 #d99b2b;
}

.guide-animation.is-static .guide-verse-two {
  background: rgba(63, 154, 138, 0.1);
  border-color: rgba(63, 154, 138, 0.54);
  box-shadow: inset 4px 0 0 #3f9a8a;
}

.guide-animation.is-static .guide-verse-three,
.guide-animation.is-static .guide-verse-four {
  background: rgba(90, 157, 74, 0.1);
  border-color: rgba(90, 157, 74, 0.54);
  box-shadow: inset 4px 0 0 #5a9d4a;
}

.guide-animation.is-static .guide-choice-hope {
  background: rgba(90, 157, 74, 0.16);
  border-color: #5a9d4a;
}

@keyframes guideContentCycle {
  0%,
  100% {
    opacity: 0;
  }
  4%,
  95% {
    opacity: 1;
  }
}

@keyframes guideStatusReady {
  0%,
  2% {
    opacity: 0;
  }
  4%,
  7% {
    opacity: 1;
  }
  9%,
  100% {
    opacity: 0;
  }
}

@keyframes guideStatusSingle {
  0%,
  8% {
    opacity: 0;
  }
  10%,
  42% {
    opacity: 1;
  }
  45%,
  100% {
    opacity: 0;
  }
}

@keyframes guideStatusMulti {
  0%,
  43% {
    opacity: 0;
  }
  46%,
  72% {
    opacity: 1;
  }
  75%,
  100% {
    opacity: 0;
  }
}

@keyframes guideStatusSaved {
  0%,
  73% {
    opacity: 0;
  }
  76%,
  95% {
    opacity: 1;
  }
  98%,
  100% {
    opacity: 0;
  }
}

@keyframes guideMessageRead {
  0%,
  2% {
    opacity: 0;
    transform: translateY(4px);
  }
  4%,
  7% {
    opacity: 1;
    transform: translateY(0);
  }
  9%,
  100% {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@keyframes guideMessageFirst {
  0%,
  8% {
    opacity: 0;
    transform: translateY(4px);
  }
  10%,
  23% {
    opacity: 1;
    transform: translateY(0);
  }
  25%,
  100% {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@keyframes guideMessageSecond {
  0%,
  24% {
    opacity: 0;
    transform: translateY(4px);
  }
  27%,
  41% {
    opacity: 1;
    transform: translateY(0);
  }
  43%,
  100% {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@keyframes guideMessageSelect {
  0%,
  42% {
    opacity: 0;
    transform: translateY(4px);
  }
  45%,
  59% {
    opacity: 1;
    transform: translateY(0);
  }
  61%,
  100% {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@keyframes guideMessageFeel {
  0%,
  60% {
    opacity: 0;
    transform: translateY(4px);
  }
  63%,
  72% {
    opacity: 1;
    transform: translateY(0);
  }
  74%,
  100% {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@keyframes guideMessageSave {
  0%,
  73% {
    opacity: 0;
    transform: translateY(4px);
  }
  76%,
  95% {
    opacity: 1;
    transform: translateY(0);
  }
  98%,
  100% {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@keyframes guideVerseOne {
  0%,
  7% {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(222, 218, 207, 0.86);
    box-shadow: none;
  }
  9%,
  13% {
    background: rgba(63, 154, 138, 0.08);
    border-color: rgba(63, 154, 138, 0.62);
    box-shadow: inset 4px 0 0 #3f9a8a;
  }
  18%,
  95% {
    background: rgba(217, 155, 43, 0.1);
    border-color: rgba(217, 155, 43, 0.54);
    box-shadow: inset 4px 0 0 #d99b2b;
  }
  100% {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(222, 218, 207, 0.86);
    box-shadow: none;
  }
}

@keyframes guideVerseTwo {
  0%,
  24% {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(222, 218, 207, 0.86);
    box-shadow: none;
  }
  26%,
  30% {
    background: rgba(63, 154, 138, 0.08);
    border-color: rgba(63, 154, 138, 0.62);
    box-shadow: inset 4px 0 0 #3f9a8a;
  }
  35%,
  95% {
    background: rgba(63, 154, 138, 0.1);
    border-color: rgba(63, 154, 138, 0.54);
    box-shadow: inset 4px 0 0 #3f9a8a;
  }
  100% {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(222, 218, 207, 0.86);
    box-shadow: none;
  }
}

@keyframes guideVerseThree {
  0%,
  43% {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(222, 218, 207, 0.86);
    box-shadow: none;
  }
  46%,
  67% {
    background: rgba(63, 154, 138, 0.08);
    border-color: rgba(63, 154, 138, 0.62);
    box-shadow: inset 4px 0 0 #3f9a8a;
  }
  70%,
  95% {
    background: rgba(90, 157, 74, 0.1);
    border-color: rgba(90, 157, 74, 0.54);
    box-shadow: inset 4px 0 0 #5a9d4a;
  }
  100% {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(222, 218, 207, 0.86);
    box-shadow: none;
  }
}

@keyframes guideVerseFour {
  0%,
  52% {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(222, 218, 207, 0.86);
    box-shadow: none;
  }
  55%,
  67% {
    background: rgba(63, 154, 138, 0.08);
    border-color: rgba(63, 154, 138, 0.62);
    box-shadow: inset 4px 0 0 #3f9a8a;
  }
  70%,
  95% {
    background: rgba(90, 157, 74, 0.1);
    border-color: rgba(90, 157, 74, 0.54);
    box-shadow: inset 4px 0 0 #5a9d4a;
  }
  100% {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(222, 218, 207, 0.86);
    box-shadow: none;
  }
}

@keyframes guideTagJoy {
  0%,
  16% {
    opacity: 0;
    transform: scale(0.88);
  }
  19%,
  95% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.88);
  }
}

@keyframes guideTagPeace {
  0%,
  33% {
    opacity: 0;
    transform: scale(0.88);
  }
  36%,
  95% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.88);
  }
}

@keyframes guideTagHope {
  0%,
  68% {
    opacity: 0;
    transform: scale(0.88);
  }
  71%,
  95% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.88);
  }
}

@keyframes guideJoyChoice {
  0%,
  13% {
    background: #ffffff;
    border-color: var(--line);
    border-left-color: var(--emotion-color);
    transform: scale(1);
  }
  15% {
    background: rgba(217, 155, 43, 0.12);
    border-color: #d99b2b;
    transform: scale(1);
  }
  17% {
    background: rgba(217, 155, 43, 0.2);
    border-color: #d99b2b;
    transform: scale(0.96);
  }
  20% {
    background: rgba(217, 155, 43, 0.16);
    border-color: #d99b2b;
    transform: scale(1);
  }
  23%,
  100% {
    background: #ffffff;
    border-color: var(--line);
    border-left-color: var(--emotion-color);
    transform: scale(1);
  }
}

@keyframes guidePeaceChoice {
  0%,
  29% {
    background: #ffffff;
    border-color: var(--line);
    border-left-color: var(--emotion-color);
    transform: scale(1);
  }
  31% {
    background: rgba(63, 154, 138, 0.12);
    border-color: #3f9a8a;
    transform: scale(1);
  }
  33% {
    background: rgba(63, 154, 138, 0.2);
    border-color: #3f9a8a;
    transform: scale(0.96);
  }
  36% {
    background: rgba(63, 154, 138, 0.16);
    border-color: #3f9a8a;
    transform: scale(1);
  }
  39%,
  100% {
    background: #ffffff;
    border-color: var(--line);
    border-left-color: var(--emotion-color);
    transform: scale(1);
  }
}

@keyframes guideHopeChoice {
  0%,
  61% {
    background: #ffffff;
    border-color: var(--line);
    border-left-color: var(--emotion-color);
    transform: scale(1);
  }
  63% {
    background: rgba(90, 157, 74, 0.12);
    border-color: #5a9d4a;
    transform: scale(1);
  }
  65% {
    background: rgba(90, 157, 74, 0.2);
    border-color: #5a9d4a;
    transform: scale(0.96);
  }
  68% {
    background: rgba(90, 157, 74, 0.16);
    border-color: #5a9d4a;
    transform: scale(1);
  }
  71%,
  100% {
    background: #ffffff;
    border-color: var(--line);
    border-left-color: var(--emotion-color);
    transform: scale(1);
  }
}

@keyframes guidePointerMotion {
  0%,
  6% {
    left: var(--guide-handle-x);
    opacity: 0;
    top: var(--guide-verse-one-y);
    transform: translate(-50%, -50%) scale(1);
  }
  8% {
    left: var(--guide-handle-x);
    opacity: 1;
    top: var(--guide-verse-one-y);
    transform: translate(-50%, -50%) scale(1);
  }
  10% {
    left: var(--guide-handle-x);
    opacity: 1;
    top: var(--guide-verse-one-y);
    transform: translate(-50%, -50%) scale(0.72);
  }
  12% {
    left: var(--guide-handle-x);
    opacity: 1;
    top: var(--guide-verse-one-y);
    transform: translate(-50%, -50%) scale(1);
  }
  15% {
    left: var(--guide-emotion-left-x);
    opacity: 1;
    top: var(--guide-emotion-row-one-y);
    transform: translate(-50%, -50%) scale(1);
  }
  17% {
    left: var(--guide-emotion-left-x);
    opacity: 1;
    top: var(--guide-emotion-row-one-y);
    transform: translate(-50%, -50%) scale(0.72);
  }
  19% {
    left: var(--guide-emotion-left-x);
    opacity: 1;
    top: var(--guide-emotion-row-one-y);
    transform: translate(-50%, -50%) scale(1);
  }
  23% {
    left: var(--guide-handle-x);
    opacity: 1;
    top: var(--guide-verse-two-y);
    transform: translate(-50%, -50%) scale(1);
  }
  25% {
    left: var(--guide-handle-x);
    opacity: 1;
    top: var(--guide-verse-two-y);
    transform: translate(-50%, -50%) scale(0.72);
  }
  27% {
    left: var(--guide-handle-x);
    opacity: 1;
    top: var(--guide-verse-two-y);
    transform: translate(-50%, -50%) scale(1);
  }
  30% {
    left: var(--guide-emotion-right-x);
    opacity: 1;
    top: var(--guide-emotion-row-one-y);
    transform: translate(-50%, -50%) scale(1);
  }
  32% {
    left: var(--guide-emotion-right-x);
    opacity: 1;
    top: var(--guide-emotion-row-one-y);
    transform: translate(-50%, -50%) scale(0.72);
  }
  34% {
    left: var(--guide-emotion-right-x);
    opacity: 1;
    top: var(--guide-emotion-row-one-y);
    transform: translate(-50%, -50%) scale(1);
  }
  39% {
    left: var(--guide-handle-x);
    opacity: 0;
    top: var(--guide-verse-three-y);
    transform: translate(-50%, -50%) scale(1);
  }
  43% {
    left: var(--guide-handle-x);
    opacity: 1;
    top: var(--guide-verse-three-y);
    transform: translate(-50%, -50%) scale(1);
  }
  45% {
    left: var(--guide-handle-x);
    opacity: 1;
    top: var(--guide-verse-three-y);
    transform: translate(-50%, -50%) scale(0.72);
  }
  47% {
    left: var(--guide-handle-x);
    opacity: 1;
    top: var(--guide-verse-three-y);
    transform: translate(-50%, -50%) scale(1);
  }
  55% {
    left: var(--guide-handle-x);
    opacity: 1;
    top: var(--guide-verse-four-y);
    transform: translate(-50%, -50%) scale(1);
  }
  61% {
    left: var(--guide-emotion-left-x);
    opacity: 1;
    top: var(--guide-emotion-row-two-y);
    transform: translate(-50%, -50%) scale(1);
  }
  65% {
    left: var(--guide-emotion-left-x);
    opacity: 1;
    top: var(--guide-emotion-row-two-y);
    transform: translate(-50%, -50%) scale(0.72);
  }
  68% {
    left: var(--guide-emotion-left-x);
    opacity: 1;
    top: var(--guide-emotion-row-two-y);
    transform: translate(-50%, -50%) scale(1);
  }
  72%,
  100% {
    left: var(--guide-emotion-left-x);
    opacity: 0;
    top: var(--guide-emotion-row-two-y);
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes guideProgress {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

.history-current-state {
  align-items: center;
  background: rgba(255, 254, 251, 0.7);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  min-height: 42px;
  padding: 9px 12px;
  width: 100%;
}

.history-timeline {
  display: grid;
  gap: 12px;
  max-height: min(52vh, 440px);
  overflow-y: auto;
  padding-right: 4px;
}

.history-item {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: 16px minmax(0, 1fr);
  position: relative;
}

.history-item::before {
  background: var(--line);
  content: "";
  height: calc(100% + 10px);
  left: 7px;
  position: absolute;
  top: 14px;
  width: 1px;
}

.history-item:last-child::before {
  display: none;
}

.history-dot {
  border: 2px solid rgba(255, 254, 251, 0.95);
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(45, 43, 35, 0.16);
  height: 14px;
  margin-top: 5px;
  position: relative;
  width: 14px;
  z-index: 1;
}

.history-item.is-cancel .history-dot {
  background:
    linear-gradient(135deg, transparent 42%, rgba(255, 254, 251, 0.95) 42% 58%, transparent 58%),
    #8b928d !important;
}

.history-content {
  background: color-mix(in srgb, var(--surface) 88%, var(--color-surface-soft));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
}

.history-detail {
  color: var(--ink);
  line-height: 1.55;
  margin-top: 5px;
}

.history-meta {
  align-items: baseline;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.78rem;
  gap: 4px 10px;
  justify-content: space-between;
  line-height: 1.5;
  margin-top: 7px;
}

.history-line {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.history-stage {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.history-scope {
  background: color-mix(in srgb, var(--surface-soft) 74%, transparent);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.55;
  margin-top: 8px;
  padding: 7px 9px;
}

.history-badge {
  background: #1f3b35;
  border-radius: 999px;
  color: #fffdf7;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
}

.history-badge.subtle {
  background: var(--surface-soft);
  color: var(--muted);
}

.history-detail,
.history-date {
  color: var(--muted);
  display: block;
  font-size: 0.82rem;
  line-height: 1.5;
  margin-top: 3px;
}

.reader-toolbar {
  align-items: end;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.reader-controls {
  display: flex;
  gap: 10px;
}

.chapter-navigation {
  align-items: end;
  display: flex;
  gap: 6px;
}

.chapter-navigation .plain-button {
  min-height: 42px;
  white-space: nowrap;
}

.select-field {
  color: var(--muted);
  display: grid;
  font-size: 0.82rem;
  gap: 6px;
}

.select-field select {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  min-height: 40px;
  min-width: 120px;
  padding: 0 10px;
}

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

.verse-row {
  --emotion-color: transparent;
  --emotion-soft: transparent;
  background:
    linear-gradient(90deg, var(--emotion-soft), transparent 58%),
    var(--surface);
  border: 1px solid var(--line);
  border-left: 5px solid var(--emotion-color);
  border-radius: var(--radius);
  display: grid;
  cursor: default;
  gap: 8px;
  grid-template-columns: 46px minmax(0, 1fr);
  line-height: 1.9;
  min-height: 0;
  padding: 6px 10px;
  text-align: left;
  width: 100%;
}

.verse-select-control {
  align-items: center;
  align-self: stretch;
  border-radius: var(--radius);
  cursor: pointer;
  display: grid;
  gap: 5px;
  grid-template-columns: minmax(0, 1fr) 20px;
  justify-content: center;
  min-height: 36px;
  touch-action: none;
  user-select: none;
}

.verse-selection-check {
  align-items: center;
  background: #1f3b35;
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 0.72rem;
  font-weight: 900;
  height: 19px;
  justify-content: center;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 140ms ease, transform 140ms ease;
  width: 19px;
}

.verse-row.is-selected .verse-selection-check {
  opacity: 1;
  transform: scale(1);
}

.verse-select-control:hover {
  background: rgba(31, 59, 53, 0.06);
}

.verse-row.is-selected {
  border-color: #1f3b35;
  box-shadow: 0 0 0 2px rgba(31, 59, 53, 0.12);
}

.verse-number {
  color: var(--muted);
  font-weight: 800;
}

.verse-text {
  font-size: 1.05rem;
  cursor: text;
  user-select: text;
}

.verse-content {
  display: flow-root;
  min-width: 0;
}

.verse-emotion {
  align-self: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.82rem;
  min-width: 58px;
  padding: 4px 8px;
  text-align: center;
}

.verse-actions {
  align-items: center;
  display: flex;
  float: right;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  margin-inline-start: 9px;
  min-width: 0;
  max-width: 100%;
  position: relative;
  z-index: 1;
}

.verse-actions .feeling-clue-marker,
.verse-actions .verse-meta {
  margin-inline-start: 0;
}

.feeling-clue-anchor {
  background: color-mix(in srgb, var(--clue-color, var(--accent)) 15%, transparent);
  border-bottom: 2px solid var(--clue-color, var(--accent));
  color: inherit;
  padding-bottom: 1px;
  text-decoration: none;
}

.feeling-clue-marker {
  align-items: center;
  background: color-mix(in srgb, var(--clue-color, var(--accent)) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--clue-color, var(--accent)) 45%, var(--line));
  border-radius: 999px;
  color: var(--clue-color, var(--accent));
  cursor: pointer;
  display: inline-flex;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.86rem;
  font-weight: 800;
  gap: 3px;
  justify-content: center;
  line-height: 1;
  min-height: 27px;
  min-width: 29px;
  margin-inline-start: 5px;
  padding: 3px 7px;
  vertical-align: middle;
  white-space: nowrap;
}

.feeling-clue-marker:hover,
.feeling-clue-marker:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--clue-color, var(--accent)) 18%, transparent);
  transform: translateY(-1px);
}

.feeling-clue-marker small {
  font-family: inherit;
  font-size: 0.64rem;
}

.verse-list.is-mood-text-hidden .verse-row {
  grid-template-columns: 42px minmax(0, 1fr);
}

.verse-mood-visibility-toggle {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  flex: 0 0 auto;
  font-weight: 700;
  gap: 7px;
  white-space: nowrap;
}

.verse-mood-visibility-toggle svg {
  fill: none;
  height: 16px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 16px;
}

.verse-mood-visibility-toggle svg circle {
  fill: currentColor;
  stroke: none;
}

.verse-mood-visibility-toggle.is-active {
  background: rgba(63, 154, 138, 0.09);
  border-color: rgba(63, 154, 138, 0.3);
  color: #285f55;
}

.verse-history-button {
  background: rgba(255, 254, 251, 0.78);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  min-height: 28px;
  padding: 3px 8px;
}

.verse-history-button:hover {
  background: #ffffff;
  border-color: var(--line-strong);
  color: var(--ink);
}

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

.emotion-button {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 6px solid var(--emotion-color);
  border-radius: var(--radius);
  color: var(--ink);
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  min-height: 58px;
  padding: 8px 10px;
  text-align: left;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.emotion-button:focus-visible {
  border-color: var(--emotion-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--emotion-color) 22%, transparent);
  outline: 0;
}

.mark-panel.is-saving .emotion-grid {
  opacity: 0.68;
  pointer-events: none;
}

.emotion-save-hint {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
  margin: -4px 0 12px;
}

.selection-excerpt {
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
  border-inline-start: 3px solid var(--accent);
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.65;
  margin: 0 0 10px;
  max-height: 6.2em;
  overflow-y: auto;
  padding: 8px 10px;
}

.mark-secondary-actions {
  border-top: 1px solid var(--line);
  justify-content: flex-start;
  margin-top: 14px;
  padding-top: 12px;
}

.mark-secondary-actions .plain-button {
  color: var(--muted);
  font-size: 0.82rem;
}

.mark-secondary-actions .plain-button:hover:not(:disabled),
.mark-secondary-actions .plain-button:focus-visible {
  color: var(--ink);
}

.emotion-label,
.emotion-help {
  display: block;
}

.emotion-label {
  font-weight: 800;
}

.emotion-help {
  color: var(--muted);
  display: none;
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.35;
  margin-top: 2px;
}

.show-emotion-help .emotion-help {
  display: block;
}

.emotion-button:hover:not(:disabled) {
  background: var(--emotion-soft);
}

.history-box {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 16px;
}

.recent-item {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-height: 42px;
  padding: 8px 10px;
}

.recent-ref {
  font-weight: 700;
}

.recent-date {
  color: var(--muted);
  font-size: 0.8rem;
}

.wide-bars {
  display: grid;
  gap: 14px;
}

.collective-feeling-band {
  display: grid;
  gap: 8px;
}

.collective-feeling-heading {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.collective-feeling-value {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.collective-band-track {
  background: color-mix(in srgb, var(--line) 58%, transparent);
  border-radius: 4px;
  height: 30px;
  overflow: hidden;
  position: relative;
}

.collective-band-fill {
  background: color-mix(in srgb, var(--collective-color) 86%, white);
  border-radius: 4px;
  display: block;
  height: 100%;
  min-width: 4px;
  width: var(--collective-width);
}

.collective-my-position {
  align-items: center;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--collective-color) 55%, var(--line));
  border-radius: 4px;
  color: var(--ink);
  display: inline-flex;
  font-size: 0.74rem;
  font-weight: 800;
  gap: 5px;
  padding: 3px 7px;
  position: absolute;
  right: 6px;
  top: 4px;
}

.collective-my-position > span {
  color: var(--collective-color);
  font-size: 0.62rem;
}

.collective-feeling-band.is-mine .collective-band-track {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--collective-color) 45%, transparent);
}

.empty-state {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
  line-height: 1.7;
  padding: 18px;
}

.mobile-mark-sheet-header,
.mobile-mark-scrim,
.mobile-mark-launcher {
  display: none;
}

@media (max-width: 980px) {
  .topbar {
    grid-template-columns: 1fr;
  }

  .account-area {
    justify-content: flex-start;
  }

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

  .vault-panel {
    min-width: 0;
  }

  .scope-toolbar {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .scope-hint {
    max-width: none;
  }

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

@media (max-width: 640px) {
  .workspace,
  .topbar {
    padding-left: 14px;
    padding-right: 14px;
  }

  .emotion-dialog.history-dialog {
    margin: auto 0 0;
    max-width: none;
    width: 100%;
  }

  .history-dialog .emotion-dialog-panel {
    border-radius: 16px 16px 0 0;
    max-height: min(82dvh, 720px);
    overflow: auto;
    padding: var(--space-5) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
  }

  .account-area {
    position: relative;
  }

  .app-menu {
    position: static;
  }

  .auth-panel {
    padding: 26px;
  }

  .gentle-return-panel {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
    padding: 15px;
  }

  .gentle-return-actions {
    justify-content: flex-start;
  }

  .gentle-return-actions .primary-button,
  .gentle-return-actions .plain-button {
    flex: 1 1 128px;
  }

  .teaching-invite {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
    padding: 15px;
  }

  .teaching-invite-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .quiet-action-button {
    flex: 1 1 100%;
    text-align: left;
  }

  .auth-panel h1,
  .page-heading h2 {
    font-size: 1.55rem;
  }

  .tab-button {
    font-size: 0.86rem;
    padding: 0 6px;
  }

  .reader-toolbar,
  .reader-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .scope-toolbar {
    align-items: stretch;
    display: grid;
    gap: 4px;
    width: 100%;
  }

  .select-field.scope-field {
    justify-content: space-between;
  }

  .select-field.scope-field select {
    min-width: 0;
    width: min(160px, 50vw);
  }

  .scope-hint {
    white-space: normal;
  }

  .stats-range-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .stats-panel .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  #statsSampleSize {
    max-width: none;
    text-align: left;
  }

  .stats-range-book,
  .stats-range-chapter {
    grid-column: 1 / -1;
  }

  .book-row,
  .verse-row {
    grid-template-columns: 1fr;
  }

  .strip-row {
    grid-template-columns: 1fr;
  }

  .vault-grid {
    grid-template-columns: 1fr;
  }

  .verse-select-control {
    justify-content: flex-start;
  }

  .verse-meta,
  .verse-emotion {
    justify-self: start;
  }

  .emotion-grid,
  .dialog-emotion-grid {
    grid-template-columns: 1fr;
  }
}

/* Device display mode */
html[data-theme="dark"] body {
  color: var(--ink);
}

html[data-theme="dark"] .auth-panel,
html[data-theme="dark"] .app-menu-panel,
html[data-theme="dark"] .legal-dialog-panel,
html[data-theme="dark"] .share-dialog-panel,
html[data-theme="dark"] .emotion-dialog-panel,
html[data-theme="dark"] .guide-dialog-panel,
html[data-theme="dark"] .map-board,
html[data-theme="dark"] .scripture-panel,
html[data-theme="dark"] .mark-panel,
html[data-theme="dark"] .stats-panel,
html[data-theme="dark"] .vault-panel,
html[data-theme="dark"] .prompt-panel,
html[data-theme="dark"] .admin-metric {
  background-color: var(--surface);
}

html[data-theme="dark"] .gentle-return-panel {
  background: rgba(30, 43, 36, 0.96);
  border-color: var(--line);
  border-left-color: #83b8a8;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .topbar {
  background: rgba(20, 27, 23, 0.94);
}

html[data-theme="dark"] .skin-switcher,
html[data-theme="dark"] .account-switcher {
  background: rgba(26, 35, 30, 0.9);
  border-color: var(--line);
}

html[data-theme="dark"] .skin-button:hover,
html[data-theme="dark"] .skin-button.is-active {
  background: #303b35;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.26);
}

html[data-theme="dark"] .skin-button.is-active {
  outline-color: #9cc8bb;
}

html[data-theme="dark"] .scope-toolbar,
html[data-theme="dark"] .stats-range-toolbar {
  background: rgba(25, 34, 29, 0.94);
  border-color: var(--line);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .scripture-panel,
html[data-theme="dark"] .scripture-heading {
  background:
    linear-gradient(90deg, rgba(63, 154, 138, 0.1), transparent 30%),
    var(--paper);
}

html[data-theme="dark"] .book-row,
html[data-theme="dark"] .recent-item,
html[data-theme="dark"] .vault-metric,
html[data-theme="dark"] .vault-event,
html[data-theme="dark"] .prompt-choice,
html[data-theme="dark"] .menu-skin-option,
html[data-theme="dark"] .shortcut-action,
html[data-theme="dark"] .emotion-button,
html[data-theme="dark"] .verse-emotion,
html[data-theme="dark"] .plain-button,
html[data-theme="dark"] .empty-state {
  background: rgba(29, 38, 33, 0.9);
  color: var(--ink);
}

html[data-theme="dark"] .clue-context-button.is-active,
html[data-theme="dark"] .clue-field input,
html[data-theme="dark"] .clue-field textarea {
  background: #212b26;
  color: var(--ink);
}

html[data-theme="dark"] .clue-verse-row.is-original-feeling {
  background: linear-gradient(90deg, color-mix(in srgb, var(--emotion-color) 25%, transparent), transparent 78%);
}

html[data-theme="dark"] .clue-verse-row.is-scope-editing.is-note-scope {
  background: color-mix(in srgb, var(--emotion-color) 22%, #17221d);
}

html[data-theme="dark"] .selection-feeling-chip {
  background: color-mix(in srgb, var(--emotion-color) 18%, #17221d);
}

@media (max-width: 640px) {
  .clue-scope-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .clue-scope-summary .plain-button {
    align-self: start;
  }
}

html[data-theme="dark"] .verse-row {
  background:
    linear-gradient(90deg, var(--emotion-soft), transparent 58%),
    rgba(24, 32, 28, 0.96);
}

html[data-theme="dark"] .verse-row:hover {
  background:
    linear-gradient(90deg, var(--emotion-soft), transparent 64%),
    #222c27;
}

html[data-theme="dark"] .verse-row.has-emotion {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--emotion-color) 34%, transparent),
      transparent 76%
    ),
    color-mix(in srgb, var(--emotion-color) 19%, #17201c);
  border-color: color-mix(in srgb, var(--emotion-color) 52%, #2a3630);
}

html[data-theme="dark"] .verse-row.has-emotion:hover {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--emotion-color) 40%, transparent),
      transparent 82%
    ),
    color-mix(in srgb, var(--emotion-color) 23%, #1a241f);
  border-color: color-mix(in srgb, var(--emotion-color) 68%, #33423b);
}

html[data-theme="dark"] .verse-row.has-emotion::before {
  opacity: 1;
  width: 6px;
}

html[data-theme="dark"] .verse-row.is-selected {
  border-color: rgba(250, 247, 238, 0.94);
  box-shadow:
    0 0 0 2px rgba(250, 247, 238, 0.88),
    0 0 0 5px rgba(250, 247, 238, 0.16),
    0 12px 28px rgba(0, 0, 0, 0.26);
}

html[data-theme="dark"] .verse-row.is-selected .verse-selection-check {
  background: #f7f3e8;
  color: #17201c;
}

html[data-theme="dark"] .prompt-dialog-verse,
html[data-theme="dark"] .share-preview,
html[data-theme="dark"] .shared-feeling-summary {
  background:
    linear-gradient(145deg, rgba(63, 154, 138, 0.12), transparent 44%),
    #202824;
  color: var(--ink);
}

html[data-theme="dark"] .share-preview-author,
html[data-theme="dark"] .share-preview-message,
html[data-theme="dark"] .share-preview-reference {
  color: var(--muted);
}

html[data-theme="dark"] .book-review-summary,
html[data-theme="dark"] .book-review-detail,
html[data-theme="dark"] .book-review-chapter {
  background-color: #17211d;
  border-color: #3d4c46;
}

html[data-theme="dark"] .share-card-stage {
  background:
    linear-gradient(135deg, rgba(63, 154, 138, 0.12), rgba(217, 155, 43, 0.08)),
    #111916;
  border-color: #3d4c46;
}

html[data-theme="dark"] .share-platform-note {
  color: #f0d99e;
}

html[data-theme="dark"] .share-status.is-error {
  color: #f2aaa3;
}

html[data-theme="dark"] .social-share-button,
html[data-theme="dark"] .google-button,
html[data-theme="dark"] .menu-button {
  background: #202925;
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="dark"] .menu-line {
  background: #f4f0e6;
  box-shadow: 0 0 0 1px rgba(244, 240, 230, 0.08);
}

html[data-theme="dark"] .google-button:hover:not(:disabled),
html[data-theme="dark"] .menu-button:hover,
html[data-theme="dark"] .menu-button[aria-expanded="true"],
html[data-theme="dark"] .menu-guide-button:hover,
html[data-theme="dark"] .menu-skin-option:hover,
html[data-theme="dark"] .shortcut-action:hover:not(:disabled) {
  background: #29342e;
}

html[data-theme="dark"] .menu-guide-button {
  background: rgba(47, 93, 80, 0.3);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .auth-input,
html[data-theme="dark"] .share-message-field textarea,
html[data-theme="dark"] .share-result input {
  background: #202925;
  border-color: var(--line-strong);
  color: var(--ink);
}

html[data-theme="dark"] .bar-track,
html[data-theme="dark"] .emotion-strip.empty {
  background: #303b35;
}

html[data-theme="dark"] .status-pill {
  background: #26322c;
  color: #bfd2c8;
}

html[data-theme="dark"] .auth-field,
html[data-theme="dark"] .email-mode-label,
html[data-theme="dark"] .google-button {
  color: var(--ink);
}

html[data-theme="dark"] .auth-credentials-option {
  background: rgba(92, 169, 152, 0.1);
  border-color: rgba(131, 203, 188, 0.28);
}

html[data-theme="dark"] .inline-link,
html[data-theme="dark"] .text-button,
html[data-theme="dark"] .menu-legal-links button:hover {
  color: #83cbbc;
}

html[data-theme="dark"] .display-mode-options button.is-active {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.26);
}

html[data-theme="dark"] .marker-style-option {
  background: rgba(20, 34, 29, 0.72);
}

html[data-theme="dark"] .marker-style-option.is-active {
  background: rgba(63, 154, 138, 0.16);
}

html[data-theme="dark"] .feeling-clue-marker {
  background: color-mix(in srgb, var(--clue-color, var(--accent)) 15%, #14211c);
}

@media (max-width: 980px) {
  html[data-theme="dark"] body.has-reader-selection .reader-layout .mark-panel {
    background: var(--surface);
  }
}

/* Andre commercial polish pass */
body {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)),
    linear-gradient(90deg, rgba(63, 154, 138, 0.035) 1px, transparent 1px),
    var(--bg);
  background-size: auto, 44px 44px, auto;
}

.auth-panel {
  padding: 38px;
}

.topbar {
  backdrop-filter: blur(18px);
  background: rgba(255, 254, 251, 0.9);
}

.status-pill {
  background: #eef3ef;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #43584f;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 7px 10px;
  white-space: nowrap;
}

.map-board,
.scripture-panel,
.mark-panel,
.stats-panel,
.vault-panel,
.prompt-panel {
  box-shadow: 0 8px 28px rgba(47, 43, 34, 0.045);
}

.book-row,
.recent-item {
  background: rgba(255, 254, 251, 0.76);
}

.book-row {
  overflow: hidden;
  position: relative;
  transition:
    border-color 180ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.book-row::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.34), transparent 48%);
  content: "";
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 220ms ease;
}

.book-row:hover {
  border-color: var(--line-strong);
  box-shadow: 0 12px 28px rgba(47, 43, 34, 0.065);
  transform: translateY(-1px);
}

.book-row:hover::before {
  opacity: 1;
}

.book-info,
.book-strips,
.book-row .plain-button {
  position: relative;
  z-index: 1;
}

.emotion-strip.empty {
  background: #ece9df;
}

.book-strips {
  gap: 12px;
}

.emotion-strip:not(.empty) {
  filter: drop-shadow(0 5px 10px rgba(45, 43, 35, 0.055));
  animation: map-strip-arrive 520ms ease both;
}

.emotion-segment {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.05) 42%, rgba(0, 0, 0, 0.05)),
    var(--segment-color);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

.segment-percent {
  text-shadow:
    0 1px 2px rgba(22, 29, 25, 0.5),
    0 5px 12px rgba(22, 29, 25, 0.22);
}

.reader-layout {
  align-items: start;
  height: calc(100vh - 190px);
  min-height: 420px;
}

.scripture-panel {
  background:
    linear-gradient(90deg, rgba(63, 154, 138, 0.06), transparent 28%),
    var(--paper);
  max-height: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: 0;
  scrollbar-gutter: stable;
}

.scripture-heading {
  align-items: end;
  background:
    linear-gradient(90deg, rgba(63, 154, 138, 0.06), transparent 28%),
    var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 18px rgba(47, 43, 34, 0.035);
  display: flex;
  justify-content: space-between;
  margin: 0 -18px 18px;
  padding: 16px 18px 14px;
  position: sticky;
  top: 0;
  z-index: 3;
}

.scripture-heading h3 {
  font-size: 1.25rem;
  margin: 0;
}

.mark-panel {
  max-height: 100%;
  min-height: 0;
  outline: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  position: sticky;
  top: 92px;
  scrollbar-gutter: stable;
}

.verse-list {
  gap: 6px;
}

.verse-row {
  background:
    linear-gradient(90deg, var(--emotion-soft), transparent 54%),
    rgba(255, 254, 251, 0.9);
  border-color: transparent;
  cursor: pointer;
  min-height: 0;
  overflow: hidden;
  padding: 6px 10px;
  position: relative;
  touch-action: pan-y;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 220ms ease,
    transform 180ms ease;
  user-select: none;
}

.verse-row:hover {
  background:
    linear-gradient(90deg, var(--emotion-soft), transparent 62%),
    #ffffff;
  border-color: var(--line);
  transform: translateY(-1px);
}

.verse-row.has-emotion::before {
  background: var(--emotion-color);
  border-radius: 999px;
  box-shadow:
    0 0 18px var(--emotion-color),
    0 0 32px var(--emotion-soft);
  content: "";
  left: 8px;
  opacity: 0.82;
  position: absolute;
  top: 12px;
  bottom: 12px;
  width: 4px;
}

.verse-row.has-emotion::after {
  background: linear-gradient(90deg, transparent, var(--emotion-color), transparent);
  bottom: 8px;
  content: "";
  height: 1px;
  left: 58px;
  opacity: 0.34;
  position: absolute;
  right: 18px;
  transform-origin: left center;
}

.verse-row.has-emotion .verse-text {
  text-shadow: 0 10px 24px var(--emotion-soft);
}

body.is-selecting-verses .verse-row {
  cursor: crosshair;
}

body.is-selecting-verses .verse-select-control {
  background: rgba(31, 59, 53, 0.08);
}

.verse-row.is-selected {
  box-shadow:
    0 0 0 2px rgba(31, 59, 53, 0.14),
    0 10px 24px rgba(31, 59, 53, 0.055);
}

.verse-row.just-marked {
  animation: feeling-settle 860ms ease-out;
}

.verse-row.just-marked::after {
  animation: feeling-trace 860ms ease-out;
}

.verse-number {
  font-size: 0.86rem;
}

.verse-select-control,
.verse-content,
.verse-text,
.verse-actions {
  position: relative;
  z-index: 1;
}

.verse-text {
  font-size: 1.08rem;
  user-select: none;
}

.verse-content {
  line-height: 1.78;
}

.verse-emotion {
  background: rgba(255, 254, 251, 0.82);
}

.emotion-button {
  background: rgba(255, 254, 251, 0.84);
}

.plain-button {
  background: rgba(255, 254, 251, 0.7);
}

.share-selection-button:not(:disabled) {
  border-color: rgba(63, 154, 138, 0.42);
  color: #226c60;
}

.share-dialog {
  background: transparent;
  border: 0;
  max-height: calc(100vh - 24px);
  max-width: 1040px;
  padding: 0;
  width: min(calc(100vw - 24px), 1040px);
}

.share-dialog::backdrop {
  backdrop-filter: blur(7px);
  background: rgba(29, 36, 33, 0.42);
}

.share-dialog-panel {
  background: #fffefb;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  padding: 24px;
}

.icon-close-button {
  align-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.65rem;
  height: 40px;
  justify-content: center;
  line-height: 1;
  padding: 0 0 3px;
  width: 40px;
}

.share-composer {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
}

.share-card-preview-panel {
  align-content: start;
  display: grid;
  gap: 12px;
  min-width: 0;
}

.share-card-preview-heading {
  align-items: start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.share-card-preview-heading strong,
.share-card-preview-heading small {
  display: block;
}

.share-card-preview-heading strong {
  font-size: 0.9rem;
}

.share-card-preview-heading small,
.share-card-preview-state {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.5;
  margin-top: 3px;
}

.share-card-preview-state {
  border: 1px solid var(--line);
  border-radius: 999px;
  flex: 0 0 auto;
  margin: 0;
  padding: 4px 8px;
}

.share-card-theme-picker {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.share-card-theme-heading {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.share-card-theme-heading strong {
  font-size: 0.86rem;
}

.share-card-theme-heading small {
  color: var(--muted);
  font-size: 0.72rem;
}

.share-card-theme-list {
  display: flex;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scrollbar-color: var(--line-strong) transparent;
  scroll-snap-type: x proximity;
}

.share-card-theme-option {
  background:
    linear-gradient(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)),
    var(--share-card-theme-image) center / cover no-repeat;
  border: 2px solid transparent;
  border-radius: var(--radius);
  color: #ffffff;
  flex: 0 0 82px;
  height: 102px;
  overflow: hidden;
  padding: 0;
  position: relative;
  scroll-snap-align: start;
  text-align: left;
}

.share-card-theme-option::after {
  background: linear-gradient(transparent 34%, rgba(9, 20, 17, 0.88));
  content: "";
  inset: 0;
  position: absolute;
}

.share-card-theme-option span {
  bottom: 7px;
  font-size: 0.72rem;
  font-weight: 700;
  left: 7px;
  line-height: 1.25;
  position: absolute;
  right: 7px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  z-index: 1;
}

.share-card-theme-option:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, white);
  transform: translateY(-1px);
}

.share-card-theme-option[aria-checked="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 26%, transparent);
}

.share-card-theme-option[aria-checked="true"]::before {
  align-items: center;
  background: var(--accent);
  border-radius: 50%;
  color: #ffffff;
  content: "✓";
  display: flex;
  font-size: 0.7rem;
  height: 19px;
  justify-content: center;
  position: absolute;
  right: 6px;
  top: 6px;
  width: 19px;
  z-index: 2;
}

html[data-theme="dark"] .share-card-theme-option[aria-checked="true"] {
  border-color: #8fd8c9;
  box-shadow: 0 0 0 2px rgba(143, 216, 201, 0.24);
}

.share-card-stage {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(63, 154, 138, 0.08), rgba(217, 155, 43, 0.06)),
    #f2f3ee;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  justify-content: center;
  min-height: 440px;
  overflow: hidden;
  padding: 16px;
}

.share-card-stage > img {
  aspect-ratio: 4 / 5;
  box-shadow: 0 18px 34px rgba(34, 42, 38, 0.16);
  display: block;
  height: auto;
  max-height: min(64vh, 650px);
  max-width: 100%;
  object-fit: contain;
  width: auto;
}

.share-card-stage .share-preview {
  width: 100%;
}

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

.share-reauth {
  justify-self: start;
}

.share-preview,
.shared-feeling-summary {
  background:
    linear-gradient(145deg, rgba(63, 154, 138, 0.08), transparent 42%),
    #fbfaf6;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: #272c29;
  min-height: 420px;
  padding: 28px;
}

.share-preview-author {
  color: #56645f;
  line-height: 1.7;
  margin: 0 0 4px;
}

.share-preview-emotion {
  color: var(--share-emotion, #3f9a8a);
  display: block;
  font-size: 1.65rem;
  margin-bottom: 22px;
}

.share-preview-message {
  border-left: 3px solid #3f9a8a;
  color: #40504b;
  font-size: 1.05rem;
  line-height: 1.75;
  margin: 0 0 22px;
  padding: 4px 0 4px 16px;
}

.share-preview-verses {
  display: grid;
  gap: 10px;
  max-height: 390px;
  overflow-y: auto;
}

.share-preview-verses p {
  line-height: 1.85;
  margin: 0;
}

.share-preview-reference {
  color: #66736e;
  font-size: 0.85rem;
  margin: 20px 0 0;
}

.share-preview-brand {
  color: #2d8b7d;
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  margin-top: 28px;
}

.share-settings,
.share-message-field {
  display: grid;
  gap: 10px;
}

.share-message-field > span:first-child,
.share-identity-field legend,
.share-result > label {
  font-size: 0.86rem;
  font-weight: 750;
}

.share-message-field textarea,
.share-result input {
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font: inherit;
  padding: 12px;
  resize: vertical;
  width: 100%;
}

.share-message-count {
  color: var(--muted);
  font-size: 0.78rem;
  justify-self: end;
}

.bf-display-name-setting {
  background: rgba(63, 154, 138, 0.06);
  border: 1px solid rgba(63, 154, 138, 0.24);
  border-radius: var(--radius);
  display: grid;
  gap: 10px;
  padding: 12px;
}

.bf-display-name-setting strong {
  font-size: 0.86rem;
}

.bf-display-name-setting p {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
  margin: 3px 0 0;
}

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

.bf-display-name-controls input {
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font: inherit;
  min-width: 0;
  padding: 10px 11px;
}

.bf-display-name-status:empty {
  display: none;
}

.bf-display-name-status.is-error {
  color: #a33b34;
}

.share-identity-field {
  border: 0;
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
}

.share-identity-field label {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  gap: 10px;
  min-height: 42px;
  padding: 8px 12px;
}

.share-privacy-note,
.share-status,
.share-platform-note {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.65;
  margin: 0;
}

.share-platform-note {
  background: rgba(217, 155, 43, 0.08);
  border-left: 3px solid rgba(217, 155, 43, 0.72);
  border-radius: 4px;
  color: #665122;
  padding: 8px 10px;
}

.share-status:not(:empty) {
  align-items: center;
  background: rgba(63, 154, 138, 0.08);
  border-left: 3px solid rgba(63, 154, 138, 0.68);
  border-radius: 4px;
  color: #365f58;
  display: flex;
  gap: 9px;
  min-height: 40px;
  padding: 8px 10px;
}

.share-status.is-preparing::before {
  animation: share-status-spin 0.8s linear infinite;
  border: 2px solid rgba(45, 139, 125, 0.22);
  border-radius: 50%;
  border-top-color: #2d8b7d;
  content: "";
  flex: 0 0 15px;
  height: 15px;
  width: 15px;
}

.share-status.is-error {
  background: rgba(198, 79, 67, 0.08);
  border-left-color: rgba(198, 79, 67, 0.72);
  color: #8e3730;
}

.share-fallback-link {
  justify-self: start;
  text-decoration: none;
}

.share-fallback-link[hidden] {
  display: none;
}

@keyframes share-status-spin {
  to {
    transform: rotate(360deg);
  }
}

.share-result {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  margin-top: 8px;
  padding-top: 16px;
}

.share-result-actions,
.share-response-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.compact-share-panel {
  margin: 0 auto;
  max-width: 680px;
}

.shared-feeling-summary {
  min-height: 0;
}

.share-response-prompt {
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.6;
}

.share-response-emotions {
  margin-top: 18px;
}

.share-response-emotions[hidden] {
  display: none;
}

.public-share-page {
  min-height: 100vh;
}

.public-share-shell {
  margin: 0 auto;
  max-width: 860px;
  padding: 24px;
}

.public-share-header {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 28px;
}

.public-share-header .brand-block {
  color: #fff;
  text-decoration: none;
  text-shadow: 0 1px 4px rgba(10, 20, 24, 0.72);
}

.public-share-header .brand-block small {
  color: rgba(255, 255, 255, 0.82);
}

.public-share-locales {
  background: rgba(255, 254, 251, 0.9);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: inline-flex;
  padding: 3px;
}

.public-share-locales button {
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: var(--muted);
  min-height: 34px;
  padding: 0 10px;
}

.public-share-locales button.is-active {
  background: #fff;
  box-shadow: 0 2px 8px rgba(32, 45, 40, 0.09);
  color: var(--ink);
  font-weight: 700;
}

.public-share-card,
.public-share-status {
  background: rgba(255, 254, 251, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(22px, 5vw, 48px);
}

.public-share-card h1 {
  font-size: clamp(1.15rem, 3vw, 1.65rem);
  line-height: 1.5;
  margin: 0;
}

.public-share-emotion {
  color: #2d8b7d;
  display: block;
  font-size: clamp(1.8rem, 6vw, 3.2rem);
  margin: 8px 0 28px;
}

.public-share-verses {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  padding: 24px 0;
}

.public-share-verses p {
  font-family: Georgia, "Noto Serif TC", serif;
  font-size: clamp(1.05rem, 2.8vw, 1.3rem);
  line-height: 1.9;
  margin: 0;
}

.public-share-reference,
.public-share-translation {
  color: var(--muted);
  font-size: 0.85rem;
}

.public-share-reference {
  margin: 18px 0 4px;
}

.public-share-translation {
  margin: 0;
}

.public-share-response {
  margin-top: 34px;
}

.public-share-response h2 {
  font-size: 1.15rem;
  line-height: 1.6;
  margin: 0 0 6px;
}

.public-share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.public-share-actions a {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  text-decoration: none;
}

.public-share-note {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.65;
  margin: 16px 0 0;
}

.public-share-status {
  display: grid;
  gap: 14px;
  justify-items: start;
}

.public-share-status span {
  color: var(--muted);
}

.line-share-page {
  background: #f1f5f2;
  color: var(--ink);
  min-height: 100vh;
}

.line-share-shell {
  margin: 0 auto;
  max-width: 680px;
  padding: 24px;
  position: relative;
  z-index: 1;
}

.line-share-header {
  margin-bottom: 20px;
}

.line-share-header .brand-block {
  color: var(--ink);
  text-decoration: none;
}

.line-share-header .brand-block small {
  color: var(--muted);
}

.line-share-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(22px, 5vw, 38px);
}

.line-share-card h1 {
  font-size: clamp(1.35rem, 5vw, 2rem);
  margin: 0;
}

.line-share-intro {
  color: var(--muted);
  line-height: 1.7;
  margin: 8px 0 22px;
}

.line-share-preview {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: 0 0 18px;
  overflow: hidden;
}

.line-share-preview img {
  display: block;
  height: auto;
  width: 100%;
}

.line-share-preview figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  justify-content: space-between;
  padding: 12px 14px;
}

.line-share-preview figcaption span {
  color: var(--muted);
}

.line-share-status {
  background: #edf5f1;
  border-left: 3px solid #2d8b7d;
  border-radius: 4px;
  line-height: 1.65;
  padding: 12px 14px;
}

.line-share-status[data-kind="error"] {
  background: #fff1ee;
  border-left-color: var(--anger);
  color: #8b332b;
}

.line-share-status[data-kind="notice"] {
  background: #fff8e8;
  border-left-color: var(--joy);
}

.line-share-status[data-kind="success"] {
  background: #ebf6ee;
  border-left-color: var(--hope);
}

.line-share-actions {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.line-share-actions button,
.line-share-actions a {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 48px;
  text-decoration: none;
}

.line-share-privacy {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.7;
  margin: 14px 4px 0;
}

.empty-state {
  background: rgba(255, 254, 251, 0.54);
}

@keyframes feeling-settle {
  0% {
    box-shadow: 0 0 0 0 rgba(31, 59, 53, 0);
    transform: translateY(0);
  }

  34% {
    box-shadow:
      0 0 0 4px rgba(31, 59, 53, 0.13),
      0 14px 28px var(--emotion-soft);
    transform: translateY(-1px);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(31, 59, 53, 0);
    transform: translateY(0);
  }
}

@keyframes feeling-trace {
  0% {
    opacity: 0;
    transform: scaleX(0.28);
  }

  36% {
    opacity: 0.58;
    transform: scaleX(1);
  }

  100% {
    opacity: 0.34;
    transform: scaleX(1);
  }
}

@keyframes map-strip-arrive {
  0% {
    opacity: 0.62;
    transform: translateY(3px) scaleX(0.98);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scaleX(1);
  }
}

@keyframes ambient-veil {
  0% {
    background-position: 12% 0%, 0% 50%;
  }

  100% {
    background-position: 78% 100%, 100% 50%;
  }
}

@keyframes paper-breathe {
  0%,
  100% {
    opacity: 0.3;
    background-position: center, 0% center;
  }

  50% {
    opacity: 0.46;
    background-position: center, 100% center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

.app-splash {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .7rem;
  color: #fffaf0;
  background: radial-gradient(circle at 50% 35%, #6f8878, #3d4d45 68%);
  transition: opacity .38s ease, visibility .38s ease;
}

.app-splash.is-dismissed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.app-splash-mark {
  display: grid;
  width: 6.5rem;
  height: 6.5rem;
  place-items: center;
  border: 1px solid rgba(255, 250, 240, .65);
  border-radius: 2rem;
  color: #3d4d45;
  background: #efe5d1;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .18);
  font: 700 2rem/1 system-ui, sans-serif;
  letter-spacing: .08em;
}

.app-splash-kicker {
  margin: .8rem 0 0;
  font: 600 .8rem/1.2 system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.app-splash-copy { margin: 0; font-size: 1rem; }
.app-splash-progress { width: 7rem; height: .2rem; overflow: hidden; border-radius: 99px; background: rgba(255, 250, 240, .24); }
.app-splash-progress span { display: block; width: 45%; height: 100%; border-radius: inherit; background: #e5b49f; animation: app-splash-progress 1.8s ease-in-out infinite; }
.app-splash-skip { margin-top: 1.4rem; color: rgba(255, 250, 240, .8); border: 0; background: transparent; text-decoration: underline; cursor: pointer; }
@keyframes app-splash-progress { 0% { transform: translateX(-130%); } 100% { transform: translateX(290%); } }

@media (max-width: 980px) {
  .reader-layout {
    height: auto;
    min-height: 0;
  }

  .scripture-panel,
  .mark-panel {
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
    position: static;
    scrollbar-gutter: auto;
  }

  .admin-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body {
  --skin-image: url("./assets/skin-gentle.svg");
  --ambient-tint: rgba(63, 154, 138, 0.08);
  --ambient-warm: rgba(217, 155, 43, 0.08);
  background: var(--bg);
  overflow-x: hidden;
}

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

body::before {
  background-image: var(--skin-image);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  filter: none;
  opacity: 1;
  transform: none;
  z-index: 0;
}

body::after {
  display: none;
}

.auth-shell,
.app {
  position: relative;
  z-index: 1;
}

body[data-skin="gentle"] {
  --skin-image: url("./assets/skin-gentle.svg");
  --ambient-tint: rgba(63, 154, 138, 0.08);
  --ambient-warm: rgba(217, 155, 43, 0.07);
}

body[data-skin="awe"] {
  --skin-image: url("./assets/skin-awe.svg");
  --ambient-tint: rgba(118, 102, 178, 0.12);
  --ambient-warm: rgba(63, 154, 138, 0.06);
}

body[data-skin="lament"] {
  --skin-image: url("./assets/skin-lament.svg");
  --ambient-tint: rgba(86, 125, 166, 0.12);
  --ambient-warm: rgba(191, 91, 112, 0.06);
}

body[data-skin="sacred"] {
  --skin-image: url("./assets/skin-sacred.svg");
  --ambient-tint: rgba(217, 155, 43, 0.11);
  --ambient-warm: rgba(118, 102, 178, 0.07);
}

body[data-skin="intense"] {
  --skin-image: url("./assets/skin-intense.svg");
  --ambient-tint: rgba(198, 79, 67, 0.13);
  --ambient-warm: rgba(86, 125, 166, 0.09);
}

body[data-skin="garden"] {
  --skin-image: url("./assets/skin-garden.svg");
  --ambient-tint: rgba(90, 157, 74, 0.11);
  --ambient-warm: rgba(217, 155, 43, 0.07);
}

body[data-skin="hakka-indigo"] {
  --skin-image: url("./assets/backgrounds/hakka-indigo.webp");
  --ambient-tint: rgba(26, 68, 108, 0.14);
  --ambient-warm: rgba(104, 142, 154, 0.08);
}

body[data-skin="starfield"] {
  --skin-image: url("./assets/backgrounds/starfield.webp");
  --ambient-tint: rgba(87, 84, 158, 0.14);
  --ambient-warm: rgba(217, 155, 43, 0.08);
}

body[data-skin="moonlit"] {
  --skin-image: url("./assets/backgrounds/moonlit.webp");
  --ambient-tint: rgba(72, 102, 135, 0.14);
  --ambient-warm: rgba(210, 225, 222, 0.08);
}

body[data-skin="aurora"] {
  --skin-image: url("./assets/backgrounds/aurora.webp");
  --ambient-tint: rgba(62, 157, 139, 0.13);
  --ambient-warm: rgba(118, 102, 178, 0.09);
}

body[data-skin="alpine-mist"] {
  --skin-image: url("./assets/backgrounds/alpine-mist.webp");
  --ambient-tint: rgba(75, 112, 104, 0.11);
  --ambient-warm: rgba(173, 195, 190, 0.09);
}

body[data-skin="coastline"] {
  --skin-image: url("./assets/backgrounds/coastline.webp");
  --ambient-tint: rgba(68, 136, 153, 0.12);
  --ambient-warm: rgba(236, 205, 141, 0.08);
}

body[data-skin="woodland"] {
  --skin-image: url("./assets/backgrounds/woodland.webp");
  --ambient-tint: rgba(52, 112, 80, 0.13);
  --ambient-warm: rgba(225, 194, 106, 0.08);
}

body[data-skin="wildflower"] {
  --skin-image: url("./assets/backgrounds/wildflower.webp");
  --ambient-tint: rgba(90, 157, 74, 0.1);
  --ambient-warm: rgba(191, 91, 112, 0.08);
}

body[data-skin="rain-window"] {
  --skin-image: url("./assets/backgrounds/rain-window.webp");
  --ambient-tint: rgba(75, 105, 134, 0.14);
  --ambient-warm: rgba(217, 155, 43, 0.06);
}

body[data-skin="stained-glass"] {
  --skin-image: url("./assets/backgrounds/stained-glass.webp");
  --ambient-tint: rgba(118, 102, 178, 0.12);
  --ambient-warm: rgba(198, 79, 67, 0.08);
}

body[data-skin="ink-landscape"] {
  --skin-image: url("./assets/backgrounds/ink-landscape.webp");
  --ambient-tint: rgba(63, 104, 92, 0.1);
  --ambient-warm: rgba(169, 75, 61, 0.05);
}

body[data-skin="desert-weave"] {
  --skin-image: url("./assets/backgrounds/desert-weave.webp");
  --ambient-tint: rgba(30, 66, 100, 0.11);
  --ambient-warm: rgba(190, 74, 53, 0.09);
}

body:is(
  [data-skin="hakka-indigo"],
  [data-skin="starfield"],
  [data-skin="moonlit"],
  [data-skin="aurora"],
  [data-skin="alpine-mist"],
  [data-skin="coastline"],
  [data-skin="woodland"],
  [data-skin="rain-window"],
  [data-skin="stained-glass"],
  [data-skin="ink-landscape"],
  [data-skin="desert-weave"]
) .page-heading h2,
body:is(
  [data-skin="hakka-indigo"],
  [data-skin="starfield"],
  [data-skin="moonlit"],
  [data-skin="aurora"],
  [data-skin="alpine-mist"],
  [data-skin="coastline"],
  [data-skin="woodland"],
  [data-skin="rain-window"],
  [data-skin="stained-glass"],
  [data-skin="ink-landscape"],
  [data-skin="desert-weave"]
) .page-heading .eyebrow,
body:is(
  [data-skin="hakka-indigo"],
  [data-skin="starfield"],
  [data-skin="moonlit"],
  [data-skin="aurora"],
  [data-skin="alpine-mist"],
  [data-skin="coastline"],
  [data-skin="woodland"],
  [data-skin="rain-window"],
  [data-skin="stained-glass"],
  [data-skin="ink-landscape"],
  [data-skin="desert-weave"]
) .reader-toolbar .select-field > span {
  color: #fff;
  text-shadow: 0 1px 3px rgba(10, 20, 24, 0.95), 0 0 14px rgba(10, 20, 24, 0.72);
}

#bibleVersionSelect,
#menuBibleVersionSelect {
  min-width: 13rem;
}

@media (max-width: 640px) {
  #bibleVersionSelect,
  #menuBibleVersionSelect {
    min-width: 0;
    width: 100%;
  }

  .reader-version-field {
    display: none;
  }

  .reader-bible-settings {
    grid-column: 1 / -1;
    justify-content: flex-start;
    max-width: 100%;
    min-height: 40px;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .feeling-vault-heading {
    display: grid;
    grid-template-columns: 1fr;
  }

  #vaultFeelingCount {
    justify-self: start;
    white-space: nowrap;
  }

  .view-tabs,
  .view-tabs:has(#adminTab:not([hidden])) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .tab-button {
    line-height: 1.25;
    min-height: 42px;
    white-space: normal;
  }

  .admin-layout,
  .admin-metrics {
    grid-template-columns: 1fr;
  }

  .account-lifecycle {
    align-items: stretch;
    flex-direction: column;
  }

  .vault-share-item,
  .vault-share-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .vault-feeling-record {
    align-items: start;
    grid-template-columns: 1fr auto;
  }

  .vault-time-zone-controls {
    grid-template-columns: 1fr;
  }

  .vault-time-zone-controls .plain-button {
    width: 100%;
  }

  .vault-time-zone-preview li {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .vault-time-zone-preview li strong {
    transform: rotate(90deg);
    width: max-content;
  }

  .vault-feeling-copy {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .vault-feeling-open {
    grid-column: 2;
    grid-row: 1;
  }

  .feeling-clue-dialog {
    max-height: calc(100vh - 10px);
    width: min(calc(100vw - 10px), 760px);
  }

  .feeling-clue-panel {
    padding: 16px;
  }

  .clue-anchor-control {
    grid-template-columns: 1fr;
  }

  .clue-dialog-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .clue-delete-button {
    grid-column: 1 / -1;
    justify-self: start;
    margin-right: 0;
  }

  .legal-dialog-panel {
    padding: 18px;
  }

  .share-dialog {
    max-height: calc(100vh - 12px);
    width: min(calc(100vw - 12px), 1040px);
  }

  .share-dialog-panel {
    max-height: calc(100vh - 12px);
    padding: 16px;
  }

  .share-composer {
    grid-template-columns: 1fr;
  }

  .book-review-overview {
    grid-template-columns: 1fr;
  }

  .share-preview,
  .shared-feeling-summary {
    min-height: 0;
    padding: 18px;
  }

  .share-card-stage {
    min-height: 0;
    padding: 10px;
  }

  .share-card-stage > img {
    max-height: none;
    width: 100%;
  }

  .public-share-shell {
    padding: 12px;
  }

  .public-share-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .public-share-card,
  .public-share-status {
    padding: 22px 18px;
  }

  .public-share-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .guide-dialog {
    max-height: calc(100vh - 16px);
    width: min(calc(100vw - 16px), 900px);
  }

  .guide-dialog-panel {
    padding: 14px;
  }

  .guide-heading h3 {
    font-size: 1.05rem;
  }

  .guide-module-tabs {
    grid-template-columns: repeat(5, minmax(112px, 1fr));
  }

  .guide-module-intro strong {
    font-size: 0.95rem;
  }

  .guide-module-intro p {
    font-size: 0.82rem;
  }

  .guide-lesson-stage,
  .guide-lesson-board {
    min-height: 390px;
  }

  .guide-lesson-board {
    gap: 15px;
    padding: 18px 14px;
  }

  .guide-clue-verse {
    font-size: 1rem;
    padding-block: 22px;
  }

  .guide-animation {
    --guide-emotion-left-x: 76.83%;
    --guide-emotion-right-x: 89.17%;
    --guide-emotion-row-one-y: 41.07%;
    --guide-emotion-row-two-y: 49.4%;
    --guide-handle-x: 10%;
    --guide-verse-four-y: 86.43%;
    --guide-verse-one-y: 40%;
    --guide-verse-three-y: 70.95%;
    --guide-verse-two-y: 55.48%;
    aspect-ratio: auto;
    min-height: 420px;
  }

  .guide-demo-topbar {
    gap: 7px;
    min-height: 48px;
    padding: 7px 9px;
  }

  .guide-demo-status {
    font-size: 0.62rem;
    min-width: 72px;
  }

  .guide-stage-message {
    min-height: 46px;
    padding-inline: 10px;
  }

  .guide-demo-content {
    gap: 8px;
    grid-template-columns: minmax(0, 1.55fr) minmax(92px, 0.7fr);
    padding: 4px 8px 12px;
  }

  .guide-reader-demo,
  .guide-emotion-demo {
    padding: 8px;
  }

  .guide-demo-verse {
    gap: 5px;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    min-height: 58px;
    padding: 6px;
  }

  .guide-demo-verse > span {
    height: 20px;
    width: 20px;
  }

  .guide-demo-verse p {
    font-size: 0.63rem;
  }

  .guide-demo-verse em {
    font-size: 0.54rem;
    padding: 2px 5px;
  }

  .guide-emotion-grid {
    gap: 4px;
  }

  .guide-emotion-choice {
    border-left-width: 3px;
    font-size: 0.58rem;
    min-height: 31px;
  }

  .guide-controls button {
    flex: 1 1 0;
    min-width: 0;
  }

  .skin-switcher {
    max-width: 100%;
  }

  .app-menu-panel {
    left: 0;
    max-height: calc(100dvh - 220px);
    max-width: none;
    min-width: 0;
    right: 0;
    top: calc(100% + 8px);
    width: auto;
  }
}

@media (max-width: 980px) {
  .map-layout .side-panel {
    order: -1;
  }

  body[data-active-view="readerView"] .scope-toolbar {
    display: none;
  }

  .reader-layout {
    display: block;
    height: auto;
  }

  .reader-layout .mark-panel {
    display: none;
  }

  body.mobile-mark-panel-open.has-reader-selection .reader-layout .mark-panel {
    --sheet-drag-y: 0px;
    background: #fffefb;
    border: 1px solid var(--line-strong);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    bottom: 0;
    box-shadow: 0 -18px 46px rgba(27, 38, 34, 0.18);
    display: flex;
    flex-direction: column;
    left: 50%;
    max-height: min(74dvh, 640px);
    max-width: 720px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 20px calc(20px + env(safe-area-inset-bottom));
    position: fixed;
    right: auto;
    top: auto;
    touch-action: pan-y;
    transform: translate(-50%, var(--sheet-drag-y));
    width: min(100%, 720px);
    z-index: 30;
  }

  body.has-reader-selection #readerView {
    padding-bottom: calc(90px + env(safe-area-inset-bottom));
  }

  .mobile-mark-sheet-header {
    align-items: center;
    background: #fffefb;
    display: flex;
    justify-content: center;
    min-height: 46px;
    position: sticky;
    top: 0;
    z-index: 3;
  }

  .mobile-sheet-handle {
    background: var(--line-strong);
    border-radius: 999px;
    display: block;
    height: 4px;
    touch-action: none;
    width: 42px;
  }

  .mobile-sheet-close {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--ink);
    display: inline-flex;
    font: inherit;
    font-size: 1.8rem;
    height: 38px;
    justify-content: center;
    line-height: 1;
    padding: 0 0 4px;
    position: absolute;
    right: 0;
    top: 2px;
    width: 38px;
  }

  .mobile-mark-scrim {
    background: rgba(18, 26, 22, 0.42);
    border: 0;
    display: none;
    inset: 0;
    padding: 0;
    position: fixed;
    z-index: 28;
  }

  body.mobile-mark-panel-open .mobile-mark-scrim {
    display: block;
  }

  .mobile-mark-launcher {
    align-items: center;
    background: #173d36;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    bottom: calc(20px + env(safe-area-inset-bottom));
    box-shadow:
      0 13px 30px rgba(20, 45, 39, 0.28),
      0 0 0 5px rgba(63, 154, 138, 0.14);
    color: #fff;
    height: 62px;
    justify-content: center;
    padding: 0;
    position: fixed;
    right: max(18px, env(safe-area-inset-right));
    width: 62px;
    z-index: 26;
  }

  body.has-reader-selection:not(.mobile-mark-panel-open):not(.is-selecting-verses)
    .mobile-mark-launcher {
    display: inline-flex;
  }

  .mobile-mark-launcher svg {
    fill: none;
    height: 29px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 29px;
  }

  .mobile-mark-count {
    align-items: center;
    background: #d99b2b;
    border: 2px solid #fff;
    border-radius: 999px;
    color: #17201c;
    display: inline-flex;
    font-size: 0.7rem;
    font-weight: 800;
    height: 23px;
    justify-content: center;
    min-width: 23px;
    padding-inline: 4px;
    position: absolute;
    right: -3px;
    top: -5px;
  }

  .reader-layout .mark-panel .section-heading {
    align-items: start;
    display: grid;
    gap: 8px;
    margin-bottom: 8px;
  }

  .reader-layout .mark-panel .mark-actions {
    justify-content: flex-start;
  }

  .reader-layout .mark-panel .history-box {
    display: none;
  }

  .reader-layout .mark-panel .emotion-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reader-layout .mark-panel .emotion-button {
    min-height: 48px;
  }

  html[data-theme="dark"] .mobile-mark-sheet-header,
  html[data-theme="dark"] body.mobile-mark-panel-open .reader-layout .mark-panel {
    background: var(--surface);
  }
}

@media (max-width: 640px) {
  .topbar {
    gap: 8px;
    position: static;
  }

  .view-tabs,
  .view-tabs:has(#adminTab:not([hidden])) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
  }

  .account-area .skin-switcher,
  .account-area .status-pill,
  .account-area .account-initial {
    display: none;
  }

  body[data-backend-mode="guest"] .account-area .status-pill {
    display: inline-flex;
    white-space: nowrap;
  }

  .workspace {
    padding-top: 14px;
  }

  body[data-active-view="readerView"] .reader-toolbar .page-heading {
    display: none;
  }

  body[data-active-view="readerView"] .reader-toolbar {
    margin-bottom: 12px;
  }

  body[data-active-view="readerView"] .reader-controls {
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) 92px;
    width: 100%;
  }

  body[data-active-view="readerView"] .chapter-navigation {
    grid-column: 1 / -1;
  }

  body[data-active-view="readerView"] .chapter-navigation .plain-button {
    flex: 1;
    min-height: 44px;
  }

  body[data-active-view="readerView"] .reader-controls .select-field:first-child {
    grid-column: 1 / -1;
  }

  body[data-active-view="readerView"] .reader-controls select {
    min-width: 0;
    width: 100%;
  }

  .scripture-panel {
    padding: 0 12px 12px;
  }

  .scripture-heading {
    margin: 0 -12px 12px;
    padding: 12px;
  }

  .scripture-heading .eyebrow {
    display: none;
  }

  .scripture-heading h3 {
    font-size: 1.08rem;
  }

  .verse-row,
  .verse-list.is-mood-text-hidden .verse-row {
    gap: 6px;
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 5px 6px;
  }

  .verse-select-control {
    justify-content: center;
  }

  .feeling-clue-marker {
    min-height: 32px;
    min-width: 32px;
    padding-inline: 7px;
  }

  .verse-actions .verse-history-button,
  .verse-actions .verse-emotion {
    min-height: 32px;
  }

  .verse-mood-visibility-toggle {
    padding-inline: 9px;
  }

  .social-share-grid {
    grid-template-columns: 1fr;
  }

  .bf-display-name-controls {
    grid-template-columns: 1fr;
  }

  body.mobile-mark-panel-open.has-reader-selection .reader-layout .mark-panel {
    max-height: 82dvh;
  }

  .reader-layout .mark-panel .mark-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .reader-layout .mark-panel .mark-actions button {
    min-width: 0;
    padding-inline: 7px;
  }
}

/* Group reading */
.group-view {
  color: var(--ink);
}

.group-page-heading {
  align-items: end;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 22px;
}

.group-intro {
  color: var(--muted);
  margin: 8px 0 0;
  max-width: 680px;
}

.feature-access-pill,
.menu-feature-badge {
  background: #f2e2b9;
  border: 1px solid #d8b969;
  color: #604915;
  font-size: 0.75rem;
  font-weight: 800;
}

.feature-access-pill {
  border-radius: 999px;
  padding: 7px 11px;
  white-space: nowrap;
}

.group-workspace {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
}

.group-sidebar,
.group-stage {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.group-sidebar {
  max-height: calc(100dvh - 155px);
  overflow-y: auto;
  padding: 16px;
  position: sticky;
  top: 78px;
}

.group-sidebar .section-heading {
  margin-bottom: 12px;
}

.group-list {
  display: grid;
  gap: 7px;
}

.group-list-item {
  align-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  display: flex;
  font: inherit;
  gap: 8px;
  justify-content: space-between;
  min-height: 58px;
  padding: 9px 10px;
  text-align: left;
  width: 100%;
}

.group-list-item:hover,
.group-list-item.is-active {
  background: color-mix(in srgb, var(--accent-soft) 58%, var(--surface));
  border-color: var(--accent);
}

.group-list-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.group-list-copy strong,
.group-list-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-list-copy small {
  color: var(--muted);
}

.group-live-dot {
  color: #2d7467;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.group-live-dot::before {
  background: #3f9a8a;
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 7px;
  margin-right: 5px;
  width: 7px;
}

.group-action-disclosure {
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 12px;
}

.group-action-disclosure summary {
  cursor: pointer;
  font-weight: 800;
}

.group-compact-form {
  display: grid;
  gap: 8px;
  padding-top: 11px;
}

.group-compact-form label {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.group-compact-form button {
  width: 100%;
}

.group-code-input {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.group-status {
  color: #287063;
  font-size: 0.82rem;
  line-height: 1.5;
  margin: 12px 0 0;
}

.group-status:empty {
  display: none;
}

.group-status.is-error {
  color: #b4483d;
}

.group-stage {
  min-height: 560px;
  padding: 20px;
}

.group-empty-welcome {
  align-content: center;
  display: grid;
  justify-items: center;
  min-height: 500px;
  text-align: center;
}

.group-empty-welcome h3 {
  margin: 16px 0 5px;
}

.group-empty-welcome p {
  color: var(--muted);
  max-width: 440px;
}

.group-welcome-mark {
  align-items: center;
  background: #1d453d;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 900;
  height: 52px;
  justify-content: center;
  width: 52px;
}

.group-detail-header {
  align-items: start;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding-bottom: 16px;
}

.group-detail-header h3 {
  font-size: 1.42rem;
  margin: 2px 0 5px;
}

.group-detail-header p {
  color: var(--muted);
  margin: 0;
}

.group-invite-box {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  display: grid;
  gap: 2px 10px;
  grid-template-columns: auto auto;
  padding: 8px 9px 8px 12px;
}

.group-invite-box span {
  color: var(--muted);
  font-size: 0.72rem;
  grid-column: 1;
}

.group-invite-box strong {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  grid-column: 1;
  letter-spacing: 0.08em;
}

.group-invite-box button {
  grid-column: 2;
  grid-row: 1 / 3;
}

.group-member-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 13px 0 4px;
}

.group-member-chip {
  align-items: center;
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface));
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.82rem;
  gap: 5px;
  padding: 5px 9px;
}

.group-member-chip small {
  color: var(--muted);
  font-size: 0.68rem;
}

.group-member-chip.is-leader {
  border-color: #d7b65f;
}

.group-session-builder,
.group-session-card,
.group-no-session {
  border-top: 1px solid var(--line);
  margin-top: 16px;
  padding-top: 18px;
}

.group-session-builder .section-heading {
  align-items: start;
}

.group-session-builder h4,
.group-session-card h4,
.group-no-session h4 {
  font-size: 1.08rem;
  margin: 3px 0;
}

.group-passage-preview {
  color: #257264;
  font-weight: 800;
}

.group-builder-note {
  color: var(--muted);
  margin: 6px 0 14px;
}

.group-passage-controls {
  display: grid;
  gap: 9px;
  grid-template-columns: minmax(150px, 1.6fr) minmax(130px, 1fr) 90px 90px 90px;
}

.group-passage-controls label {
  display: grid;
  gap: 5px;
}

.group-passage-controls label > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.group-passage-controls select {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  color: var(--ink);
  font: inherit;
  min-height: 42px;
  padding: 7px 9px;
  width: 100%;
}

.group-start-button {
  margin-top: 13px;
}

.group-session-header {
  align-items: start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.group-session-header p {
  color: var(--muted);
  margin: 4px 0 0;
}

.group-session-status {
  color: #287063;
  display: block;
  font-size: 0.76rem;
  font-weight: 900;
  margin-bottom: 5px;
}

.group-session-status.is-closed {
  color: var(--muted);
}

.group-response-progress {
  display: grid;
  justify-items: end;
  white-space: nowrap;
}

.group-response-progress strong {
  font-size: 1.3rem;
}

.group-response-progress span {
  color: var(--muted);
  font-size: 0.75rem;
}

.group-scripture {
  background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface));
  border-left: 4px solid var(--accent);
  margin: 15px 0;
  max-height: 300px;
  overflow-y: auto;
  padding: 10px 14px;
}

.group-scripture p {
  line-height: 1.8;
  margin: 5px 0;
}

.group-scripture p span {
  color: var(--muted);
  font-size: 0.8rem;
  margin-right: 9px;
}

.group-response-entry {
  border-top: 1px solid var(--line);
  padding-top: 15px;
}

.group-response-entry h5,
.group-response-results h5 {
  font-size: 0.96rem;
  margin: 0;
}

.group-response-entry p {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 5px 0 12px;
}

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

.group-emotion-button {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--emotion-color);
  border-radius: 7px;
  color: var(--ink);
  display: flex;
  font: inherit;
  gap: 7px;
  min-height: 45px;
  padding: 8px 9px;
}

.group-emotion-button > span {
  background: var(--emotion-color);
  border-radius: 50%;
  height: 10px;
  width: 10px;
}

.group-emotion-button:hover,
.group-emotion-button.is-selected {
  background: var(--emotion-soft);
  border-color: var(--emotion-color);
}

.group-sealed-state {
  align-items: center;
  background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface));
  border-left: 3px solid var(--accent);
  display: flex;
  gap: 10px;
  margin-top: 15px;
  padding: 11px 13px;
}

.group-sealed-state span {
  color: var(--muted);
  font-size: 0.82rem;
}

.group-response-results {
  border-top: 1px solid var(--line);
  margin-top: 16px;
  padding-top: 15px;
}

.group-response-results .section-heading > span {
  color: var(--muted);
  font-size: 0.78rem;
}

.group-response-cards {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 10px;
}

.group-response-card {
  align-items: center;
  background: var(--emotion-soft);
  border: 1px solid color-mix(in srgb, var(--emotion-color) 55%, var(--line));
  border-left: 4px solid var(--emotion-color);
  border-radius: 7px;
  display: flex;
  gap: 9px;
  min-width: 0;
  padding: 9px;
}

.group-response-avatar {
  align-items: center;
  background: var(--emotion-color);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex: 0 0 32px;
  font-size: 0.75rem;
  font-weight: 900;
  height: 32px;
  justify-content: center;
}

.group-response-card div {
  display: grid;
  min-width: 0;
}

.group-response-card strong,
.group-response-card div span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-response-card div span {
  color: var(--muted);
  font-size: 0.78rem;
}

.group-conversation-prompts {
  background: color-mix(in srgb, var(--accent-soft) 38%, var(--surface));
  border-left: 4px solid var(--accent);
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(150px, 0.7fr) minmax(0, 1.3fr);
  margin-top: 16px;
  padding: 14px 16px;
}

.group-conversation-prompts span {
  color: #287063;
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.group-conversation-prompts h5 {
  font-size: 0.96rem;
  margin: 3px 0 0;
}

.group-conversation-prompts p {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
  margin: 5px 0 0;
}

.group-conversation-prompts ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 22px;
}

.group-conversation-prompts li {
  line-height: 1.6;
  padding-left: 3px;
}

.group-leader-actions {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-top: 17px;
  padding-top: 15px;
}

.group-leader-actions > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.group-leader-actions > div {
  display: flex;
  gap: 8px;
}

.group-no-session {
  color: var(--muted);
}

html[data-theme="dark"] .feature-access-pill,
html[data-theme="dark"] .menu-feature-badge {
  background: #4b401f;
  border-color: #796837;
  color: #f1d98e;
}

html[data-theme="dark"] .group-live-dot,
html[data-theme="dark"] .group-passage-preview,
html[data-theme="dark"] .group-session-status,
html[data-theme="dark"] .group-conversation-prompts span,
html[data-theme="dark"] .group-status {
  color: #72c8b7;
}

html[data-theme="dark"] .group-status.is-error {
  color: #ff8d81;
}

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

  .group-sidebar {
    max-height: none;
    position: static;
  }

  .group-passage-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .group-passage-controls label:first-child,
  .group-passage-controls label:nth-child(2) {
    grid-column: span 1;
  }

  .group-response-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .group-page-heading {
    align-items: start;
    display: grid;
  }

  .feature-access-pill {
    justify-self: start;
  }

  .group-stage {
    min-height: 420px;
    padding: 14px;
  }

  .group-detail-header,
  .group-session-header,
  .group-leader-actions {
    align-items: stretch;
    display: grid;
  }

  .group-invite-box {
    width: 100%;
  }

  .group-passage-controls,
  .group-emotion-grid,
  .group-response-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .group-passage-controls label:first-child,
  .group-passage-controls label:nth-child(2) {
    grid-column: 1 / -1;
  }

  .group-leader-actions > div {
    display: grid;
  }

  .group-conversation-prompts {
    grid-template-columns: 1fr;
  }

  .group-leader-actions button {
    width: 100%;
  }

  .group-sealed-state {
    align-items: start;
    display: grid;
  }

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

  .personal-emotion-actions {
    justify-content: flex-start;
  }
}
/* Account controls remain visible outside the collapsed navigation menu. */
#accountEntry { max-width: 12rem; overflow-wrap: anywhere; }
.public-summary {
  border-block-start: 1px solid var(--line, #ddd);
  margin-block: 1.25rem .5rem;
  padding: 1rem 0 0;
}
.public-summary h2 { font-size: .9rem; margin-block: 0 .45rem; }
.public-summary p { color: var(--muted); font-size: .84rem; line-height: 1.55; margin-block: 0 .4rem; }
.menu-translation { display: grid; gap: .6rem; }
#bibleAvailability { font-size: .8rem; line-height: 1.6; }
[lang="my"], [lang="th"], #bibleTextLanguage { line-height: 1.8; overflow-wrap: anywhere; word-break: normal; }
@media (max-width: 600px) { #accountEntry { max-width: 7rem; font-size: .8rem; } #accountLogout { font-size: .8rem; } }

@media (max-width: 390px) {
  .bible-tradition-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}