:root {
  --bg: #f4f1e8;
  --panel: #fffaf1;
  --ink: #2c2418;
  --text: var(--ink);
  --muted: #746a5e;
  --line: #d9cbb8;
  --accent: #42516a;
  --accent-ink: #ffffff;
  --soft: #e8dfcf;
  --danger: #9e3a31;
  --underline: #ffe59a;
  --font-size: 19px;
}

[data-theme="dark"] {
  --bg: #121722;
  --panel: #1c2330;
  --ink: #f4efe6;
  --text: var(--ink);
  --muted: #b9afa0;
  --line: #384154;
  --accent: #8ca8d7;
  --accent-ink: #121722;
  --soft: #283044;
  --underline: #564c21;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.app-shell {
  min-height: 100dvh;
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  background: var(--panel);
  box-shadow: 0 0 40px rgba(0,0,0,.12);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  gap: 8px;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 8px 8px;
  background: var(--accent);
  color: var(--accent-ink);
}
.nav-btn, .reference-btn, .bottom-tabs button, .primary-btn, .secondary-btn {
  border: 0;
  border-radius: 10px;
}
.nav-btn {
  min-height: 44px;
  background: rgba(255,255,255,.16);
  color: var(--accent-ink);
  font-size: 20px;
}
.title-block { text-align: center; }
.app-title { font-size: 13px; opacity: .86; letter-spacing: .04em; }
.reference-btn {
  width: 100%;
  margin-top: 3px;
  padding: 6px 10px;
  background: rgba(255,255,255,.20);
  color: var(--accent-ink);
  font-weight: 700;
}

.selector-panel {
  padding: 12px;
  display: grid;
  gap: 9px;
  grid-template-columns: 1fr 1fr;
  background: var(--soft);
  border-bottom: 1px solid var(--line);
}
.selector-panel label, .settings-card label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 13px;
}
.selector-panel select, .search-box input, .settings-card select, .settings-card input, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--panel);
  color: var(--ink);
}
.selector-panel .primary-btn { grid-column: 1 / -1; }

.content {
  overflow: auto;
  padding: 12px 12px 78px;
}
.view { display: none; }
.active-view { display: block; }
.chapter-title {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: -12px -12px 10px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}
.verse-list { display: grid; gap: 8px; }
.verse-row {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 8px;
  align-items: start;
  padding: 8px 6px;
  border-radius: 12px;
}
.verse-row:active { background: var(--soft); }
.verse-no {
  color: var(--muted);
  text-align: right;
  font-size: 13px;
  line-height: 1.85;
}
.verse-body {
  font-size: var(--font-size);
  line-height: 1.78;
  word-break: keep-all;
}
.verse-text.underlined {
  background: linear-gradient(transparent 56%, var(--underline) 56%);
  border-radius: 4px;
}
.parallel-text {
  margin-top: 7px;
  padding-left: 10px;
  border-left: 3px solid var(--line);
  color: var(--muted);
  font-size: calc(var(--font-size) - 2px);
}
.memo-mark {
  display: inline-flex;
  margin-left: 6px;
  color: var(--danger);
  font-size: 13px;
  vertical-align: super;
}

.search-box {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-bottom: 8px;
}
.primary-btn {
  padding: 10px 14px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}
.secondary-btn {
  padding: 10px 14px;
  background: var(--soft);
  color: var(--ink);
  border: 1px solid var(--line);
}
.hint, .empty-state {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.section-title {
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 12px;
}
.result-list { display: grid; gap: 9px; }
.result-card {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 14px;
  padding: 12px;
}
.result-ref {
  color: var(--accent);
  font-weight: 800;
  margin-bottom: 4px;
}
.result-text { line-height: 1.6; }

.read-plan {
  display: grid;
  gap: 12px;
}
.plan-book {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.plan-book summary {
  padding: 12px;
  font-weight: 800;
  background: var(--soft);
}
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 8px;
  padding: 12px;
}
.plan-grid button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
}
.plan-grid button.done {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.settings-card {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
}
.switch-row {
  grid-template-columns: 1fr auto;
  align-items: center;
}
.settings-card textarea {
  min-height: 130px;
  resize: vertical;
}
.bottom-tabs {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(760px, 100%);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  padding: 6px 6px calc(env(safe-area-inset-bottom, 0px) + 6px);
  background: var(--soft);
  border-top: 1px solid var(--line);
}
.bottom-tabs button {
  min-height: 48px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.bottom-tabs button.active-tab {
  background: var(--panel);
  color: var(--accent);
  box-shadow: 0 1px 5px rgba(0,0,0,.08);
}
.verse-dialog {
  width: min(92vw, 520px);
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: var(--panel);
  color: var(--ink);
}
.verse-dialog::backdrop { background: rgba(0,0,0,.45); }
.verse-dialog form { padding: 16px; display: grid; gap: 12px; }
.dialog-ref { font-weight: 800; color: var(--accent); }
.dialog-text { line-height: 1.65; }
.dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

@media (max-width: 420px) {
  .selector-panel { grid-template-columns: 1fr; }
  .bottom-tabs button { font-size: 12px; }
  .verse-row { grid-template-columns: 34px 1fr; }
}
.result-card {
  display: block;
  width: 100%;
  text-align: left;
  color: var(--ink);
}

/* Milestone 1: mobile selector and restored app-like navigation */
.icon-btn {
  border: 1px solid var(--line);
  border-radius: 999px;
  min-width: 40px;
  min-height: 40px;
  background: var(--panel);
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
}

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

.selector-panel {
  grid-template-columns: 1fr;
  max-height: min(72dvh, 680px);
  overflow: auto;
}

.selector-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
}

.selector-title {
  font-size: 17px;
  font-weight: 900;
  color: var(--ink);
}

.selector-status {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.selector-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.selector-grid-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 12px;
}

.panel-title,
.subsection-title {
  margin: 4px 0 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.subsection-title {
  margin-top: 18px;
  color: var(--accent);
}

.book-grid,
.chapter-grid {
  display: grid;
  gap: 7px;
}

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

.chapter-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: start;
}

.book-grid button,
.chapter-grid button,
.toolbar-btn {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
}

.book-grid button {
  min-height: 38px;
  padding: 7px 4px;
  font-size: 13px;
  font-weight: 700;
}

.chapter-grid button {
  min-height: 38px;
  padding: 6px 4px;
  font-size: 13px;
}

.book-grid button.active,
.chapter-grid button.active,
.toolbar-btn.active {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  font-weight: 900;
}

.read-toolbar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 10px;
}

.toolbar-btn {
  min-height: 40px;
  padding: 8px 8px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
}

.bottom-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.bottom-tabs::-webkit-scrollbar { display: none; }

.bottom-tabs button {
  flex: 0 0 86px;
}

.result-meta {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.dialog-actions.four-actions {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.dialog-actions .close-action {
  grid-column: 1 / -1;
}


/* Shared feedback toast for Logi bonus/shop actions. */
.app-feedback-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + 44px);
  transform: translateX(-50%) translateY(12px);
  z-index: 82;
  width: fit-content;
  max-width: min(72vw, 252px);
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 94%, var(--bg) 6%);
  color: var(--text);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  font-size: .76rem;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.app-feedback-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.app-feedback-toast[data-type="ok"] {
  border-color: rgba(34, 197, 94, .35);
  background: color-mix(in srgb, #dcfce7 72%, var(--panel) 28%);
  color: #166534;
}

.app-feedback-toast[data-type="warn"],
.app-feedback-toast[data-type="error"] {
  border-color: rgba(245, 158, 11, .42);
  background: color-mix(in srgb, #fef3c7 70%, var(--panel) 30%);
  color: #92400e;
}

[data-theme="dark"] .app-feedback-toast {
  background: rgba(18, 22, 31, .96);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.9);
}

[data-theme="dark"] .app-feedback-toast[data-type="ok"] {
  border-color: rgba(74, 222, 128, .38);
  background: rgba(20, 83, 45, .95);
  color: #dcfce7;
}

[data-theme="dark"] .app-feedback-toast[data-type="warn"],
[data-theme="dark"] .app-feedback-toast[data-type="error"] {
  border-color: rgba(251, 191, 36, .38);
  background: rgba(92, 55, 8, .96);
  color: #fef3c7;
}


@media (max-width: 359px) {
  .app-feedback-toast {
    bottom: calc(var(--bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + 38px);
    max-width: min(78vw, 240px);
    font-size: .72rem;
  }

}

@media (max-width: 520px) {
  .selector-fields,
  .selector-grid-wrap {
    grid-template-columns: 1fr;
  }

  .book-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .chapter-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .book-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chapter-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .dialog-actions.four-actions { grid-template-columns: 1fr 1fr; }
}


/* Milestone 2: user record management, backup/restore, and read plan progress */
.record-tools,
.backup-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(116px, auto) minmax(108px, auto);
  gap: 8px;
  margin: 10px 0 12px;
}

.record-tools input,
.record-tools select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--panel);
  color: var(--ink);
}

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

.record-status {
  min-height: 1.2em;
  margin: -4px 0 8px;
}

.manageable-card {
  display: grid;
  gap: 10px;
}

.result-main {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

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

.small-btn {
  min-height: 34px;
  padding: 7px 11px;
  font-size: 13px;
}

.danger-btn {
  color: var(--danger);
}

.type-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-right: 5px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.plan-stats {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--soft);
}

.stats-line {
  color: var(--ink);
  font-size: 15px;
}

.progress-track {
  width: 100%;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.progress-track > div {
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.storage-status {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
}

.storage-status[data-status="ok"] {
  color: var(--ink);
}

.storage-status[data-status="warning"] {
  color: var(--danger);
}

#backupStatus:not(:empty) {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
}

@media (max-width: 520px) {
  .record-tools,
  .backup-actions {
    grid-template-columns: 1fr;
  }
}

/* Milestone 4: expanded Bible data catalog and selective offline caching */
.data-catalog-summary {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
}

.copyright-warning {
  color: var(--danger);
  font-weight: 700;
}

.data-quality-warning {
  display: grid;
  gap: 4px;
  margin: 2px 0 8px;
  padding: 10px 12px;
  border: 1px solid rgba(214, 120, 64, .45);
  border-radius: 12px;
  background: rgba(214, 120, 64, .10);
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}
.data-quality-note {
  color: var(--muted);
  font-size: 12px;
}
.missing-verse-text {
  color: var(--danger);
  font-weight: 800;
}

select optgroup {
  color: var(--muted);
  font-weight: 800;
}

/* Milestone 5: advanced search scopes, highlighting, and result actions */
.search-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 8px 0 10px;
}

.search-options label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 13px;
}

.search-options select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--panel);
  color: var(--ink);
}

.search-summary {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.searchable-card mark {
  padding: 0 2px;
  border-radius: 4px;
  background: var(--underline);
  color: var(--ink);
}

.search-card-actions {
  justify-content: flex-start;
}

.search-card-actions .small-btn {
  flex: 0 0 auto;
}

@media (max-width: 520px) {
  .search-options {
    grid-template-columns: 1fr;
  }
}


/* File-open guard and local server helper */
.startup-help-card p {
  margin: 8px 0;
  line-height: 1.65;
}

.code-box {
  margin: 10px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  overflow-x: auto;
  white-space: nowrap;
}

/* M6.2 UI hotfix: keep hidden panels hidden and make the selector fit the viewport. */
[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

.app-shell {
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

.content {
  min-height: 0;
}

.selector-panel {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 67px);
  left: 50%;
  z-index: 50;
  width: min(760px, 100vw);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 78px);
  transform: translateX(-50%);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .22);
}

.selector-grid-wrap {
  min-height: 0;
}

.selector-grid-wrap > section {
  min-width: 0;
}

.book-grid,
.chapter-grid {
  max-height: min(42dvh, 360px);
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

.book-grid {
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
}

.chapter-grid {
  grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
}

.book-grid button,
.chapter-grid button {
  touch-action: manipulation;
  cursor: pointer;
}

.verse-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}


@media (max-width: 520px) {
  .selector-panel {
    top: calc(env(safe-area-inset-top, 0px) + 64px);
    width: 100vw;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 74px);
    border-left: 0;
    border-right: 0;
    border-radius: 0 0 16px 16px;
  }

  .book-grid,
  .chapter-grid {
    max-height: min(32dvh, 260px);
  }
}


/* M6.3 robust selector fix: prevent cached/legacy CSS from making the chooser visible at startup. */
.selector-panel[hidden],
.selector-panel.is-hidden,
[hidden] {
  display: none !important;
}

.selector-panel:not([hidden]):not(.is-hidden) {
  display: grid !important;
}

.selector-panel {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 72px);
  left: 50%;
  z-index: 80;
  width: min(720px, calc(100vw - 24px));
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 96px);
  transform: translateX(-50%);
  grid-template-columns: 1fr;
  gap: 12px;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--soft);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
}

.selector-fields,
.selector-grid-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.selector-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

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

.icon-btn {
  min-width: 42px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
}

.book-grid,
.chapter-grid {
  max-height: min(34dvh, 320px);
  overflow: auto;
  overscroll-behavior: contain;
}

.book-grid button,
.chapter-grid button {
  min-height: 42px;
}

@media (max-width: 720px) {
  .selector-panel {
    top: calc(env(safe-area-inset-top, 0px) + 66px);
    width: calc(100vw - 12px);
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 86px);
    border-radius: 14px;
    padding: 10px;
  }

  .selector-fields,
  .selector-grid-wrap {
    grid-template-columns: 1fr;
  }

  .book-grid,
  .chapter-grid {
    max-height: min(26dvh, 230px);
  }
}

/* M6.4 selector layout fix: keep the chooser inside the viewport and make only the grids scroll. */
:root {
  --topbar-estimate: 72px;
  --bottom-tabs-estimate: 70px;
}

body.selector-open {
  overflow: hidden;
}

.selector-panel[hidden],
.selector-panel.is-hidden,
[hidden] {
  display: none !important;
}

.selector-panel:not([hidden]):not(.is-hidden) {
  display: grid !important;
}

.selector-panel {
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0px) + var(--topbar-estimate)) !important;
  left: 50% !important;
  z-index: 90 !important;
  width: min(720px, calc(100vw - 24px)) !important;
  height: min(560px, calc(100dvh - var(--topbar-estimate) - var(--bottom-tabs-estimate) - 24px)) !important;
  max-height: none !important;
  transform: translateX(-50%) !important;
  display: grid;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  gap: 10px !important;
  overflow: hidden !important;
  padding: 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  background: var(--soft) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .26) !important;
}

.selector-header,
.selector-fields,
.selector-grid-wrap,
.selector-panel .primary-btn {
  min-width: 0;
}

.selector-fields {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 10px !important;
}

.selector-grid-wrap {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) !important;
  gap: 10px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.selector-grid-wrap > section {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}

.book-grid,
.chapter-grid {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  align-content: start !important;
  padding-right: 4px !important;
  scrollbar-gutter: stable;
}

.book-grid {
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)) !important;
}

.chapter-grid {
  grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)) !important;
}

.book-grid button,
.chapter-grid button {
  min-height: 38px !important;
  padding: 6px 4px !important;
  line-height: 1.2 !important;
}

.selector-panel .primary-btn {
  min-height: 44px;
}

@media (max-width: 720px) {
  :root {
    --topbar-estimate: 66px;
    --bottom-tabs-estimate: 72px;
  }

  .selector-panel {
    top: calc(env(safe-area-inset-top, 0px) + var(--topbar-estimate)) !important;
    width: calc(100vw - 12px) !important;
    height: calc(100dvh - var(--topbar-estimate) - var(--bottom-tabs-estimate) - 12px) !important;
    padding: 10px !important;
    border-radius: 14px !important;
  }

  .selector-fields {
    grid-template-columns: 1fr !important;
  }

  .selector-grid-wrap {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) minmax(0, .9fr) !important;
  }

  .book-grid {
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)) !important;
  }

  .chapter-grid {
    grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)) !important;
  }
}

@media (max-height: 700px) {
  .selector-panel {
    height: calc(100dvh - var(--topbar-estimate) - var(--bottom-tabs-estimate) - 10px) !important;
  }

  .selector-status,
  .selector-panel label span {
    font-size: 12px;
  }

  .selector-panel select {
    padding-block: 8px;
  }

  .book-grid button,
  .chapter-grid button {
    min-height: 34px !important;
    font-size: 12px !important;
  }
}

/* M6.5 selector modal redesign: desktop centered dialog, mobile bottom sheet. */
:root {
  --selector-backdrop: rgba(18, 23, 34, .38);
}

.selector-backdrop[hidden],
.selector-backdrop.is-hidden,
.selector-panel[hidden],
.selector-panel.is-hidden,
[hidden] {
  display: none !important;
}

.selector-backdrop:not([hidden]):not(.is-hidden) {
  display: block !important;
}

.selector-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 84 !important;
  background: var(--selector-backdrop) !important;
  backdrop-filter: blur(2px);
}

body.selector-open {
  overflow: hidden !important;
}

body.selector-open .bottom-tabs {
  z-index: 30;
}

.selector-panel:not([hidden]):not(.is-hidden) {
  display: grid !important;
}

.selector-panel {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  bottom: auto !important;
  z-index: 90 !important;
  width: min(700px, calc(100vw - 40px)) !important;
  height: min(610px, calc(100dvh - 72px)) !important;
  max-height: none !important;
  transform: translate(-50%, -50%) !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  gap: 12px !important;
  overflow: hidden !important;
  padding: 14px !important;
  border: 1px solid color-mix(in srgb, var(--line) 86%, #000 14%) !important;
  border-radius: 20px !important;
  background: color-mix(in srgb, var(--soft) 94%, var(--panel) 6%) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .32) !important;
}

.selector-header {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 12px !important;
}

.selector-title {
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: -.01em;
}

.selector-status {
  min-height: 18px;
  margin-top: 3px !important;
  overflow: hidden;
  color: var(--muted) !important;
  font-size: 13px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selector-fields {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 10px !important;
}

.selector-panel label {
  min-width: 0 !important;
}

.selector-panel select {
  min-height: 42px !important;
  padding: 8px 12px !important;
}

.selector-grid-wrap {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr) !important;
  gap: 12px !important;
  overflow: hidden !important;
}

.selector-grid-wrap > section {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
}

.panel-title {
  margin: 0 0 8px !important;
  padding: 0 2px !important;
  color: var(--muted) !important;
  font-weight: 900 !important;
}

.book-grid,
.chapter-grid {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  align-content: start !important;
  gap: 8px !important;
  padding: 0 5px 2px 0 !important;
  scrollbar-gutter: stable;
}

.book-grid {
  grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)) !important;
}

.chapter-grid {
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)) !important;
}

.book-grid button,
.chapter-grid button {
  min-height: 40px !important;
  padding: 7px 6px !important;
  line-height: 1.2 !important;
  touch-action: manipulation !important;
}

.selector-panel .primary-btn {
  width: 100% !important;
  min-height: 46px !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

.icon-btn {
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .selector-panel {
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: min(86dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 14px)) !important;
    transform: none !important;
    padding: 12px 12px calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
    border-width: 1px 0 0 !important;
    border-radius: 22px 22px 0 0 !important;
  }

  .selector-fields {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .selector-grid-wrap {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1.05fr) minmax(0, .95fr) !important;
    gap: 10px !important;
  }

  .book-grid {
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)) !important;
  }

  .chapter-grid {
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)) !important;
  }
}

@media (max-height: 720px) and (min-width: 641px) {
  .selector-panel {
    height: calc(100dvh - 48px) !important;
  }

  .selector-title {
    font-size: 16px !important;
  }

  .selector-panel select {
    min-height: 38px !important;
    padding-block: 7px !important;
  }

  .book-grid button,
  .chapter-grid button {
    min-height: 34px !important;
    font-size: 12px !important;
  }
}


/* M7 deployment readiness: runtime status, update, install and cache controls. */
.status-banner {
  margin: 0;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--soft) 86%, var(--danger) 14%);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.status-banner[data-status="offline"] {
  background: color-mix(in srgb, var(--soft) 78%, var(--danger) 22%);
  color: var(--danger);
}

.update-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: color-mix(in srgb, var(--soft) 82%, var(--accent) 18%);
}

.mini-btn {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.runtime-status {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
}

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

@media (max-width: 560px) {
  .settings-actions {
    grid-template-columns: 1fr;
  }
}

/* M8: data-pack / distribution mode helpers */
.data-pack-help-card {
  border: 1px solid var(--line);
  background: var(--panel);
}
.help-list {
  margin: 10px 0 10px 20px;
  padding: 0;
  line-height: 1.65;
}
.selector-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  color: var(--muted);
}

/* M9: data-pack UX, diagnostics, and app/copyright information. */
.diagnostics-card,
.about-card {
  margin-top: 14px;
}

.data-pack-status,
.about-app-panel {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
}

.status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.status-pill.ok {
  background: color-mix(in srgb, var(--soft) 72%, var(--accent) 28%);
  color: var(--ink);
}

.status-pill.warning {
  background: color-mix(in srgb, var(--soft) 72%, var(--danger) 28%);
  color: var(--danger);
}

.install-path-box {
  padding: 10px 11px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--panel);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  overflow-x: auto;
  white-space: nowrap;
}

.compact-help {
  margin-top: 4px;
  margin-bottom: 4px;
}

.quality-details {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.quality-details summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--accent);
}

.quality-details ul {
  margin: 8px 0 0 18px;
  padding: 0;
}

.diagnostics-text {
  min-height: 110px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 560px) {
  .data-pack-status,
  .about-app-panel {
    padding: 10px;
  }
}


/* M11: performance and diagnostics hardening */
.search-box {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

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

.data-health-panel {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.status-pill.warning,
.status-pill.ok {
  border-color: transparent;
}

@media (max-width: 560px) {
  .search-box {
    grid-template-columns: 1fr;
  }
  .search-box button {
    width: 100%;
  }
  .search-options {
    grid-template-columns: 1fr;
  }
}

/* Milestone 12: backup/safety controls */
.backup-actions {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.settings-actions .danger-btn,
.backup-actions .danger-btn {
  justify-self: stretch;
}

.diagnostics-text {
  white-space: pre-wrap;
}

/* M13: original-app-like reading UX, quick jump, and dark-first theme. */
[data-theme="dark"] {
  --bg: #000000;
  --panel: #080808;
  --ink: #f7f7f7;
  --muted: #b7b7b7;
  --line: #303030;
  --accent: #f1f1f1;
  --accent-ink: #050505;
  --soft: #151515;
  --danger: #ff8f7c;
  --underline: #705b12;
  --selector-backdrop: rgba(0, 0, 0, .62);
}

[data-theme="dark"] .topbar {
  background: #000;
  border-bottom: 1px solid var(--line);
}

[data-theme="dark"] .app-shell {
  box-shadow: 0 0 0 1px rgba(255,255,255,.06);
}

.quick-jump-card {
  display: grid;
  gap: 10px;
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--soft) 82%, var(--panel) 18%);
}

.quick-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.quick-title {
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
}

.quick-subtitle {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

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

.quick-jump-form input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--panel);
  color: var(--ink);
}

.quick-status {
  min-height: 20px;
}

.quick-status[data-status="ok"] { color: color-mix(in srgb, var(--accent) 78%, var(--ink) 22%); }
.quick-status[data-status="warning"] { color: var(--danger); font-weight: 800; }

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

.quick-recent-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.quick-recent-empty {
  color: var(--muted);
  font-size: 13px;
}

.quick-recent-buttons {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.quick-recent-buttons::-webkit-scrollbar { display: none; }

.quick-recent-btn {
  flex: 0 0 auto;
  min-width: 128px;
  max-width: 185px;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
  color: var(--ink);
  text-align: left;
}

.quick-recent-btn span,
.quick-recent-btn small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-recent-btn span {
  font-size: 13px;
  font-weight: 900;
}

.quick-recent-btn small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.verse-row {
  grid-template-columns: 42px minmax(0, 1fr);
  transition: background-color .12s ease, box-shadow .12s ease;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  cursor: pointer;
}

.verse-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}


.verse-row.has-underline {
  background: color-mix(in srgb, var(--underline) 18%, transparent);
}

.verse-row.has-bookmark .verse-no {
  color: var(--accent);
  font-weight: 900;
}

.verse-row.jump-highlight {
  box-shadow: inset 0 0 0 2px var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}


.verse-text.underlined {
  background: linear-gradient(transparent 58%, color-mix(in srgb, var(--underline) 84%, transparent) 58%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.settings-card #verseTapActionSelect {
  width: 100%;
}

@media (max-width: 520px) {
  .quick-title-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .quick-jump-form {
    grid-template-columns: 1fr;
  }

  .quick-jump-form button,
  .quick-title-row button {
    width: 100%;
  }

  .verse-row {
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 9px 4px;
  }
}

/* M14: remove duplicated current reference and compact the first-screen jump area. */
.chapter-title {
  display: none !important;
}

[data-theme="dark"] .topbar {
  background: #000;
  color: #f5f5f5;
  border-bottom: 1px solid #202020;
}

[data-theme="dark"] .app-title,
[data-theme="dark"] .reference-btn,
[data-theme="dark"] .nav-btn {
  color: #f5f5f5;
}

[data-theme="dark"] .reference-btn {
  background: #242424;
  border: 1px solid #333;
}

[data-theme="dark"] .nav-btn {
  background: #252525;
  border: 1px solid #333;
}

.compact-quick-jump {
  margin: 0 0 10px;
  padding: 10px 12px;
  gap: 8px;
  border-radius: 14px;
}

.compact-quick-jump .quick-title-row {
  align-items: center;
}

.compact-quick-jump .quick-title {
  font-size: 15px;
}

.compact-quick-jump .quick-subtitle {
  font-size: 11px;
}

.compact-quick-jump .small-btn {
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 13px;
}

.compact-quick-jump .quick-jump-form {
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 7px;
}

.compact-quick-jump .quick-jump-form input {
  min-height: 42px;
  border-radius: 11px;
  font-size: 15px;
}

.compact-quick-jump .quick-jump-form .primary-btn,
.compact-quick-jump #quickJumpBtn {
  min-height: 42px;
  padding: 8px 10px;
  border-radius: 11px;
}

.compact-quick-jump .quick-status {
  min-height: 0;
  font-size: 12px;
  line-height: 1.35;
}

.compact-quick-jump .quick-recent-list {
  gap: 5px;
}

.compact-quick-jump .quick-recent-label {
  font-size: 11px;
}

.compact-quick-jump .quick-recent-buttons {
  gap: 6px;
}

.compact-quick-jump .quick-recent-btn {
  min-width: 132px;
  max-width: 170px;
  min-height: 44px;
  padding: 7px 9px;
  border-radius: 11px;
}

.compact-quick-jump .quick-recent-btn span {
  font-size: 12px;
}

.compact-quick-jump .quick-recent-btn small {
  font-size: 10px;
}

.read-toolbar {
  margin-top: 8px;
}

.verse-list {
  padding-top: 4px;
}

@media (max-width: 520px) {
  .compact-quick-jump {
    padding: 9px 10px;
  }

  .compact-quick-jump .quick-title-row {
    grid-template-columns: 1fr auto;
    display: grid;
  }

  .compact-quick-jump .quick-title-row button {
    width: auto;
    white-space: nowrap;
  }

  .compact-quick-jump .quick-jump-form {
    grid-template-columns: minmax(0, 1fr) 54px;
  }

  .compact-quick-jump .quick-subtitle {
    display: none;
  }
}

/* M14.1: selector simplification and always-visible reading font controls. */
.selector-fields.selector-fields-compact {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 8px;
}

.selector-field.select-only,
.parallel-select-wrap {
  min-width: 0;
}

.parallel-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-strong);
  color: var(--ink);
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.parallel-toggle input {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
}

.parallel-select-wrap[hidden] {
  display: none !important;
}

.read-toolbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 8px;
  align-items: stretch;
}

.font-stepper {
  display: inline-grid;
  grid-template-columns: auto minmax(46px, auto) auto;
  align-items: center;
  gap: 4px;
  min-height: 40px;
}

.font-stepper .font-btn {
  min-width: 42px;
  padding: 0 10px;
  font-weight: 900;
}

.font-size-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

#fontSizeValue {
  margin-left: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.verse-gesture-hint {
  margin: -4px 2px 8px;
  font-size: 12px;
  text-align: right;
}

@media (max-width: 700px) {
  .selector-fields.selector-fields-compact {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .parallel-select-wrap {
    grid-column: 1 / -1;
  }

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

  .font-stepper {
    grid-column: 1 / -1;
    width: 100%;
    grid-template-columns: minmax(48px, 1fr) minmax(64px, auto) minmax(48px, 1fr);
  }
}

@media (max-width: 430px) {
  .parallel-toggle span {
    font-size: 12px;
  }

  .font-stepper .font-btn,
  .font-size-label {
    min-height: 38px;
  }
}

/* M14.2: compact version-compare controls. */
.selector-fields.selector-fields-compact {
  grid-template-columns: minmax(0, 1.15fr) minmax(220px, .85fr);
  align-items: stretch;
}

.version-select-field {
  align-self: end;
}

.compare-field {
  display: grid;
  grid-template-rows: auto auto;
  gap: 7px;
  min-width: 0;
}

.compare-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 24px;
  padding: 0 2px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

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

.compare-field .parallel-select-wrap {
  width: 100%;
}

.compare-field .parallel-select-wrap select {
  width: 100%;
}

@media (max-width: 700px) {
  .selector-fields.selector-fields-compact {
    grid-template-columns: 1fr;
  }

  .compare-field {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: center;
  }

  .compare-field .parallel-select-wrap {
    grid-column: 2;
  }
}

@media (max-width: 430px) {
  .compare-field {
    grid-template-columns: 1fr;
  }

  .compare-field .parallel-select-wrap {
    grid-column: 1;
  }
}


/* M14.3: dark reading contrast and underline inversion refinement */
.verse-row {
  border: 1px solid transparent;
  box-shadow: none;
}

.verse-no {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  justify-self: end;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--soft) 72%, transparent);
  color: var(--muted);
  line-height: 1;
}

.verse-row.has-underline {
  background: #f4ead4;
  color: #121212;
  border-color: rgba(244, 234, 212, .85);
  box-shadow: inset 0 0 0 1px rgba(18, 18, 18, .14);
}

.verse-row.has-underline .verse-no {
  background: rgba(18, 18, 18, .09);
  color: #121212;
}

.verse-row.has-underline .verse-body,
.verse-row.has-underline .verse-text,
.verse-row.has-underline .parallel-text,
.verse-row.has-underline .memo-mark {
  color: #121212;
}

.verse-row.has-underline .parallel-text {
  border-left-color: rgba(18, 18, 18, .24);
}


.verse-text.underlined {
  background: none;
  text-decoration: underline;
  text-decoration-thickness: .14em;
  text-decoration-color: #8b6f19;
  text-underline-offset: .17em;
}

[data-theme="dark"] .verse-row:not(.has-underline) {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

[data-theme="dark"] .verse-row:not(.has-underline):active {
  background: rgba(255, 255, 255, .06);
}

[data-theme="dark"] .verse-no {
  background: #171717;
  color: #d8d8d8;
  border: 0;
}


[data-theme="dark"] .verse-row.has-underline {
  background: #f1ead8;
  color: #111111;
  border-color: #f1ead8;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
}

[data-theme="dark"] .verse-row.has-underline .verse-no {
  background: rgba(0, 0, 0, .08);
  color: #111111;
}


/* M15.0: reading-focus layout. All reading controls move into bottom sheets. */
.content {
  padding: 10px 10px calc(env(safe-area-inset-bottom, 0px) + 74px);
}

#readView.active-view {
  min-height: calc(100dvh - 58px - 64px);
}

.focused-verse-list {
  gap: 3px;
}

.focused-verse-list .verse-row {
  padding-top: 6px;
  padding-bottom: 6px;
}

.bottom-tabs {
  grid-template-columns: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(54px, 1fr));
  gap: 3px;
  padding: 5px 5px calc(env(safe-area-inset-bottom, 0px) + 5px);
  background: color-mix(in srgb, var(--soft) 94%, #000 6%);
}

.bottom-tabs button {
  flex: initial;
  min-height: 46px;
  padding: 5px 2px;
  border-radius: 10px;
  font-size: 12px;
}

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(0, 0, 0, .48);
}

.sheet-backdrop.is-hidden,
.bottom-action-sheet.is-hidden {
  display: none !important;
}

.bottom-action-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 80;
  transform: translateX(-50%);
  width: min(760px, 100vw);
  max-height: min(76dvh, 620px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  padding: 12px 12px calc(env(safe-area-inset-bottom, 0px) + 12px);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 -18px 42px rgba(0, 0, 0, .36);
}

.sheet-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.sheet-title {
  font-size: 18px;
  font-weight: 900;
}

.sheet-subtitle {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.sheet-body {
  min-height: 0;
  overflow: auto;
  padding-top: 12px;
}

.sheet-panel {
  display: grid;
  gap: 12px;
}

.sheet-panel[hidden] {
  display: none !important;
}

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

.sheet-search-form input,
.sheet-select-label select,
.sheet-range-label input {
  width: 100%;
}

.sheet-search-form input,
.sheet-select-label select {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 12px;
  background: var(--bg);
  color: var(--ink);
}

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

.sheet-actions-grid .secondary-btn,
.sheet-actions-grid .primary-btn {
  min-height: 44px;
}

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

.font-sheet-stepper {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
}

.font-sheet-stepper .font-btn {
  min-height: 52px;
  font-size: 20px;
  font-weight: 900;
}

.sheet-range-label,
.sheet-select-label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.sheet-range-label input {
  accent-color: var(--accent);
}

.quick-recent-buttons.vertical-recent-buttons {
  display: grid;
  grid-template-columns: 1fr;
}

.bottom-action-sheet .quick-recent-list {
  display: grid;
  gap: 7px;
}

@media (max-width: 520px) {
  .content {
    padding-left: 8px;
    padding-right: 8px;
  }

  .bottom-action-sheet {
    max-height: 82dvh;
    border-radius: 20px 20px 0 0;
  }

  .bottom-tabs {
    grid-template-columns: repeat(6, minmax(45px, 1fr));
  }

  .bottom-tabs button {
    font-size: 11px;
  }

  .sheet-actions-grid,
  .compact-grid {
    grid-template-columns: 1fr;
  }
}

/* M16.0: final reading UX polish for Daily Bible. */
.topbar {
  min-height: 54px;
  padding-bottom: 6px;
}
.app-title {
  font-size: 11px;
  opacity: .62;
  line-height: 1.1;
}
.reference-btn {
  min-height: 34px;
  margin-top: 1px;
  padding: 6px 10px;
  font-size: 15px;
}
.focused-verse-list .verse-row {
  border: 1px solid transparent;
  cursor: default;
}
.focused-verse-list .verse-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.focused-verse-list .verse-row.jump-highlight {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
}
.bottom-tabs {
  box-shadow: 0 -10px 26px rgba(0, 0, 0, .22);
}
.bottom-tabs button[aria-expanded="true"] {
  background: var(--panel);
  color: var(--accent);
  box-shadow: 0 1px 5px rgba(0,0,0,.12);
}
.sheet-handle {
  width: 42px;
  height: 4px;
  margin: 0 auto 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 42%, transparent);
}
.bottom-action-sheet {
  max-height: min(72dvh, 600px);
  padding-top: 9px;
}
.sheet-header {
  padding-bottom: 8px;
}
.sheet-subtitle {
  display: none;
}
.sheet-body {
  padding-top: 10px;
}
.quick-action-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, .8fr);
}
.primary-sheet-action {
  background: color-mix(in srgb, var(--accent) 16%, var(--soft));
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  font-weight: 900;
}
.sheet-actions-grid .secondary-btn,
.sheet-actions-grid .primary-btn,
.quick-recent-btn {
  border-radius: 13px;
}
.quick-recent-label {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
[data-theme="dark"] .bottom-tabs {
  background: rgba(12, 12, 12, .98);
  border-top-color: #222;
}
[data-theme="dark"] .bottom-action-sheet {
  background: #171717;
  border-color: #303030;
}
[data-theme="dark"] .primary-sheet-action {
  background: #242424;
  color: #f1ead8;
  border-color: #555;
}
[data-theme="dark"] .sheet-search-form input,
[data-theme="dark"] .sheet-select-label select {
  background: #101010;
  border-color: #303030;
}
@media (max-width: 520px) {
  .app-title { display: none; }
  .reference-btn { margin-top: 0; }
  .quick-action-grid { grid-template-columns: 1fr; }
  .bottom-action-sheet { max-height: 78dvh; }
}

/* M16.1: compact, high-contrast reading view.
   - Plain verse numbers, no circular badge.
   - Tighter verse spacing for reading density.
   - Explicit dark-mode text colors to avoid invisible text regressions. */
.content {
  color: var(--ink);
}

.focused-verse-list,
.verse-list {
  gap: 0;
}

.verse-row,
.focused-verse-list .verse-row {
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 5px;
  padding: 3px 2px;
  border-radius: 6px;
  color: var(--ink);
}

.verse-no,
[data-theme="dark"] .verse-no,
.verse-row.has-underline .verse-no,
[data-theme="dark"] .verse-row.has-underline .verse-no {
  display: block;
  min-width: 0;
  width: 20px;
  height: auto;
  padding: .13em 2px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  text-align: right;
  line-height: 1.45;
  font-size: 12px;
  font-weight: 500;
}

.verse-body,
.focused-verse-list .verse-body {
  color: var(--ink);
  line-height: 1.5;
}

.verse-text,
.parallel-text,
.memo-mark {
  color: inherit;
}

.parallel-text {
  margin-top: 3px;
  padding-left: 7px;
  line-height: 1.42;
}

[data-theme="dark"] .content,
[data-theme="dark"] .verse-row:not(.has-underline),
[data-theme="dark"] .verse-row:not(.has-underline) .verse-body,
[data-theme="dark"] .verse-row:not(.has-underline) .verse-text {
  color: #f2f2f2;
}

[data-theme="dark"] .verse-row:not(.has-underline) .verse-no {
  color: #a8a8a8;
}

[data-theme="dark"] .bottom-action-sheet,
[data-theme="dark"] .sheet-title,
[data-theme="dark"] .sheet-body,
[data-theme="dark"] .sheet-panel,
[data-theme="dark"] .quick-recent-btn,
[data-theme="dark"] .secondary-btn {
  color: #f2f2f2;
}

[data-theme="dark"] .sheet-subtitle,
[data-theme="dark"] .sheet-range-label,
[data-theme="dark"] .sheet-select-label,
[data-theme="dark"] .quick-recent-label,
[data-theme="dark"] .quick-recent-btn small {
  color: #b8b8b8;
}

[data-theme="dark"] .sheet-search-form input::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #8f8f8f;
}

.verse-row.has-underline,
[data-theme="dark"] .verse-row.has-underline {
  background: #f1ead8;
  color: #111;
  border-color: rgba(0, 0, 0, .18);
}

.verse-row.has-underline .verse-no,
[data-theme="dark"] .verse-row.has-underline .verse-no,
.verse-row.has-underline .verse-body,
.verse-row.has-underline .verse-text,
.verse-row.has-underline .parallel-text,
.verse-row.has-underline .memo-mark {
  color: #111;
}

@media (max-width: 520px) {
  .verse-row,
  .focused-verse-list .verse-row {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 4px;
    padding: 2px 1px;
  }
  .verse-no,
  [data-theme="dark"] .verse-no {
    width: 18px;
    font-size: 11px;
    line-height: 1.42;
  }
  .verse-body,
  .focused-verse-list .verse-body {
    line-height: 1.46;
  }
}


/* M16.2: remove visible app title in the reading nav and use inverse highlight without text underline. */
.app-title {
  display: none !important;
}
.title-block {
  display: flex;
  align-items: center;
  min-width: 0;
}
.reference-btn {
  margin-top: 0 !important;
}
.topbar {
  min-height: 48px;
}
.verse-text.underlined,
[data-theme="dark"] .verse-text.underlined {
  background: none !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
}
.verse-row.has-underline .verse-text,
[data-theme="dark"] .verse-row.has-underline .verse-text {
  background: none !important;
  text-decoration: none !important;
}

/* M17.0: ultra-compact reading polish.
   Keep the reading surface plain, reduce vertical chrome, and show helper text only when needed. */
.topbar {
  min-height: 44px;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  gap: 6px;
  padding: calc(env(safe-area-inset-top, 0px) + 5px) 7px 5px;
}
.nav-btn {
  min-height: 38px;
  border-radius: 9px;
  font-size: 17px;
}
.reference-btn {
  min-height: 32px;
  padding: 4px 8px;
  border-radius: 9px;
  font-size: 14px;
  line-height: 1.1;
}
.content {
  padding: 6px 10px calc(env(safe-area-inset-bottom, 0px) + 62px);
}
#readView.active-view {
  min-height: calc(100dvh - 44px - 58px);
}
.focused-verse-list,
.verse-list {
  gap: 0;
}
.verse-row,
.focused-verse-list .verse-row {
  grid-template-columns: 21px minmax(0, 1fr);
  gap: 4px;
  padding: 1px 1px;
  border-radius: 4px;
}
.verse-no,
[data-theme="dark"] .verse-no,
.verse-row.has-underline .verse-no,
[data-theme="dark"] .verse-row.has-underline .verse-no {
  width: 17px;
  padding: .18em 1px 0 0;
  font-size: 11px;
  line-height: 1.34;
  opacity: .82;
}
.verse-body,
.focused-verse-list .verse-body {
  line-height: 1.38;
}
.parallel-text {
  margin-top: 2px;
  padding-left: 6px;
  line-height: 1.34;
}
.verse-row.has-underline,
[data-theme="dark"] .verse-row.has-underline {
  border-radius: 4px;
  border-color: rgba(0, 0, 0, .12);
  box-shadow: none;
}
.bottom-tabs {
  grid-template-columns: repeat(6, minmax(44px, 1fr));
  gap: 2px;
  padding: 4px 4px calc(env(safe-area-inset-bottom, 0px) + 4px);
}
.bottom-tabs button {
  min-height: 42px;
  padding: 4px 1px;
  border-radius: 8px;
  font-size: 11px;
}
.bottom-action-sheet {
  max-height: min(66dvh, 560px);
  padding: 8px 10px calc(env(safe-area-inset-bottom, 0px) + 10px);
  border-radius: 18px 18px 0 0;
}
.sheet-handle {
  width: 36px;
  height: 3px;
  margin-bottom: 7px;
}
.sheet-header {
  padding-bottom: 6px;
}
.sheet-title {
  font-size: 16px;
}
.sheet-body {
  padding-top: 8px;
}
.sheet-panel {
  gap: 9px;
}
.sheet-search-form input,
.sheet-select-label select {
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 10px;
}
.sheet-actions-grid {
  gap: 6px;
}
.sheet-actions-grid .secondary-btn,
.sheet-actions-grid .primary-btn,
.quick-recent-btn {
  min-height: 38px;
  border-radius: 10px;
}
.primary-btn,
.secondary-btn {
  padding: 8px 11px;
}
.quick-status[hidden],
.quick-status:empty,
.sheet-subtitle:empty {
  display: none !important;
}
.quick-status:not(:empty) {
  min-height: 0;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
  line-height: 1.3;
}
.compact-help {
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
}
.font-sheet-stepper .font-btn {
  min-height: 44px;
  font-size: 18px;
}
.font-size-label {
  min-height: 36px;
}
.sheet-range-label,
.sheet-select-label {
  gap: 5px;
  font-size: 12px;
}
[data-theme="dark"] .bottom-tabs button.active-tab,
[data-theme="dark"] .bottom-tabs button[aria-expanded="true"] {
  background: #050505;
  color: #f1ead8;
}
@media (max-width: 520px) {
  .topbar {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    padding-left: 6px;
    padding-right: 6px;
  }
  .nav-btn { min-height: 36px; }
  .reference-btn { min-height: 30px; font-size: 13px; }
  .content {
    padding-left: 7px;
    padding-right: 7px;
  }
  .verse-row,
  .focused-verse-list .verse-row {
    grid-template-columns: 19px minmax(0, 1fr);
    gap: 3px;
    padding: 1px 0;
  }
  .verse-no,
  [data-theme="dark"] .verse-no {
    width: 16px;
    font-size: 10px;
  }
  .verse-body,
  .focused-verse-list .verse-body {
    line-height: 1.35;
  }
  .bottom-action-sheet {
    max-height: 72dvh;
  }
}


/* M17.1: keep bottom tools compact and anchored to the bottom.
   The reader should never feel as if the tools are floating over the text by default. */
.sheet-backdrop {
  background: rgba(0, 0, 0, .16);
}
[data-theme="dark"] .sheet-backdrop {
  background: rgba(0, 0, 0, .22);
}
body:not(.bottom-sheet-open) #bottomSheet,
body:not(.bottom-sheet-open) #sheetBackdrop,
#bottomSheet[hidden],
#sheetBackdrop[hidden],
#bottomSheet.is-hidden,
#sheetBackdrop.is-hidden {
  display: none !important;
}
body.bottom-sheet-open .bottom-action-sheet {
  display: grid !important;
}
.bottom-action-sheet {
  width: min(760px, 100vw);
  max-height: min(42dvh, 360px) !important;
  min-height: 0;
  padding: 6px 9px calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
  border-radius: 14px 14px 0 0 !important;
}
.sheet-handle {
  width: 32px !important;
  height: 3px !important;
  margin-bottom: 5px !important;
}
.sheet-header {
  padding-bottom: 5px !important;
  min-height: 0;
}
.sheet-title {
  font-size: 14px !important;
  line-height: 1.15;
}
#closeSheetBtn {
  min-width: 32px;
  min-height: 32px;
  border-radius: 8px;
}
.sheet-body {
  padding-top: 6px !important;
  overscroll-behavior: contain;
}
.sheet-panel {
  gap: 7px !important;
}
.sheet-search-form {
  gap: 6px !important;
}
.sheet-search-form input,
.sheet-select-label select {
  min-height: 36px !important;
  padding: 7px 9px !important;
  border-radius: 9px !important;
  font-size: 14px;
}
.sheet-search-form .primary-btn,
.sheet-actions-grid .secondary-btn,
.sheet-actions-grid .primary-btn,
.quick-recent-btn {
  min-height: 34px !important;
  padding: 6px 9px !important;
  border-radius: 9px !important;
  font-size: 13px;
}
.quick-action-grid,
.sheet-actions-grid,
.compact-grid {
  gap: 4px !important;
}
.bottom-action-sheet .quick-recent-list {
  gap: 5px !important;
  max-height: 118px;
  overflow: auto;
}
#recordsSheetPanel .quick-recent-list {
  max-height: 128px;
  overflow: auto;
}
.subsection-title {
  margin: 2px 0 0 !important;
  font-size: 12px !important;
  line-height: 1.2;
}
.font-sheet-stepper {
  gap: 6px !important;
}
.font-sheet-stepper .font-btn {
  min-height: 36px !important;
  font-size: 16px !important;
}
.font-size-label {
  min-height: 30px !important;
  font-size: 13px;
}
.sheet-range-label,
.sheet-select-label {
  gap: 4px !important;
  font-size: 11px !important;
}
.compact-help {
  display: none !important;
}
@media (max-width: 520px) {
  .sheet-backdrop {
    background: rgba(0, 0, 0, .10);
  }
  [data-theme="dark"] .sheet-backdrop {
    background: rgba(0, 0, 0, .16);
  }
  .bottom-action-sheet {
    max-height: min(45dvh, 380px) !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    border-radius: 13px 13px 0 0 !important;
  }
  .quick-action-grid,
  .sheet-actions-grid,
  .compact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #quickOpenSelectorBtn {
    grid-column: span 2;
  }
  .bottom-action-sheet .quick-recent-list,
  #recordsSheetPanel .quick-recent-list {
    max-height: 112px;
  }
}
@media (max-height: 720px) {
  .bottom-action-sheet {
    max-height: min(46dvh, 320px) !important;
  }
  .bottom-action-sheet .quick-recent-list,
  #recordsSheetPanel .quick-recent-list {
    max-height: 86px;
  }
}

/* M17.2: denser bottom tools. Keep reading primary; tools should be brief controls, not panels. */
.bottom-action-sheet {
  max-height: min(32dvh, 260px) !important;
  padding: 4px 8px calc(env(safe-area-inset-bottom, 0px) + 6px) !important;
  border-radius: 11px 11px 0 0 !important;
}
.sheet-handle {
  width: 28px !important;
  height: 2px !important;
  margin-bottom: 3px !important;
  opacity: .55;
}
.sheet-header {
  position: absolute;
  top: 3px;
  right: 5px;
  padding: 0 !important;
  border: 0 !important;
  z-index: 2;
  display: block;
}
.sheet-header > div { display: none !important; }
#closeSheetBtn {
  min-width: 26px !important;
  min-height: 26px !important;
  width: 26px;
  height: 26px;
  padding: 0 !important;
  border-radius: 7px !important;
  font-size: 16px;
  line-height: 1;
  opacity: .82;
}
.sheet-body {
  padding-top: 3px !important;
}
.sheet-panel {
  gap: 5px !important;
}
.sheet-search-form {
  grid-template-columns: minmax(0, 1fr) 52px !important;
  gap: 5px !important;
  padding-right: 0 !important;
}
.sheet-search-form input,
.sheet-select-label select {
  min-height: 32px !important;
  height: 32px;
  padding: 5px 8px !important;
  border-radius: 8px !important;
  font-size: 13px;
}
.sheet-search-form .primary-btn,
.sheet-actions-grid .secondary-btn,
.sheet-actions-grid .primary-btn,
.quick-recent-btn {
  min-height: 30px !important;
  padding: 4px 7px !important;
  border-radius: 8px !important;
  font-size: 12px;
}
.quick-action-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
#quickOpenSelectorBtn { grid-column: auto !important; }
.bottom-action-sheet .quick-recent-list {
  max-height: 46px !important;
  overflow: hidden;
}
.bottom-action-sheet .quick-recent-empty,
.bottom-action-sheet .quick-recent-label {
  display: none !important;
}
.bottom-action-sheet .quick-recent-buttons {
  gap: 4px !important;
  padding-bottom: 0;
}
.bottom-action-sheet .quick-recent-btn {
  min-width: 96px !important;
  max-width: 126px !important;
  min-height: 34px !important;
  line-height: 1.1;
}
.bottom-action-sheet .quick-recent-btn span {
  font-size: 12px !important;
  line-height: 1.1;
}
.bottom-action-sheet .quick-recent-btn small {
  font-size: 9px !important;
  line-height: 1.1;
  margin-top: 1px;
}
.quick-status:not(:empty) {
  padding: 4px 6px !important;
  font-size: 11px;
  line-height: 1.2;
}
#recordsSheetPanel .quick-recent-list {
  max-height: 78px !important;
}
#recordsSheetPanel .quick-recent-buttons.vertical-recent-buttons {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}
#fontSheetPanel {
  grid-template-columns: minmax(110px, .65fr) minmax(0, 1fr);
  align-items: center;
  gap: 5px 7px !important;
}
#fontSheetPanel .font-sheet-stepper {
  grid-column: 1;
  grid-row: 1 / span 2;
  gap: 4px !important;
}
#fontSheetPanel .font-sheet-stepper .font-btn {
  min-height: 32px !important;
  font-size: 14px !important;
  padding: 3px 5px !important;
}
#fontSheetPanel .font-size-label {
  min-height: 28px !important;
  min-width: 44px;
  font-size: 12px;
  padding: 4px 5px;
}
#fontSheetPanel .sheet-range-label,
#fontSheetPanel .sheet-select-label {
  gap: 0 !important;
  margin: 0;
}
#fontSheetPanel .sheet-range-label input {
  height: 24px;
}
#fontSheetPanel .sheet-select-label select {
  min-height: 30px !important;
  height: 30px;
}
body[data-active-sheet="font"] .bottom-action-sheet,
body[data-active-sheet="more"] .bottom-action-sheet {
  max-height: min(24dvh, 190px) !important;
}
body[data-active-sheet="quick"] .bottom-action-sheet,
body[data-active-sheet="records"] .bottom-action-sheet {
  max-height: min(30dvh, 240px) !important;
}
@media (max-width: 520px) {
  .bottom-action-sheet {
    max-height: min(34dvh, 270px) !important;
  }
  body[data-active-sheet="font"] .bottom-action-sheet,
  body[data-active-sheet="more"] .bottom-action-sheet {
    max-height: min(25dvh, 200px) !important;
  }
  body[data-active-sheet="quick"] .bottom-action-sheet,
  body[data-active-sheet="records"] .bottom-action-sheet {
    max-height: min(32dvh, 250px) !important;
  }
  .sheet-search-form {
    grid-template-columns: minmax(0, 1fr) 48px !important;
  }
  #recordsSheetPanel .quick-recent-buttons.vertical-recent-buttons {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-height: 720px) {
  .bottom-action-sheet,
  body[data-active-sheet="quick"] .bottom-action-sheet,
  body[data-active-sheet="records"] .bottom-action-sheet {
    max-height: min(34dvh, 220px) !important;
  }
}

/* M17.3: UI polish pass.
   Goal: straight alignment, consistent control rhythm, and less visual bulk in bottom tools. */
:root {
  --sheet-control-h: 30px;
  --sheet-radius: 7px;
  --sheet-gap: 4px;
}

/* Keep the reading chrome visually straight and symmetric. */
.topbar {
  grid-template-columns: 46px minmax(0, 1fr) 46px !important;
  gap: 6px !important;
  align-items: center !important;
  padding-left: 7px !important;
  padding-right: 7px !important;
}
.nav-btn,
.reference-btn {
  align-self: center !important;
  box-sizing: border-box !important;
}
.nav-btn {
  min-height: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
}
.reference-btn {
  min-height: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 8px !important;
}

/* Bottom tabs: even columns, equal height, less oversized selected shape. */
.bottom-tabs {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 1px !important;
  padding: 3px 4px calc(env(safe-area-inset-bottom, 0px) + 3px) !important;
}
.bottom-tabs button {
  min-width: 0 !important;
  min-height: 39px !important;
  height: 39px !important;
  padding: 2px 1px !important;
  border-radius: 7px !important;
  line-height: 1 !important;
  letter-spacing: -.01em;
}

/* Bottom sheet frame: lower, flatter, and consistently aligned. */
.bottom-action-sheet {
  width: min(760px, 100vw) !important;
  max-height: min(28dvh, 214px) !important;
  padding: 3px 7px calc(env(safe-area-inset-bottom, 0px) + 5px) !important;
  border-radius: 9px 9px 0 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .22) !important;
  overflow: hidden !important;
}
.sheet-handle {
  width: 24px !important;
  height: 2px !important;
  margin: 0 auto 3px !important;
  opacity: .45 !important;
}
.sheet-header {
  top: 3px !important;
  right: 5px !important;
}
#closeSheetBtn {
  min-width: 24px !important;
  width: 24px !important;
  min-height: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  background: transparent !important;
  border-color: transparent !important;
}
.sheet-body {
  padding-top: 2px !important;
  overflow: hidden auto !important;
}
.sheet-panel {
  gap: var(--sheet-gap) !important;
  align-items: stretch !important;
}

/* One control system for all bottom-sheet inputs/buttons. */
.bottom-action-sheet input[type="search"],
.bottom-action-sheet input[type="range"],
.bottom-action-sheet select,
.bottom-action-sheet button,
.bottom-action-sheet .font-size-label,
.bottom-action-sheet .quick-recent-btn {
  box-sizing: border-box !important;
}
.sheet-search-form {
  grid-template-columns: minmax(0, 1fr) 48px !important;
  gap: var(--sheet-gap) !important;
  padding-right: 26px !important;
  align-items: center !important;
}
.sheet-search-form input,
.sheet-select-label select {
  min-height: var(--sheet-control-h) !important;
  height: var(--sheet-control-h) !important;
  padding: 4px 7px !important;
  border-radius: var(--sheet-radius) !important;
  border-width: 1px !important;
  line-height: 1 !important;
  font-size: 12px !important;
}
.sheet-search-form .primary-btn,
.sheet-actions-grid .secondary-btn,
.sheet-actions-grid .primary-btn {
  min-height: var(--sheet-control-h) !important;
  height: var(--sheet-control-h) !important;
  padding: 3px 6px !important;
  border-radius: var(--sheet-radius) !important;
  line-height: 1 !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

.quick-action-grid,
.sheet-actions-grid,
.compact-grid {
  gap: var(--sheet-gap) !important;
}
.quick-action-grid.two-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.quick-action-grid.two-actions button {
  width: 100% !important;
}

/* Recent locations are small chips, not big cards. */
.bottom-action-sheet .quick-recent-list {
  max-height: 32px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.bottom-action-sheet .quick-recent-buttons {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: var(--sheet-gap) !important;
  overflow-x: auto !important;
  padding: 0 !important;
  scrollbar-width: none;
}
.bottom-action-sheet .quick-recent-buttons::-webkit-scrollbar { display: none; }
.bottom-action-sheet .quick-recent-btn {
  flex: 0 0 auto !important;
  min-width: 72px !important;
  max-width: 128px !important;
  min-height: 28px !important;
  height: 28px !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  text-align: center !important;
}
.bottom-action-sheet .quick-recent-btn span {
  font-size: 11px !important;
  line-height: 1 !important;
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
body[data-active-sheet="quick"] .bottom-action-sheet .quick-recent-btn small {
  display: none !important;
}
body[data-active-sheet="records"] .bottom-action-sheet {
  max-height: min(29dvh, 226px) !important;
}
#recordsSheetPanel .compact-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
#recordsSheetPanel .quick-recent-list {
  max-height: 64px !important;
}
#recordsSheetPanel .quick-recent-buttons.vertical-recent-buttons {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--sheet-gap) !important;
}
#recordsSheetPanel .quick-recent-btn {
  width: 100% !important;
  max-width: none !important;
  border-radius: var(--sheet-radius) !important;
}
#recordsSheetPanel .quick-recent-btn small {
  display: none !important;
}

/* Font sheet: a single aligned row plus one compact select. */
body[data-active-sheet="font"] .bottom-action-sheet,
body[data-active-sheet="more"] .bottom-action-sheet {
  max-height: min(19dvh, 148px) !important;
}
#fontSheetPanel.font-panel-compact {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--sheet-gap) !important;
  padding-right: 0 !important;
}
.font-control-row {
  display: grid !important;
  grid-template-columns: 34px minmax(80px, 1fr) 34px 44px !important;
  gap: var(--sheet-gap) !important;
  align-items: center !important;
}
.font-control-row .font-btn {
  min-height: var(--sheet-control-h) !important;
  height: var(--sheet-control-h) !important;
  padding: 2px 4px !important;
  border-radius: var(--sheet-radius) !important;
  font-size: 13px !important;
  line-height: 1 !important;
}
.font-control-row input[type="range"] {
  width: 100% !important;
  height: 26px !important;
  margin: 0 !important;
}
.font-control-row .font-size-label {
  min-height: var(--sheet-control-h) !important;
  height: var(--sheet-control-h) !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
  border-radius: var(--sheet-radius) !important;
  font-size: 11px !important;
  line-height: 1 !important;
}
.font-action-select {
  margin: 0 !important;
  padding: 0 !important;
}
.font-action-select select {
  width: 100% !important;
}

/* More sheet: compact equal buttons. */
#moreSheetPanel .compact-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
#moreSheetPanel .secondary-btn {
  width: 100% !important;
}

/* Reading rows: slightly cleaner alignment and less visual noise. */
.content {
  padding-top: 5px !important;
}
.verse-row,
.focused-verse-list .verse-row {
  grid-template-columns: 20px minmax(0, 1fr) !important;
  gap: 4px !important;
  padding: 1px 0 !important;
}
.verse-no,
[data-theme="dark"] .verse-no {
  width: 16px !important;
  padding-right: 1px !important;
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}
.verse-row.has-underline,
[data-theme="dark"] .verse-row.has-underline {
  border-radius: 4px !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
}

@media (max-width: 520px) {
  :root { --sheet-control-h: 30px; }
  .topbar {
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    gap: 5px !important;
  }
  .nav-btn { height: 34px !important; min-height: 34px !important; }
  .reference-btn { height: 30px !important; min-height: 30px !important; font-size: 12px !important; }
  .bottom-tabs button { min-height: 38px !important; height: 38px !important; font-size: 10.5px !important; }
  .bottom-action-sheet {
    max-height: min(30dvh, 220px) !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  body[data-active-sheet="font"] .bottom-action-sheet,
  body[data-active-sheet="more"] .bottom-action-sheet {
    max-height: min(20dvh, 156px) !important;
  }
  .sheet-search-form { grid-template-columns: minmax(0, 1fr) 44px !important; }
  #recordsSheetPanel .compact-grid,
  #moreSheetPanel .compact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .font-control-row {
    grid-template-columns: 32px minmax(70px, 1fr) 32px 40px !important;
  }
}



/* M18.0: Modern Quiet Reader redesign.
   Content-first dark reader, four-tab bottom nav, lower mini sheets, and pill controls. */
:root {
  --reader-bg: #050505;
  --reader-panel: #0a0a0a;
  --reader-elevated: rgba(20, 20, 20, .96);
  --reader-ink: #eee9dd;
  --reader-muted: #8f8b82;
  --reader-faint: rgba(255,255,255,.075);
  --reader-faint-2: rgba(255,255,255,.12);
  --reader-pill: rgba(255,255,255,.07);
  --reader-pill-active: #eee6d2;
  --reader-pill-active-ink: #14110a;
  --reader-accent: #d7bd83;
  --font-size: 19px;
}

[data-theme="dark"] {
  --bg: var(--reader-bg);
  --panel: var(--reader-bg);
  --ink: var(--reader-ink);
  --muted: var(--reader-muted);
  --line: var(--reader-faint);
  --accent: var(--reader-accent);
  --accent-ink: #111;
  --soft: rgba(255,255,255,.055);
  --underline: #efe6cf;
}

body {
  background: #000 !important;
  color: var(--reader-ink) !important;
}

.app-shell {
  background: var(--reader-bg) !important;
  box-shadow: none !important;
  grid-template-rows: auto auto 1fr auto !important;
}

/* Floating capsule header */
.topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 35 !important;
  grid-template-columns: 34px minmax(0, 1fr) 34px !important;
  gap: 5px !important;
  min-height: 48px !important;
  padding: calc(env(safe-area-inset-top, 0px) + 7px) 10px 5px !important;
  background: linear-gradient(to bottom, rgba(0,0,0,.96), rgba(0,0,0,.82)) !important;
  color: var(--reader-ink) !important;
  border-bottom: 0 !important;
}

.nav-btn {
  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.055) !important;
  color: var(--reader-muted) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  padding: 0 !important;
}

.nav-btn:hover,
.nav-btn:focus-visible {
  background: rgba(255,255,255,.1) !important;
  color: var(--reader-ink) !important;
}

.reference-btn {
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid var(--reader-faint) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.055) !important;
  color: var(--reader-ink) !important;
  font-size: 14px !important;
  font-weight: 680 !important;
  letter-spacing: -.01em !important;
  box-shadow: 0 8px 26px rgba(0,0,0,.16) !important;
}

.content {
  padding: 7px 12px calc(env(safe-area-inset-bottom, 0px) + 74px) !important;
  background: var(--reader-bg) !important;
}

.view { color: var(--reader-ink) !important; }

/* Bible text: no boxes unless selected */
.verse-list,
.focused-verse-list {
  display: grid !important;
  gap: 0 !important;
}

.verse-row,
.focused-verse-list .verse-row {
  grid-template-columns: 22px minmax(0, 1fr) !important;
  gap: 7px !important;
  align-items: baseline !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 3px 5px 3px 1px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.verse-row:active {
  background: rgba(255,255,255,.035) !important;
}

.verse-no {
  color: #77736d !important;
  text-align: right !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  padding-top: .18em !important;
  font-variant-numeric: tabular-nums !important;
}

.verse-body {
  color: var(--reader-ink) !important;
  font-size: var(--font-size) !important;
  line-height: 1.52 !important;
  letter-spacing: -.01em !important;
  word-break: keep-all !important;
}

.verse-text.underlined {
  background: transparent !important;
  text-decoration: none !important;
  border-radius: 0 !important;
}

.verse-row.has-underline,
[data-theme="dark"] .verse-row.has-underline {
  background: var(--reader-pill-active) !important;
  color: var(--reader-pill-active-ink) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.verse-row.has-underline .verse-body,
.verse-row.has-underline .verse-text,
[data-theme="dark"] .verse-row.has-underline .verse-body,
[data-theme="dark"] .verse-row.has-underline .verse-text {
  color: var(--reader-pill-active-ink) !important;
  background: transparent !important;
}

.verse-row.has-underline .verse-no,
[data-theme="dark"] .verse-row.has-underline .verse-no {
  color: rgba(20,17,10,.62) !important;
  background: transparent !important;
}

.parallel-text {
  margin-top: 3px !important;
  padding-left: 7px !important;
  border-left: 1px solid rgba(255,255,255,.12) !important;
  color: #aaa49a !important;
  font-size: calc(var(--font-size) - 3px) !important;
  line-height: 1.45 !important;
}

/* Modern four-tab floating bottom nav */
.bottom-tabs {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 40 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0 !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 6px 10px calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
  background: linear-gradient(to top, rgba(0,0,0,.98), rgba(0,0,0,.82)) !important;
  border-top: 1px solid rgba(255,255,255,.055) !important;
}

.bottom-tabs button {
  position: relative !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #8a867d !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
}

.bottom-tabs button.active-tab {
  background: rgba(255,255,255,.08) !important;
  color: var(--reader-ink) !important;
}

.bottom-tabs button.active-tab::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 14px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--reader-accent);
}

/* Mini sheets, not panels */
.sheet-backdrop {
  background: rgba(0,0,0,.16) !important;
}

.bottom-action-sheet {
  width: min(736px, calc(100vw - 16px)) !important;
  left: 50% !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 58px) !important;
  max-height: min(34dvh, 250px) !important;
  padding: 7px 9px 9px !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 18px !important;
  background: var(--reader-elevated) !important;
  color: var(--reader-ink) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.42) !important;
  backdrop-filter: blur(18px) saturate(1.05) !important;
}

.sheet-handle {
  width: 34px !important;
  height: 3px !important;
  margin: 1px auto 6px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.18) !important;
}

.sheet-header {
  min-height: 22px !important;
  padding: 0 1px 5px !important;
  border-bottom: 0 !important;
  grid-template-columns: auto 28px !important;
  gap: 6px !important;
}

.sheet-title {
  color: #d8d2c5 !important;
  font-size: 12px !important;
  font-weight: 780 !important;
  letter-spacing: -.01em !important;
}

.sheet-header .icon-btn,
#closeSheetBtn {
  width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.07) !important;
  color: #bcb6aa !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

.sheet-body {
  padding-top: 0 !important;
  overflow: auto !important;
}

.sheet-panel {
  gap: 7px !important;
}

.sheet-search-form {
  grid-template-columns: minmax(0, 1fr) 58px !important;
  gap: 6px !important;
}

.sheet-search-form input,
.sheet-select-label select,
.compact-select-wrap select {
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.065) !important;
  color: var(--reader-ink) !important;
  outline: none !important;
}

.sheet-search-form input::placeholder,
.search-box input::placeholder {
  color: rgba(238,233,221,.38) !important;
}

.primary-btn,
.secondary-btn,
.pill-btn,
.sheet-icon-btn {
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.07) !important;
  color: var(--reader-ink) !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.primary-btn {
  background: var(--reader-pill-active) !important;
  color: var(--reader-pill-active-ink) !important;
  border-color: transparent !important;
}

.sheet-actions-grid,
.compact-grid,
.quick-action-grid,
.two-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.sheet-actions-grid .secondary-btn,
.sheet-actions-grid .primary-btn {
  flex: 1 1 92px !important;
  min-width: 0 !important;
}

.quick-recent-list {
  display: grid !important;
  gap: 4px !important;
  min-height: 0 !important;
}

.quick-recent-label {
  display: none !important;
}

.quick-recent-buttons {
  display: flex !important;
  gap: 5px !important;
  overflow-x: auto !important;
  padding: 0 0 1px !important;
}

.quick-recent-btn {
  min-width: 76px !important;
  max-width: 116px !important;
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 9px !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.05) !important;
  color: var(--reader-ink) !important;
}

.quick-recent-btn span {
  font-size: 12px !important;
  font-weight: 700 !important;
}

.quick-recent-btn small {
  display: none !important;
}

.view-size-row {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) 38px 48px !important;
  gap: 6px !important;
  align-items: center !important;
}

.sheet-icon-btn {
  width: 38px !important;
  padding: 0 !important;
}

.view-size-row input[type="range"],
.font-control-row input[type="range"] {
  width: 100% !important;
  height: 26px !important;
  margin: 0 !important;
  accent-color: var(--reader-accent) !important;
}

.font-size-label {
  min-height: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ccc6ba !important;
  font-size: 12px !important;
  font-weight: 740 !important;
}

.view-settings-row {
  display: grid;
  grid-template-columns: minmax(118px, 160px) minmax(0, 1fr);
  gap: 6px;
  align-items: center;
}

.compact-select-wrap {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px !important;
  align-items: center !important;
  color: var(--reader-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.view-action-pills {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}

.view-action-pills::-webkit-scrollbar {
  display: none;
}

.pill-btn {
  flex: 0 0 auto;
  min-width: 64px !important;
}

/* Search and records: cleaner, less card-like */
.search-box {
  gap: 6px !important;
  margin-bottom: 8px !important;
}

.search-box input,
.record-tools input,
.record-tools select,
.search-options select,
.settings-card select,
.settings-card input,
textarea {
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.055) !important;
  color: var(--reader-ink) !important;
}

.search-options {
  gap: 6px !important;
}

.search-options label span {
  display: none !important;
}

.hint,
.empty-state {
  color: var(--reader-muted) !important;
  font-size: 12px !important;
  line-height: 1.42 !important;
}

.section-title,
.subsection-title {
  color: var(--reader-ink) !important;
  font-size: 15px !important;
  margin: 0 0 8px !important;
  font-weight: 780 !important;
}

.result-card,
.settings-card {
  border: 0 !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.045) !important;
  box-shadow: none !important;
}

.result-card {
  padding: 10px 0 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  background: transparent !important;
}

.result-ref {
  color: var(--reader-accent) !important;
}

/* Chapter selector modal: modern but still functional */
.selector-backdrop {
  background: rgba(0,0,0,.32) !important;
}

.selector-panel {
  background: #111 !important;
  color: var(--reader-ink) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 54px rgba(0,0,0,.52) !important;
}

.selector-header {
  border-bottom-color: rgba(255,255,255,.07) !important;
}

.selector-title {
  font-size: 15px !important;
}

.selector-status,
.selector-panel label {
  color: var(--reader-muted) !important;
}

.selector-panel select,
.book-grid button,
.chapter-grid button {
  border-color: rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.055) !important;
  color: var(--reader-ink) !important;
}

.book-grid button.active,
.chapter-grid button.active {
  background: var(--reader-pill-active) !important;
  color: var(--reader-pill-active-ink) !important;
}

@media (max-width: 520px) {
  .topbar {
    grid-template-columns: 32px minmax(0, 1fr) 32px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .nav-btn {
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
  }
  .reference-btn {
    height: 32px !important;
    min-height: 32px !important;
    font-size: 13px !important;
  }
  .content {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }
  .verse-row,
  .focused-verse-list .verse-row {
    grid-template-columns: 20px minmax(0, 1fr) !important;
    gap: 6px !important;
    padding-right: 2px !important;
  }
  .verse-body {
    line-height: 1.5 !important;
  }
  .bottom-tabs {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .bottom-tabs button {
    font-size: 11px !important;
  }
  .bottom-action-sheet {
    width: calc(100vw - 14px) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 56px) !important;
    max-height: min(36dvh, 238px) !important;
  }
  .view-settings-row {
    grid-template-columns: 1fr !important;
  }
}


/* M18.1 mobile polish: stable four-tab nav, selector quick jump, denser book grid, swipe-friendly reader. */
.bottom-tabs {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: center !important;
  justify-items: stretch !important;
  overflow: hidden !important;
  padding-top: 4px !important;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 6px) !important;
}
.bottom-tabs button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  line-height: 1 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}
.bottom-tabs button.active-tab::after {
  bottom: 3px !important;
}

.selector-jump-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 58px !important;
  gap: 7px !important;
  margin: 0 0 8px !important;
}
.selector-jump-form input {
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.06) !important;
  color: var(--reader-ink) !important;
  font-size: 13px !important;
  outline: none !important;
}
.selector-jump-form input::placeholder {
  color: rgba(238,233,221,.42) !important;
}
.selector-jump-form .primary-btn {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 10px !important;
}
.selector-jump-status {
  margin: -3px 2px 7px !important;
  min-height: 0 !important;
}

.book-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 5px !important;
}
.book-grid button {
  min-width: 0 !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 3px !important;
  font-size: 11.5px !important;
  letter-spacing: -.04em !important;
  line-height: 1 !important;
}
.chapter-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 5px !important;
}
.chapter-grid button {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  font-size: 12px !important;
}

#readView {
  touch-action: pan-y !important;
}

@media (max-width: 430px) {
  .bottom-tabs {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .bottom-tabs button {
    font-size: 10.5px !important;
    letter-spacing: -.04em !important;
  }
  .selector-panel {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .selector-fields.selector-fields-compact {
    gap: 6px !important;
  }
  .book-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  .book-grid button {
    font-size: 11px !important;
  }
  .chapter-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }
}


/* M18.2 mobile critical fix: keep the five bottom tabs inside the visible viewport.
   Android Chrome can render the sticky grid inside the 760px app shell and clip the
   left tabs, especially when font/zoom settings are large. The nav is fixed to the
   visual viewport on small screens and the reader content gets matching bottom
   padding so no verse is hidden behind it. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.content {
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
}

.bottom-tabs {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  transform: translateX(-50%) !important;
  width: min(760px, 100vw) !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  z-index: 120 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 5px max(6px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px)) !important;
  min-height: calc(54px + env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: linear-gradient(to top, rgba(0,0,0,.99), rgba(0,0,0,.88)) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

.bottom-tabs button {
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-size: clamp(10px, 2.85vw, 12px) !important;
  letter-spacing: -.035em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-align: center !important;
  flex: 1 1 0 !important;
  border-radius: 999px !important;
}

.bottom-tabs button.active-tab::after {
  bottom: 4px !important;
}

/* Fixed bottom tab requires sheets to rise from the viewport, not from the app grid. */
.bottom-action-sheet {
  position: fixed !important;
  left: 50% !important;
  bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
  transform: translateX(-50%) !important;
  width: min(736px, calc(100vw - 14px)) !important;
  max-width: calc(100vw - 14px) !important;
  z-index: 115 !important;
}

.sheet-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 110 !important;
}

@media (max-width: 600px) {
  .app-shell {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
  }

  .content {
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .bottom-tabs {
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding-left: max(4px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(4px, env(safe-area-inset-right, 0px)) !important;
    padding-top: 5px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .bottom-tabs button {
    height: 40px !important;
    min-height: 40px !important;
    font-size: clamp(10px, 2.65vw, 11.5px) !important;
  }

  .bottom-tabs button.active-tab {
    background: rgba(255,255,255,.105) !important;
  }

  .bottom-action-sheet {
    bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
  }
}


/* M18.3: mobile UX fixes from device screenshots.
   - Search highlight must keep dark text on the light highlight.
   - Hidden sheet panels must stay hidden even when older #fontSheetPanel rules use display:grid!important.
   - Only the 설정 sheet shows font controls.
   - Selector compare controls should never overlap the book/chapter grids. */
.searchable-card mark,
.result-text mark,
.result-card mark,
mark {
  background: #efe6cf !important;
  color: #15120c !important;
  -webkit-text-fill-color: #15120c !important;
  border-radius: 5px !important;
  padding: 0 .14em !important;
  box-decoration-break: clone !important;
  -webkit-box-decoration-break: clone !important;
}

.sheet-panel[hidden],
#quickSheetPanel[hidden],
#recordsSheetPanel[hidden],
#fontSheetPanel[hidden],
#fontSheetPanel.font-panel-compact[hidden],
#moreSheetPanel[hidden] {
  display: none !important;
}

body:not([data-active-sheet="font"]) #fontSheetPanel,
body[data-active-sheet="quick"] #fontSheetPanel,
body[data-active-sheet="records"] #fontSheetPanel {
  display: none !important;
}

/* Keep quick/records sheets compact and free of view controls. */
body[data-active-sheet="quick"] .view-size-row,
body[data-active-sheet="quick"] .view-settings-row,
body[data-active-sheet="records"] .view-size-row,
body[data-active-sheet="records"] .view-settings-row {
  display: none !important;
}

/* 설정 sheet is the only place where font size controls live. */
body[data-active-sheet="font"] #fontSheetPanel.font-panel-compact {
  display: grid !important;
}

/* Remove stale / unused more sheet from layout behavior. */
#moreSheetPanel {
  display: none !important;
}

/* Selector layout: clean vertical stack on mobile to prevent 역본대조 overlap. */
.selector-panel {
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
}
.selector-fields.selector-fields-compact {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 7px !important;
  align-items: stretch !important;
  min-height: 0 !important;
}
.compare-field {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
}
.compare-toggle {
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.055) !important;
  color: var(--reader-ink) !important;
  line-height: 1 !important;
}
.compare-toggle input {
  flex: 0 0 auto !important;
}
.compare-field .parallel-select-wrap {
  grid-column: auto !important;
  min-width: 0 !important;
  width: 100% !important;
}
.compare-field .parallel-select-wrap[hidden] {
  display: none !important;
}
.compare-field .parallel-select-wrap select {
  height: 32px !important;
  min-height: 32px !important;
  border-radius: 999px !important;
}
.selector-grid-wrap {
  margin-top: 2px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

@media (min-width: 640px) {
  .selector-fields.selector-fields-compact {
    grid-template-columns: minmax(0, 1fr) minmax(240px, .75fr) !important;
  }
}

@media (max-width: 520px) {
  .selector-panel {
    width: 100vw !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 14px) !important;
    padding: 10px !important;
    gap: 7px !important;
  }
  .selector-header {
    padding-bottom: 5px !important;
  }
  .selector-title {
    font-size: 13px !important;
  }
  .selector-status,
  .selector-jump-status {
    font-size: 11px !important;
  }
  .selector-grid-wrap {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) !important;
    gap: 6px !important;
  }
  .book-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }
  .book-grid button {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 2px !important;
    font-size: 10.5px !important;
  }
  .chapter-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }
  .chapter-grid button {
    height: 28px !important;
    min-height: 28px !important;
    font-size: 11px !important;
  }
}

/* M18.4: compact selector and multi-version compare picker */
.selector-version-row {
  display: grid !important;
  grid-template-columns: minmax(0, 2fr) minmax(104px, 1fr) !important;
  align-items: stretch !important;
  gap: 8px !important;
}
.selector-version-row .version-select-field,
.selector-version-row .compare-picker-btn {
  min-height: 42px !important;
}
.compare-picker-btn {
  border-radius: 999px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}
.parallel-summary {
  margin: -2px 2px 0 !important;
  font-size: 11px !important;
  color: var(--reader-muted, #999) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.parallel-picker-panel {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 82px);
  transform: translateX(-50%);
  z-index: 75;
  width: min(620px, calc(100vw - 24px));
  max-height: min(62dvh, 520px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px;
  background: rgba(18,18,18,.97);
  color: var(--reader-ink, #ece8df);
  box-shadow: 0 22px 70px rgba(0,0,0,.58);
  backdrop-filter: blur(16px);
}
.parallel-picker-panel[hidden],
.parallel-picker-panel.is-hidden {
  display: none !important;
}
.parallel-picker-header,
.parallel-picker-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.parallel-picker-header strong {
  font-size: 15px;
}
.compact-close-btn {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  font-size: 22px !important;
}
.parallel-picker-hint {
  color: var(--reader-muted, #aaa);
  font-size: 12px;
}
.parallel-version-list {
  display: grid;
  gap: 10px;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}
.parallel-version-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.parallel-group-title {
  grid-column: 1 / -1;
  color: var(--reader-muted, #aaa);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}
.parallel-version-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 11px;
  border-radius: 13px;
  background: rgba(255,255,255,.055);
  color: var(--reader-ink, #ece8df);
  font-size: 13px;
  font-weight: 800;
}
.parallel-version-item span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.parallel-version-item input {
  width: 17px;
  height: 17px;
  accent-color: var(--reader-accent, #d8c08a);
}
.parallel-picker-actions {
  justify-content: flex-end;
}
.parallel-picker-actions button {
  min-height: 38px !important;
  padding-inline: 18px !important;
}
.book-grid button,
.chapter-grid button {
  white-space: nowrap !important;
  line-height: 1 !important;
}
.parallel-text {
  margin-top: 4px !important;
  color: var(--reader-muted, #aaa) !important;
  font-size: .92em !important;
  line-height: 1.45 !important;
}
.parallel-label {
  display: inline-block;
  margin-right: .55em;
  color: var(--reader-accent, #d8c08a);
  font-size: .78em;
  font-weight: 900;
}
.verse-row.has-underline .parallel-text {
  color: rgba(20,18,14,.78) !important;
}
.verse-row.has-underline .parallel-label {
  color: #6d5723 !important;
}
.copyright-warning {
  display: none !important;
}

@media (max-width: 520px) {
  .selector-panel {
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto !important;
  }
  .selector-version-row {
    grid-template-columns: minmax(0, 2fr) minmax(96px, 1fr) !important;
    gap: 7px !important;
  }
  .selector-grid-wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, .98fr) !important;
    gap: 6px !important;
  }
  .book-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }
  .book-grid button {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
  }
  .chapter-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    align-content: start !important;
  }
  .chapter-grid button {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
  }
  .parallel-picker-panel {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);
    width: calc(100vw - 18px);
    max-height: 58dvh;
    padding: 11px;
  }
  .parallel-version-group {
    grid-template-columns: 1fr;
  }
  .parallel-version-item {
    min-height: 36px;
  }
}


/* M18.7: exact selector redesign requested by user. */
.selector-panel:not([hidden]):not(.is-hidden) {
  display: grid !important;
}
.selector-panel {
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0px) + 6px) !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 6px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(920px, calc(100vw - 8px)) !important;
  height: auto !important;
  max-height: none !important;
  padding: 10px !important;
  gap: 7px !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}
.selector-header {
  min-height: 42px !important;
  padding: 0 0 4px !important;
  align-items: center !important;
}
.selector-title {
  font-size: 15px !important;
  line-height: 1.1 !important;
}
.selector-status {
  margin-top: 2px !important;
  font-size: 11px !important;
  min-height: 14px !important;
}
.selector-jump-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 76px !important;
  gap: 6px !important;
}
.selector-jump-form input,
.selector-jump-form button {
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 17px !important;
  font-size: 13px !important;
}
.selector-version-row {
  display: grid !important;
  grid-template-columns: minmax(0, 2fr) minmax(96px, 1fr) !important;
  gap: 6px !important;
  align-items: stretch !important;
}
.selector-version-row .version-select-field,
.selector-version-row .compare-picker-btn,
.selector-version-row select {
  min-height: 36px !important;
  height: 36px !important;
}
.compare-picker-btn {
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 18px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}
.parallel-summary,
.compare-field,
.parallel-toggle,
.parallel-select-wrap {
  display: none !important;
}
.selector-grid-wrap {
  display: grid !important;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
  gap: 6px !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
}
.selector-grid-wrap > section {
  min-height: 0 !important;
  overflow: hidden !important;
}
.book-grid,
.chapter-grid {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  align-content: start !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}
.book-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 4px !important;
}
.chapter-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 4px !important;
}
.book-grid button,
.chapter-grid button {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 2px !important;
  border-radius: 9px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  font-size: 11.5px !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
}
.chapter-grid button {
  font-size: 12px !important;
  letter-spacing: 0 !important;
}
#closeSelectorBtn {
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 18px !important;
  font-size: 13px !important;
}
.parallel-picker-panel {
  top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(560px, calc(100vw - 16px)) !important;
  max-height: none !important;
  height: auto !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  padding: 10px !important;
  gap: 8px !important;
}
.parallel-picker-hint,
.parallel-group-title {
  display: none !important;
}
.parallel-version-list {
  min-height: 0 !important;
  overflow-y: auto !important;
  gap: 6px !important;
}
.parallel-version-group {
  grid-template-columns: 1fr !important;
  gap: 5px !important;
}
.parallel-version-item {
  min-height: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  padding: 0 10px !important;
  font-size: 13px !important;
}
.parallel-version-item span::after {
  content: '' !important;
}
.parallel-picker-actions button {
  min-height: 34px !important;
  height: 34px !important;
  border-radius: 17px !important;
  font-size: 13px !important;
}
.quality-details,
.copyright-warning,
.about-card,
.legal-note,
.release-checklist,
.permission-note {
  display: none !important;
}
@media (max-width: 520px) {
  .selector-panel {
    top: calc(env(safe-area-inset-top, 0px) + 4px) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 4px) !important;
    width: 100vw !important;
    border-radius: 14px !important;
    padding: 8px !important;
    gap: 6px !important;
  }
  .selector-header {
    min-height: 38px !important;
  }
  .selector-jump-form {
    grid-template-columns: minmax(0, 1fr) 64px !important;
  }
  .selector-version-row {
    grid-template-columns: minmax(0, 2fr) minmax(90px, 1fr) !important;
  }
  .selector-grid-wrap {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
    gap: 5px !important;
  }
  .book-grid,
  .chapter-grid {
    gap: 4px !important;
  }
  .book-grid button,
  .chapter-grid button {
    height: 29px !important;
    min-height: 29px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
  }
  .chapter-grid button {
    font-size: 11.5px !important;
  }
  .parallel-picker-panel {
    top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
    width: calc(100vw - 12px) !important;
    border-radius: 16px !important;
  }
}

/* M18.10: hide fixed bottom tabs while selector/compare dialogs are open.
   The mobile bottom tabs use a high z-index for normal reading, but that can
   overlap the selector footer or the compare picker action buttons on Galaxy
   S22-sized screens. Dialogs should own the full interaction layer. */
body.selector-open .bottom-tabs {
  display: none !important;
  pointer-events: none !important;
}
body.selector-open .bottom-action-sheet,
body.selector-open .sheet-backdrop {
  display: none !important;
  pointer-events: none !important;
}
.selector-backdrop {
  z-index: 200 !important;
}
.selector-panel {
  z-index: 210 !important;
}
.parallel-picker-panel {
  z-index: 220 !important;
}

/* M18.10: make the selector grids consume the available dialog body height.
   Without an explicit section height, the book/chapter grids can shrink to a few
   visible rows and leave unused blank space before the footer on S22 screens. */
.selector-grid-wrap > section {
  height: 100% !important;
  grid-template-rows: minmax(0, 1fr) !important;
}
.selector-grid-wrap {
  grid-template-rows: minmax(0, 1fr) !important;
}

/* M18.12: launch splash / loading UX. This is a transient startup layer,
   not a home screen. It should disappear as soon as the reading view is ready,
   while giving public-shell/no-data and load-error states a clean user-facing
   fallback. */
.launch-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top, 0px)) 24px max(24px, env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(circle at 50% 42%, rgba(215, 181, 109, .10), transparent 26%),
    #050505;
  color: #f7f2e8;
  opacity: 1;
  transition: opacity 260ms ease;
}
.launch-splash.is-hiding {
  opacity: 0;
  pointer-events: none;
}
.launch-splash[hidden] {
  display: none !important;
}
.launch-splash__inner {
  width: min(100%, 360px);
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
  transform: translateY(-5vh);
}
.launch-splash__mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #d7b56d;
  font-size: 18px;
  line-height: 1;
  background: rgba(215, 181, 109, .08);
  box-shadow: 0 0 28px rgba(215, 181, 109, .12);
}
.launch-splash__title {
  color: #f7f2e8;
  font-size: clamp(26px, 7vw, 31px);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: .02em;
}
.launch-splash__message {
  min-height: 22px;
  color: #b9ad98;
  font-size: 14.5px;
  line-height: 1.55;
  word-break: keep-all;
}
.launch-splash__dots {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  margin-top: 2px;
}
.launch-splash__dots span {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #d7b56d;
  opacity: .35;
  animation: launchSplashPulse 1.1s ease-in-out infinite;
}
.launch-splash__dots span:nth-child(2) { animation-delay: .16s; }
.launch-splash__dots span:nth-child(3) { animation-delay: .32s; }
@keyframes launchSplashPulse {
  0%, 72%, 100% { transform: translateY(0); opacity: .28; }
  36% { transform: translateY(-3px); opacity: .95; }
}
.launch-splash__actions {
  margin-top: 6px;
}
.launch-splash__button {
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid rgba(215, 181, 109, .42);
  border-radius: 999px;
  background: rgba(215, 181, 109, .10);
  color: #f7f2e8;
  font-weight: 800;
}
.launch-splash.is-blocking .launch-splash__inner {
  transform: translateY(-2vh);
}
.launch-splash.is-blocking .launch-splash__mark {
  background: rgba(215, 181, 109, .12);
}
.launch-splash.is-blocking .launch-splash__message {
  max-width: 300px;
}
.launch-splash.is-blocking .launch-splash__dots {
  display: none !important;
}

/* M18.14: bottom navigation cleanup.
   보기 became 설정, and 기록 is now a shortcut group inside the 설정 sheet. */
.bottom-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
body[data-active-sheet="font"] .bottom-action-sheet {
  max-height: min(42dvh, 300px) !important;
}
#fontSheetPanel .settings-record-grid {
  margin-top: 2px !important;
}
#fontSheetPanel .settings-record-grid .secondary-btn {
  flex-basis: 74px !important;
}
#installPwaBtnSheet.install-pill,
#installPwaBtn.install-pill {
  background: var(--reader-pill-active) !important;
  color: var(--reader-pill-active-ink) !important;
  border-color: transparent !important;
}
#installPwaBtnSheet:disabled,
#installPwaBtn:disabled {
  opacity: .62 !important;
  cursor: default !important;
}
@media (max-width: 430px) {
  body[data-active-sheet="font"] .bottom-action-sheet {
    max-height: min(48dvh, 326px) !important;
  }
  #fontSheetPanel .settings-record-grid .secondary-btn {
    flex-basis: 70px !important;
    font-size: 12px !important;
  }
  #fontSheetPanel .view-action-pills .pill-btn {
    min-width: 82px !important;
  }
}


/* M18.15: 역본대조 팝업 버튼/목록 밀도 보정 */
.parallel-picker-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: stretch !important;
}
.parallel-picker-actions button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 38px !important;
  padding-inline: 10px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}
.parallel-version-list {
  gap: 5px !important;
}
.parallel-version-group {
  gap: 4px !important;
}
.parallel-version-item {
  min-height: 32px !important;
  height: 32px !important;
  padding-block: 0 !important;
  line-height: 1.05 !important;
}
.parallel-version-item span {
  line-height: 1.05 !important;
}
@media (max-width: 520px) {
  .parallel-picker-actions {
    gap: 7px !important;
  }
  .parallel-picker-actions button {
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 19px !important;
    font-size: 14px !important;
  }
  .parallel-version-list {
    gap: 4px !important;
  }
  .parallel-version-group {
    gap: 4px !important;
  }
  .parallel-version-item {
    min-height: 31px !important;
    height: 31px !important;
    border-radius: 9px !important;
  }
}

/* M18.15 hotfix: selector-panel의 primary full-width 규칙이 역본대조 버튼에 전파되지 않도록 방어 */
.selector-panel .parallel-picker-actions .primary-btn,
.selector-panel .parallel-picker-actions .secondary-btn {
  grid-column: auto !important;
}

/* M18.16 resources: commentary and hymnal viewer */
.resource-card .result-list {
  margin-top: 10px;
}
.commentary-card {
  overflow: hidden;
}
.commentary-body {
  margin-top: 8px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--reader-ink, #f3ead8);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.commentary-body p {
  margin: 0.55em 0;
}
.commentary-body br + br {
  display: none;
}
.commentary-body font[color="green"],
.commentary-body font[color="DarkBlue"],
.commentary-body font[color="darkblue"] {
  color: #d6b86f;
}
.hymn-controls {
  display: grid;
  grid-template-columns: 1fr minmax(76px, 92px) 1fr 1fr;
  gap: 8px;
  align-items: end;
}
.hymn-number-label {
  display: grid;
  gap: 4px;
  margin: 0 !important;
}
.hymn-number-label span {
  font-size: 0.78rem;
  color: var(--muted, #aaa);
}
.hymn-image-wrap {
  margin-top: 12px;
  width: 100%;
  overflow: auto;
  border-radius: 14px;
  background: #f7f3e8;
  max-height: calc(100dvh - 220px);
}
#hymnImage {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
}
[data-theme="dark"] .commentary-body {
  color: #eadfca;
}
@media (max-width: 420px) {
  .hymn-controls {
    grid-template-columns: 1fr 82px 1fr 1fr;
    gap: 6px;
  }
  .hymn-controls .primary-btn,
  .hymn-controls .secondary-btn {
    padding-left: 6px;
    padding-right: 6px;
    min-width: 0;
  }
  .commentary-body {
    font-size: 0.9rem;
  }
}

/* M18.18: 찬송가 전용 인터페이스 */
.bottom-tabs {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
.hymn-view .section-title {
  margin-bottom: 8px;
}
.hymn-card {
  margin-bottom: 10px;
}
.hymn-headline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.hymn-favorite-btn {
  white-space: nowrap;
  flex: 0 0 auto;
  min-width: 98px;
}
.hymn-favorite-btn.is-active {
  background: var(--reader-pill-active, #d6b86f) !important;
  color: var(--reader-pill-active-ink, #17130b) !important;
  border-color: transparent !important;
}
.hymn-jump-form {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(72px, 88px) minmax(0, .9fr) minmax(0, .9fr);
  gap: 7px;
  align-items: center;
  margin-top: 10px;
}
.hymn-jump-form .primary-btn,
.hymn-jump-form .secondary-btn {
  min-width: 0;
  min-height: 38px;
  padding-inline: 8px;
  white-space: nowrap;
}
.hymn-number-label {
  margin: 0 !important;
}
.hymn-number-label input {
  height: 38px;
  min-width: 0;
  text-align: center;
  font-weight: 800;
}
.hymn-chip-section {
  margin-top: 10px;
}
.hymn-chip-row-title {
  margin-bottom: 5px;
  font-size: .78rem;
  font-weight: 800;
  color: var(--muted, #aaa);
}
.hymn-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 30px;
}
.hymn-chip,
.hymn-number-btn {
  border: 1px solid var(--line, #333);
  background: var(--panel, #181818);
  color: var(--fg, #eee);
  border-radius: 999px;
  min-height: 30px;
  padding: 4px 10px;
  font-size: .82rem;
  font-weight: 750;
}
.hymn-chip:active,
.hymn-number-btn:active {
  transform: translateY(1px);
}
.hymn-empty-chip {
  color: var(--muted, #999);
  font-size: .84rem;
  padding: 5px 0;
}
.hymn-viewer-card {
  padding: 8px !important;
}
.hymn-toolbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 8px;
}
.hymn-toolbar .secondary-btn {
  min-width: 0;
  min-height: 34px;
  padding-inline: 6px;
}
.hymn-image-wrap {
  margin-top: 0 !important;
  width: 100%;
  overflow: auto;
  border-radius: 14px;
  background: #f7f3e8;
  max-height: calc(100dvh - 174px);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
#hymnImage {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  background: #fff;
  transform-origin: top center;
}
.hymn-index-card summary {
  cursor: pointer;
  font-weight: 900;
  color: var(--fg, #eee);
}
.hymn-number-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 5px;
  margin-top: 10px;
  max-height: 260px;
  overflow: auto;
  padding-right: 2px;
}
.hymn-number-btn {
  border-radius: 10px;
  padding: 0;
  min-height: 32px;
  font-size: .78rem;
}
.hymn-number-btn.is-current {
  background: var(--reader-pill-active, #d6b86f) !important;
  color: var(--reader-pill-active-ink, #17130b) !important;
  border-color: transparent !important;
}
.hymn-number-btn.is-favorite::after {
  content: '★';
  margin-left: 2px;
  font-size: .6rem;
}
[data-theme="dark"] .hymn-chip,
[data-theme="dark"] .hymn-number-btn {
  background: #171717;
  border-color: #2a2a2a;
  color: #eadfca;
}
@media (max-width: 430px) {
  .bottom-tabs button {
    font-size: 10.5px !important;
    min-width: 0 !important;
    padding-inline: 2px !important;
  }
  .hymn-headline {
    align-items: center;
  }
  .hymn-favorite-btn {
    min-width: 92px;
    padding-inline: 8px !important;
    font-size: 12px !important;
  }
  .hymn-jump-form {
    grid-template-columns: minmax(0, .9fr) 72px minmax(0, .9fr) minmax(0, .9fr);
    gap: 6px;
  }
  .hymn-jump-form .primary-btn,
  .hymn-jump-form .secondary-btn {
    font-size: 12px;
    padding-inline: 5px;
  }
  .hymn-toolbar {
    gap: 6px;
  }
  .hymn-toolbar .secondary-btn {
    font-size: 12px;
  }
  .hymn-image-wrap {
    max-height: calc(100dvh - 158px);
  }
  .hymn-number-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    max-height: 238px;
  }
}


/* M18.21: 찬송가 화면에서는 성경 본문 네비게이션을 숨기고 찬송가 전용 UI만 표시 */
body.hymn-active .topbar,
body.hymn-active #networkBanner,
body.hymn-active #updateBanner {
  display: none !important;
}

body.hymn-active .app-shell {
  grid-template-rows: 1fr auto;
}

body.hymn-active .content {
  padding-top: 0 !important;
}

/* M18.19: 찬송가 읽기 화면은 이미지와 이전/목록/다음만 표시 */
.hymn-view.is-list-mode .hymn-reader-panel {
  display: none !important;
}
.hymn-view.is-reader-mode .hymn-list-panel {
  display: none !important;
}
.hymn-index-title {
  font-size: .9rem;
  font-weight: 900;
  color: var(--fg, #eee);
  margin-bottom: 8px;
}
.hymn-view.is-list-mode .hymn-jump-form {
  grid-template-columns: minmax(0, 1fr) minmax(84px, .45fr);
}
body.hymn-reader-mode .topbar,
body.hymn-reader-mode .bottom-tabs,
body.hymn-reader-mode #networkBanner,
body.hymn-reader-mode #updateBanner {
  display: none !important;
}
body.hymn-reader-mode .app-shell {
  max-width: none;
  min-height: 100dvh;
  grid-template-rows: 1fr;
  background: #050505;
  box-shadow: none;
}
body.hymn-reader-mode .content {
  padding: 0 !important;
  overflow: hidden !important;
  background: #050505;
}
.hymn-reader-panel[hidden] {
  display: none !important;
}
.hymn-view.is-reader-mode,
.hymn-reader-panel {
  height: 100dvh;
  width: 100%;
}
.hymn-reader-panel {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  background: #050505;
}
.hymn-reader-panel .hymn-image-wrap {
  flex: 1 1 auto;
  width: 100%;
  max-height: none !important;
  min-height: 0;
  margin: 0 !important;
  border-radius: 0 !important;
  background: #f7f3e8;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.hymn-reader-panel #hymnImage {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  object-fit: contain;
  object-position: top center;
  margin: 0 auto;
  background: #f7f3e8;
}
.hymn-reader-nav {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  padding: 8px 8px calc(env(safe-area-inset-bottom, 0px) + 8px);
  background: #101010;
  border-top: 1px solid #2a2a2a;
}
.hymn-reader-nav-btn {
  min-width: 0;
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  background: #1b1b1b;
  color: #eadfca;
  font-weight: 850;
  white-space: nowrap;
}
.hymn-reader-nav-btn:active {
  transform: translateY(1px);
  background: #d6b86f;
  color: #17130b;
}
@media (max-width: 430px) {
  .hymn-view.is-list-mode .hymn-jump-form {
    grid-template-columns: minmax(0, 1fr) 84px;
  }
  .hymn-reader-nav {
    padding-inline: 6px;
  }
  .hymn-reader-nav-btn {
    min-height: 40px;
    font-size: 13px;
  }
}


/* M18.22: 하단 설정 시트에서는 닫기 X 버튼을 표시하지 않는다. */
body[data-active-sheet="font"] #closeSheetBtn {
  display: none !important;
}


/* M18.23: reading UI polish, bottom tabs flush, centered verse numbers, modern nav, complete light theme */
:root,
[data-theme="dark"] {
  --reader-bg: #050505;
  --reader-panel: #0a0a0a;
  --reader-elevated: rgba(20, 20, 20, .98);
  --reader-ink: #eee9dd;
  --reader-muted: #8f8b82;
  --reader-faint: rgba(255,255,255,.075);
  --reader-faint-2: rgba(255,255,255,.12);
  --reader-pill: rgba(255,255,255,.07);
  --reader-pill-active: #eee6d2;
  --reader-pill-active-ink: #14110a;
  --reader-accent: #d7bd83;
  --bg: var(--reader-bg);
  --panel: var(--reader-bg);
  --ink: var(--reader-ink);
  --muted: var(--reader-muted);
  --line: var(--reader-faint);
  --accent: var(--reader-accent);
  --accent-ink: #111;
  --soft: rgba(255,255,255,.055);
}

[data-theme="light"] {
  --reader-bg: #f7f3ea;
  --reader-panel: #fffaf0;
  --reader-elevated: rgba(255, 250, 240, .98);
  --reader-ink: #2a2117;
  --reader-muted: #756a5c;
  --reader-faint: rgba(78, 60, 35, .14);
  --reader-faint-2: rgba(78, 60, 35, .22);
  --reader-pill: rgba(80, 62, 35, .08);
  --reader-pill-active: #2f261a;
  --reader-pill-active-ink: #fff7e8;
  --reader-accent: #8b6a2f;
  --bg: var(--reader-bg);
  --panel: var(--reader-panel);
  --ink: var(--reader-ink);
  --muted: var(--reader-muted);
  --line: var(--reader-faint);
  --accent: var(--reader-accent);
  --accent-ink: #fff7e8;
  --soft: #ece2d1;
  --underline: #fff1b8;
}

html,
body {
  background: var(--reader-bg) !important;
  color: var(--reader-ink) !important;
}

.app-shell,
.content,
.view,
.verse-list,
.focused-verse-list {
  background: var(--reader-bg) !important;
  color: var(--reader-ink) !important;
}

.content {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 64px) !important;
}

/* Bottom tabs should touch the bottom edge without a gray gap. */
.bottom-tabs {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  transform: translateX(-50%) !important;
  width: min(760px, 100vw) !important;
  max-width: min(760px, 100vw) !important;
  margin: 0 !important;
  padding: 6px 10px calc(env(safe-area-inset-bottom, 0px) + 6px) !important;
  background: var(--reader-bg) !important;
  border-top: 1px solid var(--reader-faint) !important;
  box-shadow: 0 -12px 28px rgba(0,0,0,.28) !important;
}

[data-theme="light"] .bottom-tabs {
  box-shadow: 0 -10px 24px rgba(83, 63, 36, .12) !important;
}

.bottom-tabs button {
  color: var(--reader-muted) !important;
  background: transparent !important;
}

.bottom-tabs button.active-tab,
.bottom-tabs button[aria-expanded="true"] {
  background: var(--reader-pill) !important;
  color: var(--reader-ink) !important;
}

.bottom-tabs button.active-tab::after,
.bottom-tabs button[aria-expanded="true"]::after {
  background: var(--reader-accent) !important;
}

/* Modern, quiet chapter navigation. */
.topbar {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 44px !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: 44px !important;
  padding: calc(env(safe-area-inset-top, 0px) + 5px) 10px 5px !important;
  background: var(--reader-bg) !important;
  color: var(--reader-ink) !important;
  border-bottom: 1px solid var(--reader-faint) !important;
  box-shadow: none !important;
}

.title-block {
  min-width: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

.nav-btn {
  width: 44px !important;
  height: 34px !important;
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: var(--reader-muted) !important;
  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 360 !important;
  padding: 0 0 2px !important;
  box-shadow: none !important;
}

.nav-btn:hover,
.nav-btn:focus-visible,
.nav-btn:active {
  background: var(--reader-pill) !important;
  color: var(--reader-ink) !important;
}

.reference-btn {
  width: auto !important;
  max-width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  padding: 0 13px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: var(--reader-ink) !important;
  font-size: 15px !important;
  font-weight: 760 !important;
  letter-spacing: -.02em !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.reference-btn:hover,
.reference-btn:focus-visible,
.reference-btn:active {
  background: var(--reader-pill) !important;
}

/* Verse number: slightly larger and visually centered on the first line. */
.verse-row,
.focused-verse-list .verse-row {
  align-items: start !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
}

.verse-no,
[data-theme="dark"] .verse-no,
[data-theme="light"] .verse-no {
  font-size: 12.5px !important;
  line-height: 1 !important;
  padding-top: 6px !important;
  color: var(--reader-muted) !important;
  align-self: start !important;
}

.verse-body,
.verse-text,
.parallel-text {
  color: var(--reader-ink) !important;
}

.parallel-text {
  color: var(--reader-muted) !important;
  border-left-color: var(--reader-faint-2) !important;
}

/* Complete light theme pass for controls and panels that had hard-coded dark values. */
.settings-card,
.bottom-action-sheet,
.sheet-panel,
.selector-panel,
.parallel-picker-panel,
.verse-dialog,
.hymn-card,
.commentary-card,
.search-result-item,
.history-item,
.record-item,
.memo-item,
.underline-item,
.plan-book-card {
  background: var(--reader-panel) !important;
  color: var(--reader-ink) !important;
  border-color: var(--reader-faint) !important;
}

.sheet-backdrop,
.selector-backdrop {
  background: rgba(0,0,0,.48) !important;
}

[data-theme="light"] .sheet-backdrop,
[data-theme="light"] .selector-backdrop {
  background: rgba(54, 42, 25, .24) !important;
}

input,
select,
textarea,
.sheet-search-form input,
.sheet-select-label select,
.selector-panel input,
.selector-panel select {
  background: var(--reader-panel) !important;
  color: var(--reader-ink) !important;
  border-color: var(--reader-faint-2) !important;
}

.primary-btn,
.primary-sheet-action,
.launch-splash__button {
  background: var(--reader-pill-active) !important;
  color: var(--reader-pill-active-ink) !important;
  border-color: transparent !important;
}

.secondary-btn,
.mini-btn,
.quick-recent-btn,
.hymn-chip,
.hymn-number-btn,
.sheet-icon-btn,
.icon-btn,
.install-pill,
.fullscreen-pill {
  background: var(--reader-pill) !important;
  color: var(--reader-ink) !important;
  border-color: var(--reader-faint) !important;
}

.subsection-title,
.section-title,
.sheet-title,
.selector-title,
.hymn-index-title,
.hymn-chip-row-title,
.hint,
.sheet-subtitle,
.selector-status,
.parallel-picker-hint,
.commentary-meta {
  color: var(--reader-muted) !important;
}

[data-theme="light"] .verse-row:active {
  background: rgba(73, 53, 24, .07) !important;
}

[data-theme="light"] .verse-row.has-underline {
  background: #2f261a !important;
  color: #fff7e8 !important;
}

[data-theme="light"] .verse-row.has-underline .verse-body,
[data-theme="light"] .verse-row.has-underline .verse-text {
  color: #fff7e8 !important;
}

[data-theme="light"] .verse-row.has-underline .verse-no {
  color: rgba(255,247,232,.7) !important;
}

@media (max-width: 430px) {
  .topbar {
    grid-template-columns: 40px minmax(0, 1fr) 40px !important;
    padding-inline: 8px !important;
  }
  .nav-btn {
    width: 40px !important;
    font-size: 27px !important;
  }
  .reference-btn {
    font-size: 14.5px !important;
    padding-inline: 10px !important;
  }
  .bottom-tabs {
    padding-inline: 6px !important;
  }
  .bottom-tabs button {
    min-height: 38px !important;
    height: 38px !important;
    font-size: 11px !important;
  }
  .verse-row,
  .focused-verse-list .verse-row {
    grid-template-columns: 23px minmax(0, 1fr) !important;
  }
  .verse-no,
  [data-theme="dark"] .verse-no,
  [data-theme="light"] .verse-no {
    font-size: 12px !important;
    padding-top: 6px !important;
  }
}


/* M18.26: 설정 시트 X 제거 뒤 남은 우측 여백 제거 */
body[data-active-sheet="font"] #fontSheetPanel.font-panel-compact {
  padding-right: 0 !important;
}
body[data-active-sheet="font"] #fontSheetPanel .view-size-row,
body[data-active-sheet="font"] #fontSheetPanel .view-settings-row,
body[data-active-sheet="font"] #fontSheetPanel .settings-record-grid {
  padding-right: 0 !important;
  margin-right: 0 !important;
}

/* M19.0: first-run device alias collection for analytics */
.device-alias-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(18px);
}

.device-alias-overlay[hidden] {
  display: none !important;
}

.device-alias-card {
  width: min(420px, 100%);
  border: 1px solid var(--border);
  border-radius: 28px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.36);
  padding: 28px;
  display: grid;
  gap: 16px;
}

.device-alias-mark {
  color: var(--accent);
  font-size: 2.2rem;
  line-height: 1;
  text-align: center;
}

.device-alias-card h1 {
  margin: 0;
  text-align: center;
  font-size: 1.35rem;
}

.device-alias-card p {
  margin: 0;
  color: var(--muted);
  text-align: center;
  line-height: 1.6;
}

.device-alias-label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.92rem;
}

.device-alias-label input {
  width: 100%;
  min-height: 48px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--field-bg, rgba(255,255,255,0.04));
  color: var(--text);
  padding: 0 14px;
  font-size: 1rem;
}

.device-alias-card .primary-btn {
  min-height: 48px;
  border-radius: 16px;
}

body.device-alias-required .bottom-action-sheet,
body.device-alias-required .selector-panel {
  pointer-events: none;
}


/* M19.2 pixel avatar / star shop */
.avatar-onboarding,
.avatar-dashboard {
  display: grid;
  gap: 14px;
  justify-items: center;
}

.avatar-dashboard {
  grid-template-columns: auto 1fr;
  align-items: center;
  justify-items: stretch;
}

.pixel-avatar-preview {
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.08));
  box-shadow: inset 0 0 0 1px var(--line), 0 14px 34px rgba(0,0,0,.18);
  overflow: hidden;
}

.pixel-avatar-preview.large {
  width: 148px;
  height: 148px;
}

.pixel-avatar-preview svg {
  width: 100%;
  height: 100%;
  image-rendering: auto;
  shape-rendering: crispEdges;
}

.avatar-summary {
  min-width: 0;
}

.avatar-alias {
  font-weight: 800;
  font-size: 1.02rem;
  margin-bottom: 8px;
}

.avatar-stars {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, var(--card));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  font-weight: 800;
}

.avatar-stars span {
  color: #f6c85f;
}

.avatar-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.avatar-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.avatar-tabs button {
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--muted);
  border-radius: 999px;
  padding: 9px 10px;
  font-weight: 800;
}

.avatar-tabs button.active {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

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

.avatar-shop-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 10px;
  background: var(--card);
}

.avatar-shop-item .item-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--soft);
  font-size: 28px;
  box-shadow: inset 0 0 0 1px var(--line);
}

.avatar-shop-item .item-name {
  font-weight: 800;
  line-height: 1.2;
}

.avatar-shop-item .item-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: .82rem;
  margin: 4px 0 8px;
}

.avatar-shop-item button {
  width: 100%;
  min-height: 36px;
}

.avatar-shop-item.is-owned {
  opacity: .92;
}

.avatar-shop-item.is-equipped {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}

.compact-btn {
  min-height: 40px;
  padding: 8px 14px;
}

.star-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + 18px);
  transform: translateX(-50%) translateY(20px);
  z-index: 80;
  background: color-mix(in srgb, var(--text) 92%, #000);
  color: var(--bg);
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 900;
  box-shadow: 0 16px 36px rgba(0,0,0,.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.star-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 520px) {
  .avatar-dashboard {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .avatar-shop-grid {
    grid-template-columns: 1fr;
  }
  .pixel-avatar-preview.large {
    width: 136px;
    height: 136px;
  }
}


/* Logi avatar migration phase 1 */
.pixel-avatar-preview.logi-skin-preview {
  background: color-mix(in srgb, var(--card) 92%, #fff);
}

.pixel-avatar-preview.logi-skin-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
  display: block;
  padding: 8px;
}

.avatar-card::after {
  content: '로기 목표/보상 UI 적용';
  display: inline-flex;
  margin-top: 10px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
}


/* Logi avatar migration phase 2: skin shop preview */
.avatar-shop-item.logi-skin-card {
  grid-template-columns: 72px 1fr;
}

.avatar-shop-item.logi-skin-card .logi-skin-thumb {
  width: 72px;
  height: 72px;
  background: color-mix(in srgb, var(--card) 90%, #fff);
}

.avatar-shop-item.logi-skin-card .logi-skin-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
  display: block;
}

.avatar-shop-item.logi-skin-card .item-meta span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 7px;
  background: var(--soft);
}

.avatar-shop-item.logi-skin-card.is-equipped .item-name::after {
  content: ' 착용중';
  color: var(--accent);
  font-size: .78rem;
  font-weight: 900;
}


/* Logi avatar migration phase 6: reading goal and bonus UI */
.avatar-reward-panel {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 22px;
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
  display: grid;
  gap: 12px;
}

.avatar-reward-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}

.reward-kicker {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .02em;
}

.reward-title {
  margin-top: 3px;
  font-weight: 900;
  line-height: 1.3;
}

.reading-goal-progress {
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--line) 70%, transparent);
  box-shadow: inset 0 0 0 1px var(--line);
}

.reading-goal-progress > div {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #f6c85f);
  transition: width .25s ease;
}

.reading-goal-controls {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.reading-goal-controls label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: .84rem;
  font-weight: 800;
}

.reading-goal-controls select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--field-bg, var(--card));
  color: var(--text);
  padding: 0 12px;
  font-weight: 800;
}

.goal-bonus-box {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--card) 86%, #fff);
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.goal-bonus-box > div {
  min-width: 0;
  font-weight: 800;
  color: var(--text);
}

.goal-bonus-box button {
  min-height: 38px;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .avatar-reward-header,
  .goal-bonus-box {
    grid-template-columns: 1fr;
    display: grid;
  }

  .reading-goal-controls {
    grid-template-columns: 1fr;
  }

  .goal-bonus-box button {
    width: 100%;
  }
}


/* Logi avatar migration phase 10: reward unlock progress */
.item-unlock {
  display: grid;
  gap: 4px;
  margin: 8px 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--soft) 86%, #fff);
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
}

.item-unlock.is-unlocked {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
}

.mini-progress {
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--line) 75%, transparent);
}

.mini-progress > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #f6c85f);
}


/* Phase 18 UI hotfix: expose Logi avatar entry in the reachable settings sheet. */
.pill-btn.avatar-pill {
  font-weight: 900;
}


/* Phase 18 UI/UX hotfix 2: cleaner Logi avatar layout and centered skin artwork. */
.avatar-card {
  position: relative;
  padding: 18px;
  border-radius: 24px;
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 14%, transparent), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 98%, #fff), color-mix(in srgb, var(--soft) 20%, var(--panel)));
  box-shadow: 0 18px 38px rgba(0, 0, 0, .12);
  overflow: clip;
}

[data-theme="dark"] .avatar-card {
  background:
    radial-gradient(circle at top right, rgba(140, 168, 215, .14), transparent 34%),
    linear-gradient(180deg, rgba(34, 40, 54, .96), rgba(20, 24, 34, .98));
  box-shadow: 0 20px 40px rgba(0, 0, 0, .3);
}

.avatar-card::after {
  content: none;
  display: none;
}

.avatar-card .subsection-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.02rem;
}

.avatar-card .subsection-title::before {
  content: '✦';
  color: #f6c85f;
  font-size: .92rem;
}

.avatar-dashboard {
  grid-template-columns: minmax(136px, 156px) minmax(0, 1fr);
  align-items: stretch;
  gap: 16px;
}

.pixel-avatar-preview {
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
}

.pixel-avatar-preview.logi-skin-preview {
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, .24), transparent 44%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 96%, #fff), color-mix(in srgb, var(--soft) 18%, var(--panel)));
}

[data-theme="dark"] .pixel-avatar-preview.logi-skin-preview {
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, .08), transparent 44%),
    linear-gradient(180deg, rgba(39, 47, 63, .96), rgba(18, 22, 31, .98));
}

.avatar-summary {
  display: grid;
  align-content: center;
  gap: 10px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
  border-radius: 22px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
}

[data-theme="dark"] .avatar-summary {
  background: rgba(255, 255, 255, .03);
}

.avatar-alias {
  margin-bottom: 0;
  font-size: 1.08rem;
}

#avatarStatus {
  margin: 0;
  line-height: 1.55;
}

#avatarStatus[data-type="ok"] {
  color: #5ea96f;
}

#avatarStatus[data-type="warn"] {
  color: #e6c166;
}

#avatarStatus[data-type="error"] {
  color: #e17b74;
}

.avatar-actions {
  gap: 10px;
  margin-top: 2px;
}

.avatar-actions .primary-btn,
.avatar-actions .secondary-btn,
.avatar-tabs button,
.avatar-shop-item button,
.goal-bonus-box button {
  border-radius: 16px;
}

.avatar-reward-panel {
  margin-top: 4px;
  padding: 16px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, var(--panel)), color-mix(in srgb, var(--soft) 12%, var(--panel)));
}

[data-theme="dark"] .avatar-reward-panel {
  background:
    linear-gradient(180deg, rgba(33, 39, 52, .98), rgba(17, 21, 29, .98));
}

.goal-bonus-box {
  border-color: color-mix(in srgb, var(--accent) 16%, var(--line));
  background: color-mix(in srgb, var(--panel) 95%, transparent);
}

.avatar-tabs {
  gap: 10px;
  margin-top: 6px;
  padding: 6px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--soft) 55%, transparent);
}

.avatar-tabs button {
  min-height: 44px;
  color: var(--ink);
  background: transparent;
}

.avatar-tabs button.active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 82%, #fff), var(--accent));
  color: var(--accent-ink);
  box-shadow: 0 10px 18px rgba(0, 0, 0, .16);
}

.avatar-shop-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 8px;
}

.avatar-shop-item.logi-skin-card {
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
  padding: 14px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 96%, #fff), color-mix(in srgb, var(--soft) 10%, var(--panel)));
}

[data-theme="dark"] .avatar-shop-item.logi-skin-card {
  background:
    linear-gradient(180deg, rgba(31, 37, 50, .98), rgba(15, 19, 27, .98));
}

.avatar-shop-item.logi-skin-card .logi-skin-thumb {
  width: 92px;
  height: 92px;
  align-self: start;
  justify-self: start;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 255, 255, .26), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, #fff), color-mix(in srgb, var(--soft) 18%, var(--panel)));
  overflow: hidden;
}

[data-theme="dark"] .avatar-shop-item.logi-skin-card .logi-skin-thumb {
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 255, 255, .09), transparent 42%),
    linear-gradient(180deg, rgba(43, 49, 65, .98), rgba(21, 25, 35, .98));
}

.logi-skin-info {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.item-name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.equipped-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  color: var(--accent);
  font-size: .78rem;
  font-weight: 900;
}

.avatar-shop-item.logi-skin-card .item-name {
  font-size: 1rem;
}

.avatar-shop-item.logi-skin-card .item-meta {
  margin: 0;
}

.avatar-shop-item.logi-skin-card .item-meta span {
  padding: 4px 9px;
  font-size: .76rem;
}

.item-desc {
  margin: 0;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.5;
}

.logi-skin-art {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  position: relative;
  isolation: isolate;
}

.logi-skin-art::before {
  content: '';
  position: absolute;
  inset: 16%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 247, 232, .56) 0%, rgba(255, 244, 222, .22) 42%, rgba(255, 244, 222, 0) 74%);
  filter: blur(8px);
  opacity: .72;
  z-index: 0;
  pointer-events: none;
}

[data-theme="dark"] .logi-skin-art::before {
  background: radial-gradient(circle, rgba(255, 247, 230, .18) 0%, rgba(255, 244, 220, .08) 44%, rgba(255, 244, 220, 0) 74%);
  opacity: 1;
}

.logi-skin-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
  display: block;
  position: relative;
  z-index: 1;
  transform: translate(var(--skin-shift-x, 0px), var(--skin-shift-y, 0px)) scale(var(--skin-scale, 1));
  transform-origin: center center;
  filter:
    drop-shadow(0 2px 2px rgba(76, 67, 59, .10))
    drop-shadow(0 10px 14px rgba(0, 0, 0, .08));
}

[data-theme="dark"] .logi-skin-art img {
  filter:
    drop-shadow(0 0 1px rgba(255, 250, 241, .48))
    drop-shadow(0 10px 16px rgba(0, 0, 0, .22));
}

.logi-skin-art.is-preview img {
  width: 88%;
  height: 88%;
}

.logi-skin-art.is-thumb img {
  width: 82%;
  height: 82%;
}

.avatar-shop-item.logi-skin-card.is-equipped {
  border-color: color-mix(in srgb, #f6c85f 42%, var(--accent));
  box-shadow: 0 0 0 2px color-mix(in srgb, #f6c85f 18%, transparent), 0 14px 26px rgba(0, 0, 0, .12);
}

.avatar-shop-item.logi-skin-card.is-equipped .item-name::after {
  content: none;
}

@media (max-width: 620px) {
  .avatar-card {
    padding: 16px;
    border-radius: 20px;
  }

  .avatar-dashboard {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .avatar-summary {
    width: 100%;
    text-align: left;
  }
}

@media (max-width: 520px) {
  .avatar-shop-item.logi-skin-card {
    grid-template-columns: 1fr;
  }

  .avatar-shop-item.logi-skin-card .logi-skin-thumb {
    justify-self: center;
  }

  .avatar-shop-item.logi-skin-card .item-name-row {
    flex-direction: column;
  }

  .avatar-summary {
    text-align: center;
  }
}


/* Phase 18 UI/UX hotfix 3: Logi is a first-class bottom tab and standalone screen. */
.bottom-tabs {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

.bottom-tabs button {
  font-size: clamp(9px, 2.35vw, 11px) !important;
  letter-spacing: -0.045em !important;
}

.avatar-view {
  max-width: 760px;
  margin: 0 auto;
}

.avatar-page-lead {
  margin: -6px 0 14px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.avatar-view .avatar-card {
  margin-top: 0;
}

.logi-entry-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border-radius: 22px;
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 12%, transparent), transparent 42%),
    var(--card);
}

.logi-entry-copy {
  min-width: 0;
}

.logi-entry-copy .subsection-title {
  margin-bottom: 5px;
}

.logi-entry-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.logi-entry-card .primary-btn {
  min-height: 44px;
  border-radius: 16px;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .bottom-tabs {
    padding-inline: 4px !important;
  }

  .bottom-tabs button {
    height: 37px !important;
    min-height: 37px !important;
    font-size: clamp(8.5px, 2.55vw, 10.5px) !important;
  }

  .logi-entry-card {
    grid-template-columns: 1fr;
  }

  .logi-entry-card .primary-btn {
    width: 100%;
  }
}


/* Phase 18 UI/UX hotfix 4: polished standalone Logi page and icon bottom tabs. */
.avatar-view {
  max-width: 820px;
}

.avatar-page-shell {
  display: grid;
  gap: 14px;
}

.avatar-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 0;
}

.avatar-page-head .section-title {
  margin-bottom: 4px;
  font-size: clamp(1.25rem, 3vw, 1.55rem);
}

.avatar-page-head .eyebrow {
  margin-bottom: 4px;
  color: color-mix(in srgb, var(--accent) 84%, var(--muted));
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.avatar-page-sync {
  min-width: 72px;
  min-height: 42px;
  border-radius: 16px;
}

.avatar-page-lead {
  margin: 0;
  max-width: 58ch;
}

.avatar-hero-card,
.avatar-goal-card,
.avatar-closet-card {
  border-radius: 26px;
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  background:
    radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 98%, #fff), color-mix(in srgb, var(--soft) 16%, var(--panel)));
}

[data-theme="dark"] .avatar-hero-card,
[data-theme="dark"] .avatar-goal-card,
[data-theme="dark"] .avatar-closet-card {
  background:
    radial-gradient(circle at 92% 0%, rgba(246, 200, 95, .11), transparent 34%),
    linear-gradient(180deg, rgba(30, 36, 49, .98), rgba(15, 18, 26, .98));
}

.avatar-hero-card {
  padding: clamp(16px, 3vw, 22px);
}

.avatar-hero-card .avatar-dashboard {
  grid-template-columns: minmax(160px, 200px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 22px);
}

.avatar-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 192px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 34%, rgba(255,255,255,.38), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, var(--soft) 42%, var(--panel)), color-mix(in srgb, var(--panel) 92%, #fff));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  overflow: hidden;
}

[data-theme="dark"] .avatar-stage {
  background:
    radial-gradient(circle at 50% 34%, rgba(255,255,255,.08), transparent 38%),
    linear-gradient(180deg, rgba(43, 50, 66, .96), rgba(19, 23, 32, .98));
}

.avatar-stage::before {
  content: '';
  position: absolute;
  inset: auto 18px 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .14);
  filter: blur(8px);
  opacity: .38;
}

.avatar-stage .pixel-avatar-preview.large {
  position: relative;
  z-index: 1;
  width: min(168px, 70vw);
  height: min(168px, 70vw);
  border: 0;
  box-shadow: none;
  background: transparent;
}

.avatar-summary {
  align-content: stretch;
  gap: 12px;
  padding: clamp(15px, 3vw, 20px);
}

.avatar-summary-kicker {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.avatar-alias {
  font-size: clamp(1.18rem, 3vw, 1.42rem);
  line-height: 1.25;
}

.avatar-stars {
  width: fit-content;
  padding: 8px 13px;
}

.avatar-mini-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 2px;
}

.avatar-mini-stats span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 15%, var(--line));
  color: var(--muted);
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  font-size: .78rem;
  font-weight: 800;
}

.avatar-actions {
  margin-top: 16px;
}

.avatar-actions .primary-btn,
.avatar-actions .secondary-btn {
  min-height: 44px;
}

.avatar-goal-card {
  padding: 0;
  overflow: hidden;
}

.avatar-goal-card .avatar-reward-panel {
  margin: 0;
  border: 0;
  background: transparent;
}

.avatar-closet-card {
  padding: clamp(14px, 3vw, 18px);
}

.avatar-closet-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.avatar-closet-head .subsection-title {
  margin-bottom: 4px;
}

.avatar-closet-card .avatar-tabs {
  position: sticky;
  top: 0;
  z-index: 2;
  backdrop-filter: blur(12px);
}

.avatar-shop-grid {
  padding-top: 4px;
}

.avatar-shop-item.logi-skin-card {
  min-height: 134px;
}

.bottom-tabs button {
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 2px !important;
  min-width: 0 !important;
  line-height: 1.05 !important;
}

.bottom-tabs button::before {
  content: none;
  display: block;
  min-height: 16px;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0;
  opacity: .9;
}

.bottom-tabs button:not([data-nav-icon])::before {
  content: none;
}

.bottom-tabs button.active-tab::before,
.bottom-tabs button[aria-expanded="true"]::before {
  opacity: 1;
}

@media (max-width: 620px) {
  .avatar-page-head {
    align-items: flex-start;
  }

  .avatar-page-sync {
    display: none;
  }

  .avatar-hero-card .avatar-dashboard {
    grid-template-columns: 1fr;
  }

  .avatar-stage {
    min-height: 178px;
  }

  .avatar-stage .pixel-avatar-preview.large {
    width: 156px;
    height: 156px;
  }

  .avatar-summary {
    text-align: left;
  }

  .avatar-stars {
    width: 100%;
    justify-content: center;
  }

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

@media (max-width: 430px) {
  .avatar-view {
    padding-inline: 0;
  }

  .avatar-hero-card,
  .avatar-goal-card,
  .avatar-closet-card {
    border-radius: 22px;
  }

  .avatar-actions .primary-btn,
  .avatar-actions .secondary-btn {
    padding-inline: 8px;
    font-size: .88rem;
  }

  .avatar-tabs {
    gap: 5px;
  }

  .bottom-tabs {
    grid-template-columns: repeat(6, minmax(44px, 1fr)) !important;
    gap: 2px !important;
  }

  .bottom-tabs button {
    padding-inline: 0 !important;
    font-size: 9.2px !important;
  }

  .bottom-tabs button::before {
    font-size: 13.5px;
  }
}


/* Phase 18 UI/UX hotfix 7: softened Logi PNG edges and natural rendering. */
.pixel-avatar-preview.logi-skin-preview .logi-skin-art img,
.avatar-shop-item.logi-skin-card .logi-skin-art img,
.logi-skin-art img {
  image-rendering: auto;
  backface-visibility: hidden;
}

.logi-skin-art::after {
  content: '';
  position: absolute;
  inset: 18%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 68%);
  opacity: .55;
  z-index: 0;
  pointer-events: none;
}

[data-theme="dark"] .logi-skin-art::after {
  background: radial-gradient(circle, rgba(255, 246, 226, .12), rgba(255, 246, 226, 0) 68%);
  opacity: .72;
}


/* UI/UX hotfix 12: contain Logi skin art inside avatar cards and preview boxes. */
.avatar-shop-grid {
  isolation: isolate;
}

.avatar-shop-grid > * {
  min-width: 0;
}

.avatar-shop-item.logi-skin-card {
  position: relative;
  z-index: 0;
  overflow: hidden;
  contain: paint;
}

.avatar-shop-item.logi-skin-card.is-equipped {
  z-index: 1;
}

.avatar-shop-item.logi-skin-card .logi-skin-thumb,
.pixel-avatar-preview.logi-skin-preview,
.avatar-stage .pixel-avatar-preview.large {
  overflow: hidden;
  contain: paint;
  isolation: isolate;
}

.logi-skin-art {
  overflow: hidden;
  contain: paint;
  clip-path: inset(0 round 18px);
}

.logi-skin-art::before {
  inset: 18%;
}

.logi-skin-art.is-thumb::before {
  inset: 20%;
  filter: blur(5px);
}


@supports (overflow: clip) {
  .avatar-shop-item.logi-skin-card,
  .avatar-shop-item.logi-skin-card .logi-skin-thumb,
  .pixel-avatar-preview.logi-skin-preview,
  .avatar-stage .pixel-avatar-preview.large,
  .logi-skin-art {
    overflow: clip;
  }
}

/* UI/UX hotfix 13: measured containment guard for large Logi reward skins. */
.avatar-shop-item.logi-skin-card .logi-skin-thumb {
  box-sizing: border-box;
  flex: 0 0 92px;
  min-width: 92px;
  max-width: 92px;
  position: relative;
  z-index: 0;
}

.logi-skin-info {
  position: relative;
  z-index: 1;
}

.logi-skin-art,
.logi-skin-art img {
  pointer-events: none;
}

@media (max-width: 520px) {
  .avatar-shop-item.logi-skin-card .logi-skin-thumb {
    margin-inline: auto;
  }
}


/* UI/UX hotfix 14: mobile-safe Logi shop layout guard.
   Keep ornate reward skins from visually competing with adjacent cards by
   forcing a one-column closet on small/tablet widths and requiring wider
   cards before the grid becomes two columns. */
.avatar-shop-grid {
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  align-items: stretch;
}

.avatar-shop-item.logi-skin-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.avatar-shop-item.logi-skin-card .logi-skin-thumb {
  inline-size: 92px;
  block-size: 92px;
  flex: 0 0 92px;
}

.avatar-shop-item.logi-skin-card .item-name,
.avatar-shop-item.logi-skin-card .item-desc,
.avatar-shop-item.logi-skin-card .item-meta {
  overflow-wrap: anywhere;
}

.avatar-shop-item.logi-skin-card .item-meta {
  max-width: 100%;
}

.avatar-shop-item.logi-skin-card button {
  max-width: 100%;
}

@media (min-width: 760px) {
  .avatar-shop-grid {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
  }
}

@media (max-width: 359px) {
  .avatar-shop-item.logi-skin-card {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }

  .avatar-shop-item.logi-skin-card .logi-skin-thumb {
    inline-size: 80px;
    block-size: 80px;
    min-width: 80px;
    max-width: 80px;
    flex-basis: 80px;
    border-radius: 20px;
  }
}


/* UI/UX hotfix 22: make Logi shop states and actions easier to understand. */
.avatar-tabs button[role="tab"] {
  position: relative;
  white-space: nowrap;
}

.skin-state-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  background: color-mix(in srgb, var(--soft) 78%, var(--panel));
  color: var(--muted);
  font-size: .76rem;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

.skin-state-pill.is-equipped,
.skin-state-pill.is-reward-ready {
  border-color: color-mix(in srgb, #f6c85f 38%, var(--accent));
  background: color-mix(in srgb, #f6c85f 18%, var(--panel));
  color: color-mix(in srgb, #6b4a00 80%, var(--accent));
}

.skin-state-pill.is-owned,
.skin-state-pill.is-available {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  color: var(--accent);
}

.skin-state-pill.is-not-enough-stars,
.skin-state-pill.is-reward-locked {
  border-color: color-mix(in srgb, var(--muted) 22%, var(--line));
  background: color-mix(in srgb, var(--soft) 84%, var(--panel));
  color: var(--muted);
}

.skin-action-help {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: .79rem;
  line-height: 1.45;
}

.avatar-shop-item.logi-skin-card.is-available {
  border-color: color-mix(in srgb, var(--accent) 26%, var(--line));
}

.avatar-shop-item.logi-skin-card.is-reward-ready {
  border-color: color-mix(in srgb, #f6c85f 42%, var(--accent));
  box-shadow: 0 0 0 2px color-mix(in srgb, #f6c85f 14%, transparent), 0 14px 26px rgba(0, 0, 0, .10);
}

.avatar-shop-item.logi-skin-card.is-not-enough-stars,
.avatar-shop-item.logi-skin-card.is-reward-locked {
  opacity: .88;
}

.avatar-shop-item.logi-skin-card.is-not-enough-stars .logi-skin-thumb,
.avatar-shop-item.logi-skin-card.is-reward-locked .logi-skin-thumb {
  filter: saturate(.82);
}

.avatar-shop-empty {
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--soft) 60%, transparent);
  text-align: center;
}

[data-theme="dark"] .skin-state-pill.is-equipped,
[data-theme="dark"] .skin-state-pill.is-reward-ready {
  color: #f8d878;
  background: rgba(246, 200, 95, .12);
}

@media (max-width: 520px) {
  .skin-state-pill {
    align-self: flex-start;
  }

  .skin-action-help {
    font-size: .76rem;
  }
}

@media (max-width: 359px) {
  .skin-state-pill {
    padding-inline: 8px;
    font-size: .72rem;
  }
}

/* UI/UX hotfix 23: prevent duplicate Logi shop actions and show in-progress state. */
.avatar-shop-item.logi-skin-card.is-processing {
  position: relative;
  opacity: .82;
  pointer-events: none;
}

.avatar-shop-item.logi-skin-card.is-processing::after {
  content: "처리 중";
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .08);
}

.avatar-shop-item.logi-skin-card.is-processing button[aria-busy="true"] {
  cursor: progress;
}

[data-theme="dark"] .avatar-shop-item.logi-skin-card.is-processing::after {
  background: rgba(18, 22, 31, .88);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .24);
}


.reward-sync-note {
  font-size: 0.82rem;
  color: var(--muted);
}

/* UIUX hotfix32: Cloudflare/D1 server health diagnostics. */
.server-health-card {
  display: grid;
  gap: 12px;
}

.server-health-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.server-health-head .hint {
  margin: 4px 0 0;
}

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

.method-diagnostic-list {
  margin-top: 10px;
}

.server-health-panel {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--soft);
}

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

.server-health-row,
.server-health-check {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.server-health-row span,
.server-health-check p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.server-health-row strong,
.server-health-check strong {
  word-break: break-word;
}

.server-health-checks {
  display: grid;
  gap: 8px;
}

.server-health-check {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}

.server-health-details {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.server-health-details summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--accent);
}

.server-health-table-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}

@media (max-width: 560px) {
  .server-health-head {
    display: grid;
  }

  .server-health-grid,
  .server-health-table-list {
    grid-template-columns: 1fr;
  }
}

/* uiuxhotfix36: quiet reward feedback for reading mode.
   Star gains are acknowledged only by a subtle pulse on the bottom star icon. */
.bottom-tabs button.star-reward-pulse::before {
  animation: bottomStarRewardPulse .9s ease-out 1;
  transform-origin: center;
}

@keyframes bottomStarRewardPulse {
  0% {
    transform: scale(1);
    opacity: .9;
    text-shadow: none;
  }
  35% {
    transform: scale(1.32);
    opacity: 1;
    text-shadow: 0 0 12px currentColor;
  }
  68% {
    transform: scale(.96);
    opacity: 1;
    text-shadow: 0 0 5px currentColor;
  }
  100% {
    transform: scale(1);
    opacity: .9;
    text-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bottom-tabs button.star-reward-pulse::before {
    animation: none;
  }
}

/* uiuxhotfix37: quiet sync queue flush controls live only in Settings. */
.sync-queue-panel {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
}

.sync-queue-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.sync-queue-head strong {
  display: block;
  margin-bottom: 3px;
}

.sync-queue-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.sync-queue-grid .server-health-row {
  min-height: auto;
}

.sync-queue-grid .server-health-row strong {
  line-height: 1.35;
}

@media (max-width: 640px) {
  .sync-queue-head {
    align-items: stretch;
    flex-direction: column;
  }
}

/* uiuxhotfix38: quieter reader and tucked-away diagnostics.
   Server/API details stay available in Settings, but they no longer dominate the normal settings view. */
.advanced-diagnostics-details {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .025);
}

.advanced-diagnostics-details > summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--muted);
  list-style-position: inside;
}

.advanced-diagnostics-details[open] > summary {
  color: var(--accent);
}

.advanced-diagnostics-details > .hint {
  margin: 8px 0 10px;
}

.advanced-diagnostics-actions {
  justify-content: flex-start;
  margin-bottom: 10px;
}

.sync-primary-actions {
  align-self: center;
}

[data-theme="dark"] .verse-row.has-underline {
  background: rgba(215, 189, 131, .18) !important;
  color: var(--reader-ink) !important;
}

[data-theme="dark"] .verse-row.has-underline .verse-body,
[data-theme="dark"] .verse-row.has-underline .verse-text,
[data-theme="dark"] .verse-row.has-underline .parallel-text {
  color: var(--reader-ink) !important;
}

[data-theme="dark"] .verse-row.has-underline .verse-no {
  color: rgba(238, 233, 221, .56) !important;
}

[data-theme="dark"] .verse-row.has-underline:active {
  background: rgba(215, 189, 131, .24) !important;
}

@media (max-width: 560px) {
  .advanced-diagnostics-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* uiuxhotfix39: backup restore preview and safer merge controls. */
.backup-identity-row {
  margin: 6px 0 8px;
}

.backup-preview-panel {
  display: grid;
  gap: 12px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--soft);
}

.backup-preview-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.backup-summary-grid {
  display: grid;
  gap: 6px;
}

.backup-summary-row {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, minmax(52px, 0.75fr));
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  font-size: 13px;
}

.backup-summary-header {
  font-weight: 900;
  color: var(--muted);
  background: transparent;
}

.backup-restore-note {
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 74%, transparent);
  line-height: 1.5;
}

.backup-restore-note.warning {
  color: var(--danger);
}

.backup-warning-list {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.55;
}

@media (max-width: 520px) {
  .backup-preview-head {
    flex-direction: column;
  }

  .backup-summary-row {
    grid-template-columns: 1fr repeat(3, minmax(44px, 0.7fr));
    font-size: 12px;
  }
}


/* uiuxhotfix40: verse long-press delay and balanced Bible/chapter selector buttons.
   Keep chapter buttons from feeling smaller than book buttons by using matching
   panel width, grid density, and touch target sizing in both selector grids. */
.selector-grid-wrap {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.book-grid,
.chapter-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

.book-grid button,
.chapter-grid button {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 4px !important;
  font-size: 11.5px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.045em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}


@media (max-width: 640px) {
  .selector-grid-wrap {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 430px) {
  .book-grid,
  .chapter-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  .book-grid button,
  .chapter-grid button {
    height: 31px !important;
    min-height: 31px !important;
    font-size: 10.8px !important;
    padding: 0 3px !important;
  }
}


/* uiuxhotfix42: startup opens the reading view first; background errors use a small quiet pill. */
.quiet-startup-pill {
  position: fixed;
  right: max(12px, env(safe-area-inset-right, 0px) + 12px);
  bottom: calc(var(--bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + 10px);
  z-index: 86;
  max-width: min(78vw, 280px);
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(239, 68, 68, .38);
  background: rgba(254, 226, 226, .96);
  color: #991b1b;
  font-size: .76rem;
  font-weight: 900;
  line-height: 1.2;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.quiet-startup-pill.show {
  opacity: 1;
  transform: translateY(0);
}

[data-theme="dark"] .quiet-startup-pill {
  border-color: rgba(248, 113, 113, .42);
  background: rgba(127, 29, 29, .94);
  color: #fee2e2;
}

/* uiuxhotfix43: records summary and quieter position restore highlight */
.record-summary {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
}

.record-summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.record-chip {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.record-chip strong {
  margin-left: 4px;
  color: var(--accent);
}

.record-chip.active {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
}

.record-summary-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 520px) {
  .record-tools {
    grid-template-columns: 1fr;
  }
  .record-chip {
    flex: 1 1 calc(50% - 8px);
    justify-content: center;
  }
}

/* uiuxhotfix46: resilient full-width bottom navigation.
   Icons are inline SVG in the HTML, so they render before API/server checks finish. */
:root {
  --bottom-nav-height: 66px;
}

.content {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--bottom-nav-height) + 8px) !important;
}

.bottom-tabs {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  width: 100vw !important;
  max-width: none !important;
  margin: 0 !important;
  z-index: 80 !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 7px max(8px, env(safe-area-inset-left, 0px)) calc(env(safe-area-inset-bottom, 0px) + 7px) max(8px, env(safe-area-inset-right, 0px)) !important;
  min-height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px)) !important;
  background: color-mix(in srgb, var(--reader-bg, var(--panel)) 96%, #000 4%) !important;
  border-top: 1px solid color-mix(in srgb, var(--reader-faint, var(--line)) 78%, transparent) !important;
  box-shadow: 0 -14px 28px rgba(0, 0, 0, .22) !important;
  overflow: visible !important;
}

[data-theme="light"] .bottom-tabs {
  background: color-mix(in srgb, var(--reader-bg, var(--panel)) 98%, #fff 2%) !important;
  box-shadow: 0 -12px 24px rgba(83, 63, 36, .10) !important;
}

.bottom-tabs button {
  appearance: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  width: 100% !important;
  min-height: 48px !important;
  height: 48px !important;
  padding: 3px 1px 4px !important;
  border-radius: 16px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--reader-muted, var(--muted)) !important;
  font-size: 10.8px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -.03em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  -webkit-tap-highlight-color: transparent;
}

.bottom-tabs button::before,
.bottom-tabs button:not([data-nav-icon])::before,
.bottom-tabs button.active-tab::after,
.bottom-tabs button[aria-expanded="true"]::after {
  content: none !important;
  display: none !important;
}

.bottom-tabs .nav-icon {
  width: 23px !important;
  height: 23px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: currentColor !important;
  opacity: .88;
  flex: 0 0 auto !important;
}

.bottom-tabs .nav-icon svg {
  width: 23px !important;
  height: 23px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  overflow: visible;
}

.bottom-tabs .nav-label {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

.bottom-tabs button.active-tab,
.bottom-tabs button[aria-expanded="true"] {
  color: var(--reader-ink, var(--ink)) !important;
  background: color-mix(in srgb, var(--reader-pill, var(--soft)) 86%, transparent) !important;
}

.bottom-tabs button.active-tab .nav-icon,
.bottom-tabs button[aria-expanded="true"] .nav-icon {
  color: var(--reader-accent, var(--accent)) !important;
  opacity: 1;
}

.bottom-tabs button.star-reward-pulse .nav-icon {
  animation: bottomStarRewardPulse .9s ease-out 1;
  transform-origin: center;
}

@media (max-width: 420px) {
  :root {
    --bottom-nav-height: 62px;
  }

  .bottom-tabs {
    padding-left: max(5px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(5px, env(safe-area-inset-right, 0px)) !important;
  }

  .bottom-tabs button {
    min-height: 45px !important;
    height: 45px !important;
    border-radius: 14px !important;
    font-size: 10.2px !important;
  }

  .bottom-tabs .nav-icon,
  .bottom-tabs .nav-icon svg {
    width: 21px !important;
    height: 21px !important;
  }
}

/* uiuxhotfix47: Logi companion redesign foundation.
   Render Logi as a consistent inline SVG companion instead of depending on mixed PNG artwork. */
.avatar-page-head .eyebrow {
  color: color-mix(in srgb, #c79a3a 84%, var(--accent));
}

.avatar-hero-card {
  position: relative;
  overflow: hidden;
}

.avatar-hero-card::before {
  content: '';
  position: absolute;
  inset: -38% -18% auto auto;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(246, 200, 95, .18), transparent 68%);
  pointer-events: none;
}

.avatar-stage {
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 248, 224, .78), transparent 42%),
    radial-gradient(circle at 50% 82%, rgba(199, 154, 58, .16), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 95%, #fff), color-mix(in srgb, var(--soft) 18%, var(--panel))) !important;
}

[data-theme="dark"] .avatar-stage {
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 230, 168, .16), transparent 42%),
    radial-gradient(circle at 50% 82%, rgba(246, 200, 95, .10), transparent 40%),
    linear-gradient(180deg, rgba(34, 39, 52, .98), rgba(15, 18, 26, .98)) !important;
}

.avatar-stage::after {
  content: '조용한 말씀 동행자';
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  min-height: 24px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #d8b765 34%, var(--line));
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: -.02em;
  backdrop-filter: blur(8px);
}

.logi-skin-art svg {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 1;
  transform: translate(var(--skin-shift-x, 0px), var(--skin-shift-y, 0px)) scale(var(--skin-scale, 1));
  transform-origin: center center;
  filter:
    drop-shadow(0 2px 2px rgba(76, 67, 59, .10))
    drop-shadow(0 12px 18px rgba(0, 0, 0, .10));
}

[data-theme="dark"] .logi-skin-art svg {
  filter:
    drop-shadow(0 0 1px rgba(255, 250, 241, .38))
    drop-shadow(0 12px 18px rgba(0, 0, 0, .28));
}

.logi-skin-art.is-preview svg {
  width: 94%;
  height: 94%;
}

.logi-skin-art.is-thumb svg {
  width: 92%;
  height: 92%;
}

.pixel-avatar-preview.logi-skin-preview {
  background: transparent !important;
  box-shadow: none !important;
}

.avatar-summary {
  border-radius: 24px;
  background: color-mix(in srgb, var(--panel) 68%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 10%, transparent);
}

.avatar-summary-kicker::before {
  content: '✦ ';
  color: #d8b765;
}

.avatar-mini-stats span {
  background: color-mix(in srgb, #f6c85f 8%, var(--panel));
}

.avatar-shop-item.logi-skin-card {
  grid-template-columns: 84px minmax(0, 1fr);
  min-height: 126px;
  border-radius: 24px;
}

.avatar-shop-item.logi-skin-card .logi-skin-thumb {
  width: 82px;
  height: 82px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 247, 224, .78), transparent 46%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 94%, #fff), color-mix(in srgb, var(--soft) 18%, var(--panel)));
}

.avatar-shop-item.logi-skin-card .item-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.avatar-tabs button {
  letter-spacing: -.03em;
}

@media (max-width: 520px) {
  .avatar-shop-item.logi-skin-card {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 10px;
  }
  .avatar-shop-item.logi-skin-card .logi-skin-thumb {
    width: 74px;
    height: 74px;
  }
  .avatar-stage::after {
    bottom: 8px;
    font-size: .68rem;
  }
}


/* uiuxhotfix50: Modern Logi Companion asset system.
   Legacy PNG/atlas characters were removed. Render app-ready standalone SVG assets. */
.logi-companion-art {
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 33%, rgba(255, 226, 146, .22), transparent 46%),
    radial-gradient(circle at 50% 82%, rgba(13, 18, 31, .16), transparent 46%);
}

.logi-companion-art img[data-companion-asset="svg"] {
  display: block;
  position: relative;
  z-index: 1;
  width: 94%;
  height: 94%;
  object-fit: contain;
  transform: translate(var(--skin-shift-x, 0px), var(--skin-shift-y, 0px)) scale(var(--skin-scale, 1));
  transform-origin: center center;
  filter:
    drop-shadow(0 2px 3px rgba(76, 67, 59, .12))
    drop-shadow(0 14px 22px rgba(0, 0, 0, .14));
}

[data-theme="dark"] .logi-companion-art img[data-companion-asset="svg"] {
  filter:
    drop-shadow(0 0 2px rgba(255, 236, 180, .28))
    drop-shadow(0 14px 22px rgba(0, 0, 0, .34));
}

.logi-skin-art.is-thumb img[data-companion-asset="svg"] {
  width: 90%;
  height: 90%;
}

.avatar-stage .logi-companion-art img[data-companion-asset="svg"] {
  width: 100%;
  height: 100%;
}

.avatar-shop-item.logi-skin-card .logi-skin-thumb {
  background:
    linear-gradient(180deg, rgba(255, 246, 224, .10), rgba(255, 246, 224, .02)),
    color-mix(in srgb, var(--panel) 86%, #111827);
}


/* uiuxhotfix50: Friendly human Logi avatar refinements. */
.logi-companion-art {
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 231, 169, .34), transparent 44%),
    radial-gradient(circle at 50% 86%, rgba(13, 18, 31, .12), transparent 48%);
}
.logi-companion-art img[data-companion-asset="svg"] {
  width: 98%;
  height: 98%;
  filter:
    drop-shadow(0 4px 6px rgba(87, 58, 30, .11))
    drop-shadow(0 16px 26px rgba(0, 0, 0, .14));
}
.logi-skin-art.is-thumb img[data-companion-asset="svg"] {
  width: 96%;
  height: 96%;
}
[data-theme="dark"] .logi-companion-art {
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 214, 134, .22), transparent 44%),
    radial-gradient(circle at 50% 86%, rgba(255, 255, 255, .04), transparent 48%);
}
[data-theme="dark"] .logi-companion-art img[data-companion-asset="svg"] {
  filter:
    drop-shadow(0 0 2px rgba(255, 236, 185, .22))
    drop-shadow(0 16px 28px rgba(0, 0, 0, .38));
}
.avatar-stage::after {
  content: '말씀과 함께 걷는 친구';
}

/* uiuxhotfix50: avatar visuals/shop hidden; star ranking mode */
.avatar-feature-hidden,
.avatar-stage,
.avatar-closet-card,
.avatar-tabs,
.avatar-shop-grid,
.pixel-avatar-preview.logi-skin-preview {
  display: none !important;
}

.star-view .avatar-page-shell,
.star-page-shell {
  gap: 14px;
}

.star-summary-card {
  overflow: hidden;
}

.star-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}

.star-profile-block {
  min-width: 0;
}

.star-balance-block {
  min-width: 132px;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 14px 16px;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(245, 194, 93, 0.18), rgba(245, 194, 93, 0.06));
  border: 1px solid rgba(245, 194, 93, 0.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}

.star-balance-block strong {
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  line-height: 1;
  color: var(--text, #222);
}

.star-balance-block span:last-child {
  font-size: 0.78rem;
  color: var(--muted, #777);
}

.star-balance-icon {
  color: #e4a62a;
  font-size: 1rem;
}

.star-ranking-card {
  display: grid;
  gap: 14px;
}

.star-ranking-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.star-ranking-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border-radius: 18px;
  background: rgba(127, 108, 74, 0.08);
}

.star-ranking-tabs button {
  min-height: 38px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--muted, #777);
  font-weight: 750;
}

.star-ranking-tabs button.active {
  background: rgba(245, 194, 93, 0.22);
  color: var(--text, #222);
  box-shadow: 0 5px 16px rgba(0,0,0,0.08);
}

.my-star-rank {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(245, 194, 93, 0.12);
  border: 1px solid rgba(245, 194, 93, 0.2);
  font-size: 0.9rem;
  color: var(--muted, #777);
}

.my-star-rank strong {
  color: var(--text, #222);
  font-size: 1.15rem;
}

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

.star-rank-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(127, 108, 74, 0.12);
  background: rgba(255,255,255,0.54);
}

.star-rank-row.is-me {
  border-color: rgba(245, 194, 93, 0.42);
  background: rgba(245, 194, 93, 0.14);
}

.star-rank-place {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(127, 108, 74, 0.1);
  font-weight: 850;
  color: var(--text, #222);
}

.star-rank-main {
  min-width: 0;
}

.star-rank-name {
  font-weight: 850;
  color: var(--text, #222);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.star-rank-meta {
  margin-top: 2px;
  font-size: 0.76rem;
  color: var(--muted, #777);
}

.star-rank-score {
  display: grid;
  justify-items: end;
  gap: 1px;
  color: var(--muted, #777);
  font-size: 0.72rem;
}

.star-rank-score strong {
  color: #d99a1f;
  font-size: 1rem;
}

.star-ranking-status {
  min-height: 1.2em;
}

[data-theme="dark"] .star-balance-block,
[data-theme="dark"] .my-star-rank,
[data-theme="dark"] .star-rank-row.is-me {
  background: rgba(245, 194, 93, 0.12);
}

[data-theme="dark"] .star-rank-row {
  background: rgba(255,255,255,0.045);
  border-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .star-ranking-tabs {
  background: rgba(255,255,255,0.05);
}

@media (max-width: 560px) {
  .star-summary-grid {
    grid-template-columns: 1fr;
  }
  .star-balance-block {
    width: 100%;
    min-width: 0;
  }
  .star-ranking-head {
    align-items: stretch;
    flex-direction: column;
  }
  .star-rank-row {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    padding: 10px;
  }
}

/* uiuxhotfix51: star menu rebuilt after avatar removal */
.star-view .avatar-page-shell,
.star-page-shell {
  gap: 12px;
}

.star-page-head {
  align-items: center;
}

.star-page-head .avatar-page-lead {
  max-width: 34rem;
}

.star-dashboard-card {
  padding: 16px;
  display: grid;
  gap: 14px;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 0%, rgba(245, 194, 93, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,255,255,0.52));
}

.star-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(132px, .34fr);
  gap: 12px;
  align-items: stretch;
}

.star-identity-panel,
.star-balance-block,
.star-goal-panel {
  border-radius: 22px;
  border: 1px solid rgba(127, 108, 74, 0.12);
  background: rgba(255,255,255,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}

.star-identity-panel {
  padding: 16px;
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 4px;
}

.star-card-label {
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #777);
}

.star-alias-name {
  font-size: clamp(1.2rem, 4.4vw, 1.7rem);
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--text, #222);
}

.star-profile-hint {
  margin-top: 3px;
  font-size: 0.78rem;
}

.star-balance-block {
  min-width: 0;
  padding: 16px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 7px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 226, 151, 0.58), transparent 56%),
    linear-gradient(145deg, rgba(245, 194, 93, 0.26), rgba(245, 194, 93, 0.08));
}

.star-balance-label {
  font-size: 0.72rem !important;
  font-weight: 850;
  letter-spacing: 0.06em;
  color: rgba(126, 84, 18, 0.78) !important;
}

.star-balance-line {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
}

.star-balance-line strong,
.star-balance-block strong {
  font-size: clamp(2rem, 8vw, 3.05rem);
  line-height: .9;
  font-weight: 950;
  letter-spacing: -0.06em;
}

.star-balance-icon {
  font-size: 1.1rem;
  color: #d99a1f;
  transform: translateY(-.08em);
}

.star-goal-panel {
  padding: 14px;
  display: grid;
  gap: 11px;
}

.star-goal-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.star-goal-summary {
  margin-top: 3px;
  font-size: clamp(0.98rem, 3.6vw, 1.18rem);
  line-height: 1.35;
}

.star-icon-action {
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 999px;
  font-size: 1.05rem;
}

.star-goal-progress {
  height: 9px;
  border-radius: 999px;
  background: rgba(127, 108, 74, 0.10);
  overflow: hidden;
}

.star-goal-progress > div {
  border-radius: inherit;
}

.star-goal-controls {
  display: grid;
  grid-template-columns: minmax(112px, .36fr) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.star-goal-select,
.star-goal-bonus {
  min-width: 0;
  margin: 0;
  border-radius: 18px;
  border: 1px solid rgba(127, 108, 74, 0.10);
  background: rgba(255,255,255,0.42);
  padding: 10px;
}

.star-goal-select {
  display: grid;
  gap: 6px;
}

.star-goal-select span {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--muted, #777);
}

.star-goal-select select {
  width: 100%;
}

.star-goal-bonus {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.star-goal-bonus #goalBonusSummary {
  min-width: 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--muted, #777);
}

.star-goal-bonus button {
  min-height: 38px;
  white-space: nowrap;
}

.star-ranking-card {
  padding: 15px;
  gap: 12px;
}

.star-ranking-head {
  align-items: center;
}

.star-ranking-head .avatar-page-lead {
  margin-top: 2px;
  font-size: 0.8rem;
}

.star-ranking-tabs {
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(127, 108, 74, 0.08);
  position: sticky;
  top: calc(var(--top-bar-height, 0px) + 6px);
  z-index: 2;
  backdrop-filter: blur(14px);
}

.star-ranking-tabs button {
  min-height: 34px;
  border-radius: 999px;
  font-size: 0.82rem;
}

.my-star-rank {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 225, 151, .34), transparent 44%),
    rgba(245, 194, 93, 0.12);
}

.my-rank-copy {
  min-width: 0;
}

.my-rank-label {
  font-size: 0.73rem;
  font-weight: 850;
  color: var(--muted, #777);
}

.my-rank-meta {
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--muted, #777);
}

.my-rank-value {
  min-width: 62px;
  text-align: right;
  font-size: 1.45rem;
  font-weight: 950;
  letter-spacing: -0.05em;
  color: var(--text, #222);
}

.star-ranking-list {
  gap: 7px;
}

.star-rank-row {
  grid-template-columns: 38px minmax(0, 1fr) minmax(74px, auto);
  gap: 9px;
  padding: 10px;
  border-radius: 17px;
}

.star-rank-row.is-top {
  background:
    linear-gradient(90deg, rgba(245, 194, 93, 0.14), rgba(255,255,255,0.52));
  border-color: rgba(245, 194, 93, 0.22);
}

.star-rank-row.is-me {
  border-color: rgba(245, 194, 93, 0.48);
  box-shadow: 0 0 0 1px rgba(245, 194, 93, 0.18) inset;
}

.star-rank-place {
  width: 32px;
  height: 32px;
  font-size: 0.82rem;
}

.star-rank-place .rank-medal {
  font-size: 1rem;
  line-height: 1;
}

.star-rank-name-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.star-rank-name {
  min-width: 0;
}

.star-rank-me-pill {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(245, 194, 93, 0.22);
  color: #9b6813;
  font-size: 0.68rem;
  font-weight: 850;
}

.star-rank-meta {
  font-size: 0.72rem;
}

.star-rank-score strong {
  font-size: 1.06rem;
}

.star-ranking-status {
  text-align: right;
  font-size: 0.74rem;
}

[data-theme="dark"] .star-dashboard-card {
  background:
    radial-gradient(circle at 88% 0%, rgba(245, 194, 93, 0.13), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
}

[data-theme="dark"] .star-identity-panel,
[data-theme="dark"] .star-balance-block,
[data-theme="dark"] .star-goal-panel,
[data-theme="dark"] .star-goal-select,
[data-theme="dark"] .star-goal-bonus {
  background: rgba(255,255,255,0.045);
  border-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .star-rank-row.is-top {
  background: linear-gradient(90deg, rgba(245, 194, 93, 0.13), rgba(255,255,255,0.04));
}

[data-theme="dark"] .star-ranking-tabs {
  background: rgba(255,255,255,0.06);
}

@media (max-width: 560px) {
  .star-dashboard-card {
    padding: 12px;
  }

  .star-dashboard-grid {
    grid-template-columns: minmax(0, 1fr) minmax(104px, .42fr);
    gap: 9px;
  }

  .star-identity-panel,
  .star-balance-block {
    padding: 12px;
    border-radius: 18px;
  }

  .star-balance-line strong,
  .star-balance-block strong {
    font-size: clamp(1.85rem, 11vw, 2.45rem);
  }

  .star-goal-panel {
    padding: 11px;
    border-radius: 18px;
  }

  .star-goal-controls {
    grid-template-columns: 1fr;
  }

  .star-goal-bonus {
    grid-template-columns: 1fr;
  }

  .star-goal-bonus button {
    width: 100%;
  }

  .star-ranking-card {
    padding: 12px;
  }

  .star-ranking-head {
    flex-direction: row;
    align-items: center;
  }

  .star-ranking-head .avatar-page-lead {
    display: none;
  }

  .star-ranking-tabs button {
    min-height: 32px;
    font-size: 0.78rem;
  }

  .my-star-rank {
    padding: 10px;
  }

  .my-rank-value {
    min-width: 54px;
    font-size: 1.25rem;
  }

  .star-rank-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    padding: 9px;
  }

  .star-rank-place {
    width: 30px;
    height: 30px;
  }

  .star-rank-score {
    font-size: 0.68rem;
  }

  .star-rank-score strong {
    font-size: 0.94rem;
  }
}


/* uiuxhotfix53: hymn lyrics/image mode and offline-resilient bottom nav hardening. */
.bottom-tabs {
  contain: layout paint !important;
}
.bottom-tabs button {
  box-sizing: border-box !important;
}
.bottom-tabs .nav-icon,
.bottom-tabs .nav-icon svg {
  visibility: visible !important;
}
.hymn-reader-panel .hymn-image-wrap[hidden],
.hymn-reader-panel .hymn-lyrics-wrap[hidden] {
  display: none !important;
}
.hymn-reader-panel .hymn-lyrics-wrap {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 22px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  background: #11100e;
  color: #f6ead7;
}
.hymn-lyrics-title {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: -22px -18px 18px;
  padding: 15px 18px 12px;
  background: color-mix(in srgb, #11100e 94%, transparent);
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -.03em;
}
.hymn-lyrics-body {
  max-width: 640px;
  margin: 0 auto;
  font-size: clamp(18px, 4.8vw, 23px);
  line-height: 1.85;
  letter-spacing: -.025em;
  word-break: keep-all;
}
.hymn-lyrics-body p {
  margin: 0 0 0.72em;
}

.hymn-lyrics-stanza {
  margin: 0 0 1.35em;
  padding: 0 0 1.05em;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.hymn-lyrics-stanza:last-child {
  border-bottom: 0;
}
.hymn-lyrics-stanza-label {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin: 0 0 .45em;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(246,234,215,.12);
  color: #f4d69d;
  font-size: .74em;
  font-weight: 900;
  letter-spacing: -.02em;
}
.hymn-lyrics-stanza-label.is-chorus {
  color: #f9e8b9;
  background: rgba(240,191,92,.18);
}
.hymn-lyrics-empty {
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 18px;
  background: rgba(255,255,255,.055);
  color: #eadfca;
  font-size: .95rem;
  line-height: 1.55;
}
.hymn-lyrics-empty span {
  color: rgba(234,223,202,.76);
}
.hymn-reader-nav {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 4px !important;
  padding: 8px 8px calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
}
.hymn-reader-nav-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hymn-toggle-mode-btn {
  background: #2b2317 !important;
  color: #ffe2a8 !important;
}
.hymn-toggle-mode-btn.is-lyrics-mode {
  background: #223023 !important;
  color: #c8f2c7 !important;
}
@media (max-width: 420px) {
  .hymn-reader-nav-btn {
    min-height: 40px !important;
    border-radius: 11px !important;
    font-size: .86rem !important;
  }
  .hymn-reader-panel .hymn-lyrics-wrap {
    padding: 18px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .hymn-lyrics-title {
    margin: -18px -14px 16px;
    padding: 13px 14px 10px;
  }
}

/* uiuxhotfix59: OSMD MusicXML score mode is responsive and wraps systems to the available screen width. */
.hymn-reader-panel .hymn-score-wrap[hidden] {
  display: none !important;
}
.hymn-reader-panel .hymn-score-wrap {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 18px 12px calc(18px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  background: #11100e;
  color: #f7ead7;
}
.hymn-score-title {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: -18px -12px 14px;
  padding: 14px 14px 11px;
  background: color-mix(in srgb, #11100e 94%, transparent);
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -.03em;
}
.hymn-score-body {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}
.hymn-score-meta,
.hymn-score-note {
  margin: 8px auto 10px;
  color: rgba(247,234,215,.68);
  font-size: .82rem;
  line-height: 1.5;
  text-align: center;
}
.hymn-score-rendered {
  width: 100%;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  overflow-x: hidden;
  overflow-y: visible;
  border-radius: 18px;
  background: #fffdf8;
  box-shadow: 0 16px 42px rgba(0,0,0,.24);
}
.hymn-score-osmd-frame {
  padding: clamp(6px, 2.2vw, 12px);
}
.hymn-score-osmd {
  width: 100%;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  min-width: 0;
  min-height: 220px;
  overflow-x: hidden;
  overflow-y: visible;
  color: #26211b;
  background: #fffdf8;
}
.hymn-score-osmd > div,
.hymn-score-osmd svg {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}
.hymn-score-osmd svg {
  display: block;
  width: 100% !important;
  height: auto !important;
}
.hymn-score-loading {
  display: grid;
  min-height: 180px;
  place-items: center;
  color: #5d5145;
  font-size: .92rem;
  font-weight: 800;
}
.hymn-score-svg {
  display: block;
  width: 100%;
  height: auto;
  min-width: 680px;
  font-family: ui-serif, Georgia, 'Times New Roman', serif;
}
.hymn-score-clef {
  font-size: 33px;
  fill: #2b241e;
}
.hymn-score-time {
  font-size: 13px;
  font-weight: 800;
  fill: #2b241e;
  text-anchor: middle;
}
.hymn-score-accidental {
  font-size: 13px;
  fill: #2b241e;
  font-weight: 700;
}
.hymn-score-lyric {
  font-size: 9px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.hymn-score-measure-no {
  font-size: 8px;
  fill: #8a7a67;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.hymn-score-empty {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 18px;
  background: rgba(255,255,255,.055);
  color: #eadfca;
  font-size: .95rem;
  line-height: 1.55;
}
.hymn-score-empty span {
  color: rgba(234,223,202,.76);
}
.hymn-score-fallback-btn {
  justify-self: start;
  border: 0;
  border-radius: 999px;
  padding: 9px 13px;
  background: #f3d495;
  color: #261b0f;
  font-weight: 900;
}
.hymn-toggle-mode-btn.is-score-mode {
  background: #203044 !important;
  color: #cfe7ff !important;
}
.hymn-toggle-mode-btn.is-image-mode {
  background: #2b2317 !important;
  color: #ffe2a8 !important;
}
@media (max-width: 420px) {
  .hymn-score-svg {
    min-width: 0;
  }
  .hymn-score-osmd {
    min-width: 0;
  }
  .hymn-score-osmd-frame {
    padding: 6px;
  }
  .hymn-reader-panel .hymn-score-wrap {
    padding: 16px 10px calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .hymn-score-title {
    margin: -16px -10px 12px;
    padding: 12px 12px 10px;
  }
}

/* uiuxhotfix59: lightweight Web Audio playback controls for MusicXML hymn scores. */
.hymn-score-player {
  display: grid;
  gap: 10px;
  margin: 10px auto 14px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(255,255,255,.07);
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
}
.hymn-score-player-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.hymn-score-player-btn {
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  padding: 8px 13px;
  background: rgba(255,255,255,.13);
  color: #f7ead7;
  font-weight: 900;
  letter-spacing: -.02em;
}
.hymn-score-player-btn.is-primary {
  background: #f3d495;
  color: #261b0f;
}
.hymn-score-player-btn:disabled {
  opacity: .45;
}
.hymn-score-player-field {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  color: rgba(247,234,215,.82);
  font-size: .82rem;
  font-weight: 800;
}
.hymn-score-player-field select {
  min-height: 28px;
  max-width: min(52vw, 220px);
  border: 0;
  border-radius: 999px;
  padding: 4px 8px;
  background: #fff8e9;
  color: #291f14;
  font-weight: 900;
}
.hymn-score-player-progress {
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
}
.hymn-score-player-progress span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: #f3d495;
  transition: width .16s linear;
}
.hymn-score-player-status {
  color: rgba(247,234,215,.72);
  font-size: .8rem;
  line-height: 1.45;
  text-align: center;
}
.hymn-score-player[data-state="playing"] .hymn-score-player-status {
  color: #ffe2a8;
}
@media (max-width: 420px) {
  .hymn-score-player {
    padding: 10px;
    border-radius: 16px;
  }
  .hymn-score-player-row {
    justify-content: stretch;
  }
  .hymn-score-player-btn,
  .hymn-score-player-field {
    flex: 1 1 44%;
    justify-content: center;
  }
  .hymn-score-player-field select {
    max-width: 100%;
  }
}

/* uiuxhotfix60: modern hymn UX/UI refresh with search, title cards, segmented modes, and reader header. */
:root {
  --hymn-bg: radial-gradient(circle at top left, rgba(214,184,111,.20), transparent 34%), linear-gradient(180deg, #15120f 0%, #070707 100%);
  --hymn-card: rgba(255,255,255,.075);
  --hymn-card-strong: rgba(255,255,255,.105);
  --hymn-line: rgba(255,255,255,.12);
  --hymn-gold: #f0c96d;
  --hymn-gold-2: #ffe4a7;
  --hymn-ink: #24190c;
  --hymn-muted: rgba(247,234,215,.68);
}
body.hymn-active .content {
  background: var(--hymn-bg) !important;
}
.hymn-list-panel {
  max-width: 980px;
  margin: 0 auto;
  padding: 14px 12px calc(78px + env(safe-area-inset-bottom, 0px));
}
.hymn-modern-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  padding: 18px !important;
  border: 1px solid rgba(240,201,109,.22) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 85% 15%, rgba(240,201,109,.22), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.045)) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.22);
}
.hymn-modern-hero::after {
  content: '♪';
  position: absolute;
  right: 22px;
  bottom: -18px;
  font-size: 96px;
  line-height: 1;
  color: rgba(240,201,109,.10);
  pointer-events: none;
}
.hymn-modern-hero-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.hymn-eyebrow {
  margin-bottom: 6px;
  color: var(--hymn-gold-2);
  font-size: .72rem;
  font-weight: 1000;
  letter-spacing: .16em;
}
.hymn-modern-title {
  color: #fff7e9;
  font-size: clamp(1.55rem, 6vw, 2.35rem);
  font-weight: 1000;
  line-height: 1.05;
  letter-spacing: -.055em;
}
.hymn-modern-status {
  margin-top: 8px;
  color: var(--hymn-muted);
  font-size: .94rem;
  font-weight: 760;
  line-height: 1.45;
  word-break: keep-all;
}
.hymn-control-card,
.hymn-index-card {
  border: 1px solid var(--hymn-line) !important;
  border-radius: 24px !important;
  background: var(--hymn-card) !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.18);
  backdrop-filter: blur(16px);
}
.hymn-modern-search {
  grid-template-columns: minmax(74px, 92px) minmax(0, 1fr) minmax(76px, 96px) !important;
  gap: 8px !important;
  margin-top: 0 !important;
}
.hymn-number-pill {
  display: flex !important;
  min-height: 48px;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border: 1px solid var(--hymn-line);
  border-radius: 18px;
  background: rgba(0,0,0,.18);
}
.hymn-number-pill span {
  color: var(--hymn-gold-2) !important;
  font-size: .78rem !important;
  font-weight: 1000;
}
.hymn-number-pill input {
  height: 34px !important;
  border: 0 !important;
  background: transparent !important;
  color: #fff7e9 !important;
  font-size: 1.1rem;
  font-weight: 1000;
  text-align: center;
}
.hymn-search-label {
  display: block;
  min-width: 0;
}
.hymn-search-label input {
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  border: 1px solid var(--hymn-line);
  border-radius: 18px;
  padding: 0 14px 0 42px;
  background: rgba(0,0,0,.20);
  color: #fff7e9;
  font-weight: 850;
  letter-spacing: -.02em;
  outline: none;
  background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffe4a7' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 14px center;
}
.hymn-search-label input::placeholder {
  color: rgba(247,234,215,.48);
}
.hymn-search-label input:focus,
.hymn-number-pill:focus-within {
  border-color: rgba(240,201,109,.58);
  box-shadow: 0 0 0 3px rgba(240,201,109,.14);
}
.hymn-go-btn {
  min-height: 48px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #ffe6a8, #e5b94b) !important;
  color: var(--hymn-ink) !important;
  font-weight: 1000 !important;
}
.hymn-mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 12px 0 4px;
  padding: 5px;
  border: 1px solid var(--hymn-line);
  border-radius: 18px;
  background: rgba(0,0,0,.18);
}
.hymn-mode-tabs button {
  min-height: 38px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: rgba(247,234,215,.72);
  font-weight: 1000;
  letter-spacing: -.03em;
}
.hymn-mode-tabs button.is-active {
  background: linear-gradient(135deg, rgba(255,230,168,.98), rgba(229,185,75,.98));
  color: var(--hymn-ink);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.hymn-chip-section {
  margin-top: 14px !important;
}
.hymn-chip-row-title,
.hymn-index-title {
  color: #fff1d0 !important;
  font-weight: 1000 !important;
  letter-spacing: -.025em;
}
.hymn-chip-list {
  gap: 8px !important;
}
.hymn-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 36px !important;
  padding: 6px 11px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.085) !important;
  color: #fff7e9 !important;
}
.hymn-chip strong {
  color: var(--hymn-gold-2);
  font-weight: 1000;
  white-space: nowrap;
}
.hymn-chip span {
  overflow: hidden;
  max-width: min(46vw, 210px);
  color: rgba(247,234,215,.72);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hymn-favorite-btn.is-active,
.hymn-reader-favorite-btn.is-active {
  background: linear-gradient(135deg, #ffe6a8, #e5b94b) !important;
  color: var(--hymn-ink) !important;
}
.hymn-index-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.hymn-index-status {
  margin-top: 3px;
  color: var(--hymn-muted);
  font-size: .82rem;
  font-weight: 780;
}
.hymn-clear-search-btn {
  min-height: 32px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 5px 10px;
  background: rgba(255,255,255,.08);
  color: rgba(247,234,215,.78);
  font-size: .78rem;
  font-weight: 900;
}
.hymn-number-grid {
  grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)) !important;
  gap: 8px !important;
  max-height: min(54dvh, 520px) !important;
  padding: 2px 3px 4px 0 !important;
}
.hymn-number-btn {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 48px !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(255,255,255,.115) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.075) !important;
  color: #fff7e9 !important;
  text-align: left;
}
.hymn-number-btn.is-current {
  background: linear-gradient(135deg, rgba(255,230,168,.98), rgba(229,185,75,.98)) !important;
  color: var(--hymn-ink) !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.22);
}
.hymn-number-btn.is-favorite::after {
  position: absolute;
  top: 7px;
  right: 8px;
  margin: 0 !important;
  color: currentColor;
}
.hymn-number-main {
  display: inline-grid;
  min-width: 38px;
  min-height: 32px;
  place-items: center;
  border-radius: 12px;
  background: rgba(0,0,0,.20);
  color: var(--hymn-gold-2);
  font-size: .98rem;
  font-weight: 1000;
}
.hymn-number-btn.is-current .hymn-number-main {
  background: rgba(36,25,12,.16);
  color: var(--hymn-ink);
}
.hymn-number-title {
  overflow: hidden;
  padding-right: 8px;
  color: inherit;
  font-size: .82rem;
  font-weight: 880;
  letter-spacing: -.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hymn-search-empty {
  grid-column: 1 / -1;
  display: grid;
  gap: 5px;
  padding: 22px 14px;
  border: 1px dashed rgba(255,255,255,.16);
  border-radius: 18px;
  color: #fff7e9;
  text-align: center;
}
.hymn-search-empty span {
  color: var(--hymn-muted);
  font-size: .9rem;
}
body.hymn-reader-mode .app-shell,
body.hymn-reader-mode .content,
.hymn-reader-panel {
  background: #090806 !important;
}
.hymn-reader-panel {
  color: #fff7e9;
}
.hymn-reader-header {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 9px;
  align-items: center;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 8px;
  border-bottom: 1px solid rgba(255,255,255,.09);
  background: rgba(9,8,6,.88);
  backdrop-filter: blur(18px);
}
.hymn-reader-title-block {
  min-width: 0;
  text-align: center;
}
.hymn-reader-title {
  overflow: hidden;
  color: #fff7e9;
  font-size: clamp(1rem, 4.5vw, 1.28rem);
  font-weight: 1000;
  letter-spacing: -.045em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hymn-reader-subtitle {
  margin-top: 2px;
  color: var(--hymn-muted);
  font-size: .78rem;
  font-weight: 850;
}
.hymn-reader-icon-btn {
  min-width: 0;
  min-height: 42px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 15px;
  background: rgba(255,255,255,.08);
  color: #fff1d0;
  font-size: 1.35rem;
  font-weight: 1000;
}
.hymn-reader-favorite-btn {
  font-size: 1.08rem;
}
.hymn-reader-mode-tabs {
  flex: 0 0 auto;
  margin: 0;
  padding: 7px 12px;
  border: 0;
  border-radius: 0;
  background: rgba(9,8,6,.92);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.hymn-reader-mode-tabs button {
  min-height: 34px;
}
.hymn-reader-panel .hymn-image-wrap,
.hymn-reader-panel .hymn-lyrics-wrap,
.hymn-reader-panel .hymn-score-wrap {
  background:
    radial-gradient(circle at top right, rgba(240,201,109,.12), transparent 32%),
    #11100e !important;
}
.hymn-reader-panel .hymn-image-wrap {
  padding: 10px;
  box-sizing: border-box;
}
.hymn-reader-panel #hymnImage {
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
}
.hymn-lyrics-title,
.hymn-score-title {
  background: rgba(17,16,14,.86) !important;
  backdrop-filter: blur(14px);
}
.hymn-reader-nav {
  background: rgba(9,8,6,.94) !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(18px);
}
.hymn-reader-nav-btn {
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.075) !important;
  color: #fff1d0 !important;
}
.hymn-toggle-mode-btn.is-image-mode,
.hymn-toggle-mode-btn.is-score-mode,
.hymn-toggle-mode-btn.is-lyrics-mode {
  background: linear-gradient(135deg, #ffe6a8, #e5b94b) !important;
  color: var(--hymn-ink) !important;
}
.hymn-score-player {
  border-color: rgba(240,201,109,.18) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.055)) !important;
}
.hymn-score-player-btn,
.hymn-score-player-field {
  border: 1px solid rgba(255,255,255,.10) !important;
}
.hymn-score-player-btn.is-primary {
  background: linear-gradient(135deg, #ffe6a8, #e5b94b) !important;
  color: var(--hymn-ink) !important;
}
[data-theme="light"] .hymn-list-panel,
[data-theme="light"] .hymn-reader-panel {
  color-scheme: light;
}
@media (max-width: 560px) {
  .hymn-list-panel {
    padding-inline: 10px;
  }
  .hymn-modern-hero {
    align-items: stretch;
    padding: 16px !important;
    border-radius: 22px !important;
  }
  .hymn-modern-hero .hymn-favorite-btn {
    min-width: 78px;
    align-self: flex-start;
    padding-inline: 10px !important;
  }
  .hymn-modern-search {
    grid-template-columns: 78px minmax(0, 1fr) !important;
  }
  .hymn-go-btn {
    grid-column: 1 / -1;
  }
  .hymn-number-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-height: min(50dvh, 430px) !important;
  }
  .hymn-number-btn {
    min-height: 54px !important;
    grid-template-columns: auto minmax(0, 1fr);
  }
  .hymn-number-title {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .hymn-reader-header {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    padding-inline: 9px;
  }
  .hymn-reader-mode-tabs {
    padding-inline: 9px;
  }
  .hymn-chip span {
    max-width: 42vw;
  }
}
@media (max-width: 370px) {
  .hymn-number-grid {
    grid-template-columns: 1fr !important;
  }
}

/* uiuxhotfix61: Bible position restore, verse count badge, and hymn UX hardening. */
.title-block {
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 4px;
}
.reference-btn {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.verse-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 21px;
  padding: 2px 8px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  background: rgba(0,0,0,.12);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: -.02em;
  opacity: .9;
}
.verse-count-badge[hidden] {
  display: none !important;
}
.hymn-range-chips {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 0 0 10px;
  scrollbar-width: thin;
}
.hymn-range-chips button {
  flex: 0 0 auto;
  min-height: 32px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 5px 11px;
  background: rgba(255,255,255,.07);
  color: rgba(247,234,215,.74);
  font-size: .8rem;
  font-weight: 950;
}
.hymn-range-chips button.is-active {
  border-color: rgba(240,201,109,.52);
  background: linear-gradient(135deg, #ffe6a8, #e5b94b);
  color: var(--hymn-ink);
}
.hymn-reader-nav {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.hymn-reader-nav-btn:nth-child(2) {
  background: linear-gradient(135deg, rgba(255,230,168,.98), rgba(229,185,75,.98)) !important;
  color: var(--hymn-ink) !important;
}
@media (max-width: 430px) {
  .verse-count-badge {
    min-height: 19px;
    padding: 1px 7px;
    font-size: 10.5px;
  }
  .hymn-range-chips {
    margin-inline: -2px;
  }
}
.title-block {
  grid-template-columns: minmax(0, auto) auto;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
  column-gap: 6px;
}
.title-block .reference-btn {
  width: auto;
  min-width: 0;
}

/* uiuxhotfix62/65: hymn score controls, readable star text, and bottom nav hardening retained. */
.hymn-score-title,
.hymn-lyrics-title {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  margin: 0 0 12px !important;
  border-radius: 16px !important;
}
.hymn-score-scale-field {
  background: rgba(255, 230, 168, .16) !important;
}
.hymn-score-scale-field select {
  min-width: 84px;
}
.hymn-score-osmd-frame {
  transition: padding .18s ease;
}
.star-alias-name,
#avatarAliasLabel,
#myStarRank,
#avatarStatus,
.star-profile-hint,
.star-dashboard-card .hint,
.star-ranking-card .hint {
  color: rgba(255, 247, 226, .92) !important;
}
.star-alias-name,
#avatarAliasLabel {
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
}
[data-theme="light"] .star-alias-name,
[data-theme="light"] #avatarAliasLabel,
[data-theme="light"] #myStarRank,
[data-theme="light"] #avatarStatus,
[data-theme="light"] .star-profile-hint,
[data-theme="light"] .star-dashboard-card .hint,
[data-theme="light"] .star-ranking-card .hint {
  color: #322719 !important;
  text-shadow: none;
}
.bottom-tabs {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  width: 100vw !important;
  max-width: none !important;
  min-height: calc(var(--bottom-nav-height, 66px) + env(safe-area-inset-bottom, 0px)) !important;
  padding: 7px max(8px, env(safe-area-inset-left, 0px)) calc(env(safe-area-inset-bottom, 0px) + 7px) max(8px, env(safe-area-inset-right, 0px)) !important;
  overflow: visible !important;
  contain: none !important;
}
.bottom-tabs button {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  width: 100% !important;
  min-height: 46px !important;
  height: 46px !important;
  overflow: hidden !important;
}
.bottom-tabs button::before,
.bottom-tabs button::after {
  content: none !important;
  display: none !important;
}
.bottom-tabs .nav-icon {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  flex: 0 0 22px !important;
  align-items: center !important;
  justify-content: center !important;
  color: currentColor !important;
  overflow: visible !important;
}
.bottom-tabs .nav-icon svg {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  overflow: visible !important;
}
.bottom-tabs .nav-label {
  display: block !important;
  line-height: 1 !important;
  color: currentColor !important;
}
@media (max-width: 420px) {
  .bottom-tabs {
    padding-left: max(4px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(4px, env(safe-area-inset-right, 0px)) !important;
  }
  .bottom-tabs button {
    min-height: 44px !important;
    height: 44px !important;
    font-size: 10px !important;
  }
  .bottom-tabs .nav-icon,
  .bottom-tabs .nav-icon svg {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
  }
}

/* uiuxhotfix63/65: fine-grained hymn score zoom control with +/- and range slider retained. */
.hymn-score-scale-control {
  display: grid;
  gap: 8px;
  width: min(100%, 620px);
  margin: 2px auto 0;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 230, 168, .20);
  background: rgba(255, 230, 168, .10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.hymn-score-scale-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgba(247,234,215,.90);
  font-size: .82rem;
  font-weight: 900;
}
.hymn-score-scale-value {
  min-width: 48px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #fff8e9;
  color: #291f14;
  font-size: .8rem;
  text-align: center;
  font-weight: 950;
}
.hymn-score-scale-actions {
  display: grid;
  grid-template-columns: 38px minmax(110px, 1fr) 38px auto;
  align-items: center;
  gap: 8px;
}
.hymn-score-scale-btn,
.hymn-score-scale-reset {
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: #fff4dd;
  font-weight: 950;
  box-shadow: 0 4px 14px rgba(0,0,0,.14);
}
.hymn-score-scale-btn {
  font-size: 1.15rem;
  line-height: 1;
}
.hymn-score-scale-btn:disabled {
  opacity: .45;
  box-shadow: none;
}
.hymn-score-scale-reset {
  padding: 0 12px;
  background: #f3d495;
  color: #261b0f;
  font-size: .82rem;
}
.hymn-score-scale-actions input[type="range"] {
  width: 100%;
  min-width: 0;
  accent-color: #f3d495;
}
@media (max-width: 420px) {
  .hymn-score-scale-control {
    padding: 9px 10px;
  }
  .hymn-score-scale-actions {
    grid-template-columns: 36px minmax(82px, 1fr) 36px;
  }
  .hymn-score-scale-reset {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* uiuxhotfix66: official hymnal subject table replaces keyword-based topic classification. */
.hymn-filter-block {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.hymn-filter-label {
  color: rgba(247,234,215,.78);
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: -.02em;
}
.hymn-range-chips,
.hymn-topic-chips {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 0 0 10px;
  scrollbar-width: thin;
}
.hymn-range-chips button,
.hymn-topic-chips button {
  flex: 0 0 auto;
  min-height: 32px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 5px 11px;
  background: rgba(255,255,255,.07);
  color: rgba(247,234,215,.76);
  font-size: .8rem;
  font-weight: 950;
  white-space: nowrap;
}
.hymn-range-chips button.is-active,
.hymn-topic-chips button.is-active {
  border-color: rgba(240,201,109,.56);
  background: linear-gradient(135deg, #ffe6a8, #e5b94b);
  color: var(--hymn-ink);
  box-shadow: 0 7px 18px rgba(229,185,75,.22);
}

.hymn-official-topic-filter {
  padding-top: 2px;
}
.hymn-topic-select {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(240,201,109,.28);
  border-radius: 14px;
  padding: 0 12px;
  background: rgba(25,20,16,.64);
  color: rgba(255,246,228,.95);
  font-size: .9rem;
  font-weight: 850;
  outline: none;
}
.hymn-topic-select:focus {
  border-color: rgba(240,201,109,.78);
  box-shadow: 0 0 0 3px rgba(240,201,109,.18);
}
.hymn-topic-help {
  color: rgba(247,234,215,.62);
  font-size: .74rem;
  line-height: 1.35;
}
.hymn-topic-chips button {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  min-height: 42px;
  border-radius: 14px;
}
.hymn-topic-chips button small {
  font-size: .66rem;
  font-weight: 800;
  opacity: .72;
}
.hymn-number-topic {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  padding: 2px 7px;
  background: rgba(240,201,109,.14);
  color: rgba(255,239,191,.96);
  font-size: .68rem;
  font-weight: 900;
  line-height: 1.25;
}

.hymn-transpose-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.hymn-transpose-btn,
.hymn-transpose-reset {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: .8rem;
  font-weight: 950;
  background: rgba(255,255,255,.13);
  color: #fff4dd;
  box-shadow: 0 4px 14px rgba(0,0,0,.14);
}
.hymn-transpose-reset {
  background: #f3d495;
  color: #261b0f;
}
.hymn-transpose-btn:disabled,
.hymn-transpose-reset:disabled {
  opacity: .45;
  box-shadow: none;
}
.hymn-score-player-field select[data-hymn-score-view],
.hymn-score-player-field select[data-hymn-transpose] {
  max-width: min(50vw, 170px);
}
@media (max-width: 430px) {
  .hymn-topic-chips,
  .hymn-range-chips {
    margin-inline: -2px;
  }
  .hymn-transpose-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
  .hymn-transpose-btn,
  .hymn-transpose-reset {
    padding-inline: 8px;
  }
}


/* uiuxhotfix70: remove duplicate hymn number/title from the score panel; reader header already shows it. */
.hymn-score-wrap .hymn-score-title {
  display: none !important;
}


/* uiuxhotfix70: score UI/UX audit - collapse advanced score controls and prioritize primary actions. */
.hymn-score-player-main {
  display: grid;
  grid-template-columns: minmax(96px, auto) minmax(86px, auto) minmax(170px, 1fr);
  gap: 8px;
  align-items: center;
}
.hymn-score-player-main .hymn-score-player-btn,
.hymn-score-player-main .hymn-score-player-field {
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}
.hymn-score-part-field select {
  max-width: min(54vw, 260px);
}
.hymn-score-advanced {
  width: 100%;
  border: 1px solid rgba(255, 230, 168, .18);
  border-radius: 16px;
  background: rgba(255, 255, 255, .055);
  overflow: hidden;
}
.hymn-score-advanced summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 9px 12px;
  cursor: pointer;
  list-style: none;
  color: #fff4dd;
  font-weight: 950;
  letter-spacing: -.02em;
  user-select: none;
}
.hymn-score-advanced summary::-webkit-details-marker {
  display: none;
}
.hymn-score-advanced summary::after {
  content: '펼치기';
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: rgba(255,244,221,.84);
  font-size: .74rem;
  font-weight: 900;
}
.hymn-score-advanced[open] summary::after {
  content: '접기';
  background: #f3d495;
  color: #261b0f;
}
.hymn-score-advanced summary small {
  margin-left: auto;
  color: rgba(247,234,215,.62);
  font-size: .76rem;
  font-weight: 800;
}
.hymn-score-advanced-body {
  display: grid;
  gap: 10px;
  padding: 0 10px 12px;
}
.hymn-score-player-detail-row {
  justify-content: stretch;
}
.hymn-score-player-detail-row .hymn-score-player-field {
  flex: 1 1 180px;
  justify-content: space-between;
}
.hymn-score-player-detail-row .hymn-score-player-field select {
  max-width: 160px;
}
.hymn-score-advanced:not([open]) + .hymn-score-player-progress {
  margin-top: 2px;
}
@media (max-width: 560px) {
  .hymn-score-player {
    gap: 8px;
    padding: 10px;
    border-radius: 16px;
  }
  .hymn-score-player-main {
    grid-template-columns: 1fr 1fr;
  }
  .hymn-score-part-field {
    grid-column: 1 / -1;
  }
  .hymn-score-part-field select {
    max-width: min(62vw, 260px);
  }
  .hymn-score-advanced summary {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .hymn-score-advanced summary small {
    order: 3;
    width: 100%;
    margin-left: 0;
  }
  .hymn-score-player-detail-row {
    display: grid;
    grid-template-columns: 1fr;
  }
  .hymn-score-player-detail-row .hymn-score-player-field select {
    max-width: min(58vw, 220px);
  }
}


/* uiuxhotfix73: simplify hymn topic UI and harden Korean score lyric rendering. */
.hymn-topic-select,
.hymn-topic-help {
  display: none !important;
}
.hymn-topic-chips {
  padding-bottom: 4px !important;
  scrollbar-width: none;
}
.hymn-topic-chips::-webkit-scrollbar {
  display: none;
}
.hymn-number-topic {
  display: none !important;
}
.hymn-score-osmd svg text {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif !important;
  text-rendering: geometricPrecision;
}
.hymn-score-osmd svg text tspan {
  font-family: inherit !important;
}


/* uiuxhotfix73: star board contrast/UX audit. Keep ranking names and owned-star values legible in both themes. */
.star-page-shell,
.star-view {
  color: var(--ink) !important;
}
.star-page-head .section-title,
.star-ranking-head .subsection-title,
.star-alias-name,
.star-rank-name,
.my-rank-value,
.star-balance-line strong,
.star-balance-block strong {
  color: var(--ink) !important;
}
.star-page-head .avatar-page-lead,
.star-profile-hint,
.star-ranking-head .avatar-page-lead,
.star-ranking-status,
.star-rank-meta,
.star-rank-score,
.star-card-label,
.my-rank-label,
.my-rank-meta,
.star-goal-select span,
.star-goal-bonus #goalBonusSummary {
  color: color-mix(in srgb, var(--ink) 76%, transparent) !important;
}
.star-dashboard-card,
.star-ranking-card {
  border-color: color-mix(in srgb, var(--line) 68%, transparent) !important;
}
.star-dashboard-grid {
  grid-template-columns: minmax(0, 1fr) minmax(150px, .34fr);
}
.star-balance-block {
  align-content: center;
  justify-items: start;
  text-align: left;
  gap: 8px;
  padding: 16px 18px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 230, 160, .58), transparent 48%),
    linear-gradient(145deg, rgba(248, 201, 86, .28), rgba(248, 201, 86, .08)) !important;
}
.star-balance-label {
  color: color-mix(in srgb, #7b4d09 86%, var(--ink)) !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  font-size: .82rem !important;
}
.star-balance-line {
  align-items: baseline;
  gap: 6px;
}
.star-balance-line strong,
.star-balance-block strong {
  font-size: clamp(1.82rem, 7.2vw, 2.72rem) !important;
  letter-spacing: -.05em;
}
.star-balance-unit {
  color: color-mix(in srgb, var(--ink) 78%, transparent) !important;
  font-size: .95rem;
  font-weight: 850;
}
.star-balance-icon {
  color: #c98205 !important;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.35));
}
.my-star-rank {
  color: var(--ink) !important;
}
.star-rank-row {
  background: color-mix(in srgb, var(--panel) 82%, var(--bg)) !important;
  border-color: color-mix(in srgb, var(--line) 75%, transparent) !important;
}
.star-rank-row.is-top {
  background:
    linear-gradient(90deg, rgba(245, 194, 93, .20), color-mix(in srgb, var(--panel) 80%, var(--bg))) !important;
}
.star-rank-row.is-me {
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 225, 151, .30), transparent 46%),
    color-mix(in srgb, rgba(245, 194, 93, .22) 55%, var(--panel)) !important;
}
.star-rank-name {
  font-weight: 950 !important;
  letter-spacing: -.02em;
}
.star-rank-score strong {
  color: #b87400 !important;
}
.star-ranking-tabs button {
  color: color-mix(in srgb, var(--ink) 76%, transparent) !important;
}
.star-ranking-tabs button.active {
  color: #2b1a05 !important;
  background: linear-gradient(180deg, #f8d879, #e7b94a) !important;
}
[data-theme="dark"] .star-dashboard-card,
[data-theme="dark"] .star-ranking-card {
  background:
    radial-gradient(circle at 88% 0%, rgba(245, 194, 93, .12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)) !important;
  border-color: rgba(255,255,255,.10) !important;
}
[data-theme="dark"] .star-identity-panel,
[data-theme="dark"] .star-balance-block,
[data-theme="dark"] .star-goal-panel,
[data-theme="dark"] .star-goal-select,
[data-theme="dark"] .star-goal-bonus {
  background: rgba(255,255,255,.065) !important;
  border-color: rgba(255,255,255,.12) !important;
}
[data-theme="dark"] .star-balance-block {
  background:
    radial-gradient(circle at 0% 0%, rgba(248, 201, 86, .22), transparent 52%),
    linear-gradient(145deg, rgba(248, 201, 86, .16), rgba(255,255,255,.055)) !important;
}
[data-theme="dark"] .star-balance-label,
[data-theme="dark"] .star-balance-unit,
[data-theme="dark"] .star-rank-meta,
[data-theme="dark"] .star-rank-score,
[data-theme="dark"] .star-card-label,
[data-theme="dark"] .my-rank-label,
[data-theme="dark"] .my-rank-meta,
[data-theme="dark"] .star-profile-hint,
[data-theme="dark"] .star-ranking-status {
  color: rgba(244, 239, 230, .82) !important;
}
[data-theme="dark"] .star-rank-row {
  background: rgba(255,255,255,.065) !important;
  border-color: rgba(255,255,255,.11) !important;
}
[data-theme="dark"] .star-rank-row.is-top {
  background: linear-gradient(90deg, rgba(245, 194, 93, .17), rgba(255,255,255,.07)) !important;
}
[data-theme="dark"] .star-rank-row.is-me {
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 225, 151, .18), transparent 46%),
    rgba(245, 194, 93, .12) !important;
}
[data-theme="dark"] .star-rank-score strong {
  color: #ffd56e !important;
}
[data-theme="dark"] .star-ranking-tabs button.active {
  color: #231600 !important;
}
@media (max-width: 560px) {
  .star-dashboard-grid {
    grid-template-columns: 1fr;
  }
  .star-balance-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
  }
  .star-balance-line strong,
  .star-balance-block strong {
    font-size: clamp(1.8rem, 9vw, 2.35rem) !important;
  }
  .star-rank-row {
    grid-template-columns: 34px minmax(0, 1fr) minmax(62px, auto);
  }
}

/* uiuxhotfix76: hymn list buttons flow by content width instead of fixed grid cells. */
.hymn-number-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  align-content: flex-start !important;
  align-items: flex-start !important;
  grid-template-columns: none !important;
  gap: 7px !important;
  padding: 2px 4px 6px 0 !important;
}
.hymn-number-btn {
  display: inline-flex !important;
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: 100% !important;
  grid-template-columns: none !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 38px !important;
  padding: 6px 9px !important;
  border-radius: 15px !important;
}
.hymn-number-main {
  flex: 0 0 auto !important;
  min-width: 30px !important;
  min-height: 28px !important;
  padding: 0 7px !important;
  border-radius: 11px !important;
  font-size: .9rem !important;
  line-height: 1 !important;
}
.hymn-number-title {
  flex: 1 1 auto !important;
  overflow: visible !important;
  max-width: min(68vw, 360px) !important;
  padding-right: 0 !important;
  color: inherit !important;
  font-size: .93rem !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
  line-height: 1.22 !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}
.hymn-number-btn.is-favorite {
  padding-right: 26px !important;
}
.hymn-number-btn.is-favorite::after {
  top: 50% !important;
  right: 8px !important;
  transform: translateY(-50%) !important;
}
@media (max-width: 560px) {
  .hymn-number-grid {
    gap: 6px !important;
  }
  .hymn-number-btn {
    min-height: 36px !important;
    padding: 6px 8px !important;
    border-radius: 14px !important;
  }
  .hymn-number-main {
    min-width: 28px !important;
    min-height: 26px !important;
    font-size: .86rem !important;
  }
  .hymn-number-title {
    max-width: min(70vw, 300px) !important;
    font-size: .9rem !important;
  }
}


/* uiuxhotfix78: robust mobile bottom tab layout with monochrome inline SVG icons only. */
.bottom-tabs {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 90 !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 0 !important;
  width: min(760px, 100vw) !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 6px max(8px, env(safe-area-inset-left, 0px)) calc(env(safe-area-inset-bottom, 0px) + 7px) max(8px, env(safe-area-inset-right, 0px)) !important;
  min-height: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box !important;
  background: linear-gradient(to top, rgba(0,0,0,.98), rgba(0,0,0,.86)) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 -14px 32px rgba(0,0,0,.35) !important;
}
.bottom-tabs button {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  width: 100% !important;
  min-height: 48px !important;
  height: 48px !important;
  padding: 3px 0 4px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: #b8b0a4 !important;
  line-height: 1 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}
.bottom-tabs button::before {
  content: none !important;
  display: block !important;
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px !important;
  color: currentColor !important;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, sans-serif !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 22px !important;
  text-align: center !important;
  opacity: .96 !important;
}
.bottom-tabs .nav-icon {
  display: none !important;
}
.bottom-tabs .nav-label {
  display: block !important;
  max-width: 100% !important;
  color: currentColor !important;
  font-size: 10.8px !important;
  font-weight: 850 !important;
  letter-spacing: -.04em !important;
  line-height: 1 !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}
.bottom-tabs button.active-tab,
.bottom-tabs button[aria-expanded="true"] {
  background: rgba(255,255,255,.10) !important;
  color: #ffe6a8 !important;
}
.bottom-tabs button.active-tab::after,
.bottom-tabs button[aria-expanded="true"]::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 4px !important;
  width: 13px !important;
  height: 2px !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background: #f1c75a !important;
}
.content {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 78px) !important;
}
body.hymn-reader-mode .bottom-tabs {
  display: none !important;
}
@media (max-width: 420px) {
  .bottom-tabs {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .bottom-tabs button::before {
    font-size: 17px !important;
  }
  .bottom-tabs .nav-label {
    font-size: 10px !important;
  }
}
[data-theme="light"] .bottom-tabs {
  background: linear-gradient(to top, rgba(255,250,240,.98), rgba(255,250,240,.90)) !important;
  border-top-color: rgba(95,73,42,.16) !important;
  box-shadow: 0 -12px 28px rgba(95,73,42,.10) !important;
}
[data-theme="light"] .bottom-tabs button {
  color: #6f6252 !important;
}
[data-theme="light"] .bottom-tabs button.active-tab,
[data-theme="light"] .bottom-tabs button[aria-expanded="true"] {
  background: #f0e2c8 !important;
  color: #2f2517 !important;
}

/* uiuxhotfix76: semantic six-tab bottom navigation repair.
   This overrides older five-column mobile rules and also supports a repaired
   stale DOM where app.js inserts the missing 스타 tab before 설정. */
body .bottom-tabs {
  display: grid !important;
  grid-template-columns: repeat(var(--bottom-nav-count, 6), minmax(0, 1fr)) !important;
  width: min(760px, 100vw) !important;
  max-width: 100vw !important;
  overflow: hidden !important;
}
body .bottom-tabs[data-nav-count="6"],
body .bottom-tabs:not([data-nav-count]) {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}
body .bottom-tabs button {
  min-width: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}
body .bottom-tabs button::before {
  content: none !important;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  line-height: 22px !important;
  text-align: center !important;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, sans-serif !important;
  font-size: 18px !important;
}
body .bottom-tabs .nav-icon {
  display: none !important;
}
body .bottom-tabs .nav-label {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

/* uiuxhotfix77: star/hymn/selector UX refinements */
.star-modern-hero {
  margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(255, 223, 126, 0.22), rgba(255, 255, 255, 0.04));
  border-color: rgba(255, 223, 126, 0.28);
}
.star-hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.star-profile-intro {
  margin-top: 8px;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.45;
  opacity: 0.88;
}
.star-profile-edit-panel {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(0, 0, 0, 0.56);
  backdrop-filter: blur(8px);
}
.star-profile-edit-panel[hidden],
.star-profile-edit-panel.is-hidden { display: none !important; }
.star-profile-edit-card {
  width: min(440px, 100%);
  margin: 0;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
}
.star-profile-edit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.star-profile-edit-card label {
  display: grid;
  gap: 6px;
  margin: 12px 0;
}
.star-profile-edit-card input,
.star-profile-edit-card textarea {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--control-bg, rgba(255, 255, 255, 0.06));
  color: var(--ink);
  padding: 12px 14px;
  font: inherit;
}
.avatar-page-shell .avatar-page-lead { display: none; }

/* Remove hymnal favorites from UI while leaving old local data harmless. */
#hymnFavoriteBtn,
#hymnFavoriteList,
#hymnReaderFavoriteBtn,
.hymn-reader-favorite-btn,
.hymn-number-btn.is-favorite::after { display: none !important; }
.hymn-modern-hero .hymn-modern-hero-copy { max-width: 100%; }

/* Bible selector: book first, then a dedicated chapter picker dialog. */
.selector-book-only {
  grid-template-columns: 1fr !important;
}
.selector-book-only .legacy-chapter-section { display: none !important; }
.selector-panel-title {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}
.selector-book-only .book-grid {
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)) !important;
  max-height: min(58vh, 520px);
  overflow: auto;
  padding-right: 4px;
}
.selector-book-only .book-grid button {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 8px 10px;
  text-align: left;
  border-radius: 16px;
}
.book-grid-abbr {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 30px;
  border-radius: 12px;
  background: rgba(255, 223, 126, 0.16);
  color: var(--accent-strong, #f2c94c);
  font-weight: 900;
}
.book-grid-name {
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.2;
}
.chapter-picker-panel {
  position: fixed;
  inset: auto 16px 16px 16px;
  z-index: 95;
  max-width: 720px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface-strong, #1b1b1b);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.45);
  padding: 16px;
}
.chapter-picker-panel[hidden],
.chapter-picker-panel.is-hidden { display: none !important; }
.chapter-picker-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.chapter-picker-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)) !important;
  gap: 8px;
  max-height: min(48vh, 420px);
  overflow: auto;
}
.chapter-picker-grid button {
  min-height: 42px;
  border-radius: 14px;
  font-weight: 900;
}
@media (max-width: 560px) {
  .star-modern-hero { grid-template-columns: 1fr; }
  .star-hero-actions { justify-content: stretch; }
  .star-hero-actions > button { flex: 1 1 auto; }
  .selector-book-only .book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .chapter-picker-panel { inset: auto 8px 8px 8px; border-radius: 22px 22px 18px 18px; }
}

/* uiuxhotfix78: clean star card, compact hymn search, score controls, and monochrome nav icons. */
.star-modern-hero { display: none !important; }
.star-dashboard-card { padding: 14px !important; gap: 12px !important; }
.star-dashboard-grid { grid-template-columns: 1fr !important; }
.star-profile-summary-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 15px !important;
}
.star-profile-main { min-width: 0; display: grid; gap: 5px; }
.star-profile-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.star-alias-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.star-inline-edit-btn {
  appearance: none; border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
  background: rgba(255,255,255,.08); color: var(--ink); padding: 5px 9px;
  font-size: .74rem; font-weight: 900; line-height: 1; cursor: pointer; flex: 0 0 auto;
}
.star-profile-summary-panel .star-profile-intro {
  margin: 0 !important; font-size: .78rem !important; line-height: 1.35 !important;
  color: var(--muted-strong, var(--muted, #bdb3a6)) !important; opacity: .96 !important;
}
.star-profile-summary-panel .star-profile-hint { display: none !important; }
.star-profile-summary-panel .star-balance-block {
  min-width: 96px !important; padding: 10px 12px !important; border-radius: 18px !important;
  justify-items: end !important; text-align: right !important; gap: 4px !important;
}
.star-profile-summary-panel .star-balance-label { font-size: .67rem !important; }
.star-profile-summary-panel .star-balance-line strong { font-size: clamp(1.35rem, 5vw, 2rem) !important; }
@media (max-width: 520px) {
  .star-profile-summary-panel { grid-template-columns: 1fr auto !important; gap: 8px !important; padding: 12px !important; }
  .star-profile-summary-panel .star-balance-block { min-width: 82px !important; padding: 9px 10px !important; }
}
.hymn-search-only { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 8px !important; align-items: stretch !important; }
.hymn-search-only .hymn-search-label { min-width: 0 !important; }
.hymn-search-only .hymn-go-btn { min-width: 0 !important; width: auto !important; padding: 0 16px !important; border-radius: 18px !important; }
.hymn-number-label, .hymn-number-pill { display: none !important; }
.hymn-score-body { display: grid; gap: 10px; }
.hymn-score-player { padding: 10px !important; gap: 8px !important; }
.hymn-score-player-simple { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
.hymn-score-part-row {
  display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none;
  padding: 2px 1px 4px; white-space: nowrap;
}
.hymn-score-part-row::-webkit-scrollbar { display: none; }
.hymn-score-part-title { flex: 0 0 auto; font-size: .78rem; font-weight: 900; color: var(--muted-strong, var(--muted)); margin-right: 2px; }
.hymn-score-part-toggle {
  flex: 0 0 auto; border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  background: rgba(255,255,255,.08); color: var(--ink); padding: 7px 10px;
  font-size: .78rem; font-weight: 900; cursor: pointer;
}
.hymn-score-part-toggle.is-active { background: linear-gradient(135deg, #ffe599, #edc14b); color: #241800; border-color: rgba(237,193,75,.72); }
.hymn-score-advanced { margin-top: 0 !important; }
.hymn-score-advanced summary { min-height: 38px !important; padding: 8px 12px !important; border-radius: 16px !important; }
.hymn-score-advanced summary small { display: none !important; }
.compact-score-controls { display: grid !important; gap: 8px !important; padding-top: 8px !important; }
.hymn-score-inline-tools { display: flex; gap: 6px; align-items: center; overflow-x: auto; }
.hymn-score-inline-tools select, .hymn-score-inline-tools button,
.hymn-score-scale-actions.compact button {
  min-height: 34px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08); color: var(--ink); font-weight: 900; padding: 0 10px;
}
.hymn-score-scale-actions.compact { display: grid !important; grid-template-columns: auto 1fr auto auto auto !important; gap: 7px !important; align-items: center !important; }
.hymn-score-scale-actions.compact input[type="range"] { min-width: 92px; }
.hymn-score-scale-value { min-width: 44px; text-align: right; font-size: .76rem; font-weight: 900; color: var(--muted-strong, var(--muted)); }
.bottom-tabs button::before,
body .bottom-tabs button::before,
.bottom-tabs button::after,
body .bottom-tabs button::after { content: none !important; display: none !important; }
.bottom-tabs .nav-icon,
body .bottom-tabs .nav-icon { display: grid !important; place-items: center !important; width: 22px !important; height: 22px !important; color: currentColor !important; font-family: inherit !important; }
.bottom-tabs .nav-icon svg,
body .bottom-tabs .nav-icon svg { display: block !important; width: 22px !important; height: 22px !important; stroke: currentColor !important; fill: none !important; }
.hymn-score-osmd svg text,
.hymn-score-osmd svg text tspan {
  font-family: "Noto Sans CJK KR", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Nanum Gothic", system-ui, sans-serif !important;
}

/* uiuxhotfix79: screenshot-based mobile UX polish.
   - Keep the hymnal search submit button beside the input on mobile.
   - Remove the excessive blank paper area in hymn image reader mode.
   - Tighten high-density mobile cards without changing core app logic. */
.hymn-modern-search.hymn-search-only {
  grid-template-columns: minmax(0, 1fr) minmax(64px, 74px) !important;
  align-items: stretch !important;
}
.hymn-modern-search.hymn-search-only .hymn-search-label {
  min-width: 0 !important;
}
.hymn-modern-search.hymn-search-only .hymn-go-btn {
  grid-column: auto !important;
  justify-self: stretch !important;
  min-width: 64px !important;
  width: auto !important;
  padding-inline: 12px !important;
  white-space: nowrap !important;
}
@media (max-width: 560px) {
  .hymn-list-panel {
    padding-top: 10px !important;
  }
  .hymn-modern-hero {
    margin-bottom: 10px !important;
    padding: 14px !important;
  }
  .hymn-control-card,
  .hymn-index-card {
    padding: 12px !important;
  }
  .hymn-modern-search.hymn-search-only {
    grid-template-columns: minmax(0, 1fr) 68px !important;
    gap: 8px !important;
  }
  .hymn-modern-search.hymn-search-only .hymn-go-btn {
    grid-column: auto !important;
    min-height: 48px !important;
    border-radius: 18px !important;
  }
  .hymn-mode-tabs {
    margin-top: 10px !important;
  }
  .settings-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .settings-actions > button:only-child {
    grid-column: 1 / -1 !important;
  }
}
@media (max-width: 360px) {
  .hymn-modern-search.hymn-search-only {
    grid-template-columns: minmax(0, 1fr) 62px !important;
    gap: 6px !important;
  }
  .hymn-modern-search.hymn-search-only .hymn-go-btn {
    min-width: 62px !important;
    padding-inline: 8px !important;
  }
  .settings-actions {
    grid-template-columns: 1fr !important;
  }
}
.hymn-reader-panel .hymn-image-wrap {
  display: grid !important;
  align-content: start !important;
  justify-items: center !important;
  background:
    radial-gradient(circle at top right, rgba(240,201,109,.12), transparent 32%),
    #090806 !important;
}
.hymn-reader-panel #hymnImage {
  min-height: 0 !important;
  align-self: start !important;
  background: #f7f3e8 !important;
}
@media (max-width: 520px) {
  .star-profile-summary-panel {
    align-items: stretch !important;
  }
  .star-profile-summary-panel .star-balance-block {
    align-self: stretch !important;
  }
  .star-ranking-tabs button {
    min-height: 38px !important;
  }
  .bottom-tabs .nav-icon,
  body .bottom-tabs .nav-icon {
    width: 21px !important;
    height: 21px !important;
  }
  .bottom-tabs .nav-icon svg,
  body .bottom-tabs .nav-icon svg {
    width: 21px !important;
    height: 21px !important;
  }
}



/* uiuxhotfix81: second screenshot pass UX polish.
   - Keep the Bible search input and submit button on one row on mobile.
   - Make mobile search filters compact enough to stay visible without excessive vertical stacking.
   - Mildly enlarge only moderately landscape hymn images; very wide originals remain fully fitted by default.
   - Use two-column mobile action grids for settings and backup buttons where there is enough width. */
@media (max-width: 560px) {
  .search-box {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(58px, 70px) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  .search-box input {
    min-width: 0 !important;
  }
  .search-box #searchBtn {
    width: auto !important;
    min-width: 58px !important;
    padding-inline: 10px !important;
    white-space: nowrap !important;
  }
  .search-box #searchCancelBtn:not([hidden]) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
  .search-options {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .search-options select {
    min-height: 40px !important;
    padding: 8px 7px !important;
    border-radius: 12px !important;
    font-size: .78rem !important;
    font-weight: 850 !important;
    text-overflow: ellipsis !important;
  }
  .backup-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .backup-actions button,
  .settings-actions button {
    min-width: 0 !important;
    padding-inline: 8px !important;
  }
  .hymn-reader-panel #hymnImage[data-auto-landscape-zoom="true"] {
    cursor: grab;
  }
}
@media (max-width: 360px) {
  .search-options,
  .backup-actions {
    grid-template-columns: 1fr !important;
  }
}


/* uiuxhotfix81: screenshot-driven third pass.
   - Make empty Bible search state useful instead of leaving a mostly blank panel.
   - Prevent hymn range/topic chips from appearing cut off on narrow phones.
   - Add visible image zoom controls for wide hymn scans and start zoomed images from the left edge. */
.search-empty-card {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  padding: 16px 15px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.072), rgba(255,255,255,.034));
  color: var(--text);
  box-shadow: 0 14px 28px rgba(0,0,0,.16);
}
.search-empty-card strong {
  font-size: .98rem;
  letter-spacing: -.03em;
}
.search-empty-card span {
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.45;
}
.hymn-image-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 7px 12px 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(9,8,6,.92);
}
.hymn-image-tools[hidden] {
  display: none !important;
}
.hymn-image-tool-btn {
  min-height: 34px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 13px;
  background: rgba(255,255,255,.075);
  color: #fff1d0;
  font-weight: 950;
  letter-spacing: -.02em;
}
.hymn-image-tool-btn.is-primary {
  background: linear-gradient(135deg, #ffe6a8, #e5b94b);
  color: var(--hymn-ink);
  border-color: rgba(240,201,109,.58);
}
.hymn-image-tool-hint {
  grid-column: 1 / -1;
  color: rgba(247,234,215,.62);
  font-size: .72rem;
  line-height: 1.35;
  text-align: center;
}
.hymn-reader-panel .hymn-image-wrap.has-zoomed-image {
  justify-items: start !important;
}
.hymn-reader-panel .hymn-image-wrap.has-zoomed-image #hymnImage {
  max-width: none !important;
}
@media (max-width: 560px) {
  .hymn-range-chips,
  .hymn-topic-chips {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    padding-bottom: 2px !important;
    margin-inline: 0 !important;
  }
  .hymn-range-chips button {
    flex: 1 1 calc(25% - 7px) !important;
    min-width: 68px !important;
    padding-inline: 8px !important;
  }
  .hymn-topic-chips button {
    flex: 1 1 calc(50% - 7px) !important;
    min-width: 124px !important;
  }
  .hymn-image-tools {
    padding-inline: 10px;
  }
  .hymn-image-tool-hint {
    font-size: .7rem;
  }
}
@media (max-width: 360px) {
  .hymn-range-chips button,
  .hymn-topic-chips button {
    flex-basis: 100% !important;
  }
}


/* uiuxhotfix81 follow-up after screenshot review: the settings sheet shortcut pills should not be clipped horizontally on phones. */
@media (max-width: 560px) {
  #fontSheetPanel .view-action-pills {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    overflow: visible !important;
  }
  #fontSheetPanel .view-action-pills .pill-btn {
    width: 100% !important;
    min-width: 0 !important;
    padding-inline: 8px !important;
  }
}
@media (max-width: 360px) {
  #fontSheetPanel .view-action-pills {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* uiuxhotfix82: screenshot follow-up.
   - Put hymn score playback controls above the score and keep them compact/sticky so they no longer feel stranded at the bottom.
   - Reduce mobile control height while preserving play/stop, SATB selection, progress, and advanced tuning access. */
.hymn-score-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.hymn-score-body > .hymn-score-player {
  order: 0 !important;
}
.hymn-score-body > .hymn-score-rendered {
  order: 1 !important;
}
.hymn-reader-panel .hymn-score-wrap {
  padding-top: 10px !important;
}
.hymn-score-body > .hymn-score-player {
  position: sticky !important;
  top: 0 !important;
  z-index: 8 !important;
  width: min(100%, 980px) !important;
  box-sizing: border-box !important;
  margin: 0 auto 8px !important;
  padding: 8px 10px !important;
  border-radius: 18px !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.24) !important;
}
.hymn-score-player-simple {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}
.hymn-score-player-progress {
  height: 5px !important;
}
.hymn-score-player-status {
  min-height: 0 !important;
  margin-top: -2px !important;
  font-size: .76rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
@media (max-width: 560px) {
  .hymn-reader-panel .hymn-score-wrap {
    padding: 8px 8px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .hymn-score-body {
    gap: 8px !important;
  }
  .hymn-score-body > .hymn-score-player {
    padding: 7px 8px !important;
    gap: 6px !important;
    border-radius: 16px !important;
  }
  .hymn-score-player-btn {
    min-height: 34px !important;
    padding: 6px 10px !important;
    font-size: .83rem !important;
  }
  .hymn-score-part-row {
    gap: 5px !important;
    padding-bottom: 1px !important;
  }
  .hymn-score-part-title {
    font-size: .72rem !important;
  }
  .hymn-score-part-toggle {
    min-height: 30px !important;
    padding: 5px 8px !important;
    font-size: .72rem !important;
  }
  .hymn-score-advanced summary {
    min-height: 32px !important;
    padding: 6px 10px !important;
    font-size: .82rem !important;
  }
  .hymn-score-advanced summary::after {
    padding: 3px 7px !important;
    font-size: .68rem !important;
  }
  .compact-score-controls {
    gap: 6px !important;
    padding: 6px 8px 8px !important;
  }
  .hymn-score-inline-tools {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1.15fr) 48px 34px !important;
    gap: 5px !important;
    overflow: visible !important;
  }
  .hymn-score-inline-tools select,
  .hymn-score-inline-tools button,
  .hymn-score-scale-actions.compact button {
    min-height: 30px !important;
    min-width: 0 !important;
    padding-inline: 6px !important;
    font-size: .72rem !important;
  }
  .hymn-score-scale-actions.compact {
    grid-template-columns: 32px minmax(70px, 1fr) 32px 46px 38px !important;
    gap: 5px !important;
  }
  .hymn-score-scale-actions.compact input[type="range"] {
    min-width: 74px !important;
  }
  .hymn-score-scale-value {
    min-width: 38px !important;
    font-size: .68rem !important;
  }
  .hymn-score-player-progress {
    height: 4px !important;
  }
  .hymn-score-player-status {
    font-size: .7rem !important;
  }
  .hymn-score-osmd-frame {
    border-radius: 14px !important;
  }
}
@media (max-width: 360px) {
  .hymn-score-inline-tools {
    grid-template-columns: 1fr 32px 1fr 42px 32px !important;
  }
  .hymn-score-scale-actions.compact {
    grid-template-columns: 30px minmax(54px, 1fr) 30px 42px 34px !important;
  }
}


/* uiuxhotfix82 final score-player adjustment after screenshot: keep controls at the top, but do not overlay the score while scrolling. Put SATB/transpose/scale inside a drawer so the score is visible sooner. */
.hymn-score-body > .hymn-score-player {
  position: static !important;
  top: auto !important;
  background: linear-gradient(135deg, #29251f, #201d18) !important;
}
.hymn-score-tools-drawer {
  margin-top: 0 !important;
}
.hymn-score-tools-drawer .hymn-score-part-row {
  margin: 0 !important;
}
.hymn-score-tools-drawer:not([open]) + .hymn-score-player-progress {
  margin-top: 0 !important;
}
@media (max-width: 560px) {
  .hymn-score-body > .hymn-score-player {
    margin-bottom: 6px !important;
  }
  .hymn-score-tools-drawer:not([open]) {
    border-color: rgba(255,255,255,.09) !important;
    background: rgba(255,255,255,.05) !important;
  }
}


/* uiuxhotfix83: user-requested reading goal/ranking/hymn player layout. */
.reading-goal-stepper{display:grid;grid-template-columns:34px minmax(48px,1fr) 34px;align-items:center;gap:6px}.reading-goal-step-btn,.reading-goal-input{min-height:36px;border-radius:999px;border:1px solid color-mix(in srgb,var(--line) 72%,transparent);background:color-mix(in srgb,var(--panel) 78%,transparent);color:var(--ink);font-weight:900}.reading-goal-step-btn{padding:0;font-size:1.04rem;cursor:pointer}.reading-goal-input{width:100%;text-align:center;padding:0 6px;font-size:.98rem;appearance:textfield}.reading-goal-input::-webkit-outer-spin-button,.reading-goal-input::-webkit-inner-spin-button{appearance:none;margin:0}.star-rank-name-line{flex-wrap:wrap;row-gap:3px}.star-rank-intro{display:inline-flex;max-width:min(38vw,190px);min-width:0;padding:3px 8px;border-radius:999px;background:color-mix(in srgb,var(--line) 18%,transparent);color:color-mix(in srgb,var(--ink) 72%,transparent);font-size:.72rem;font-weight:750;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hymn-score-body{display:flex!important;flex-direction:column!important;gap:10px!important}.hymn-score-body>.hymn-score-rendered{order:1!important}.hymn-score-body>.hymn-score-player{order:2!important;position:static!important;top:auto!important;width:min(100%,980px)!important;margin:8px auto 0!important;padding:9px 10px!important;border-radius:18px!important;background:linear-gradient(135deg,#29251f,#201d18)!important;box-shadow:0 12px 34px rgba(0,0,0,.22)!important}.hymn-score-player-simple{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(78px,.72fr)!important;gap:8px!important}.hymn-score-detail-toggle[aria-expanded="true"]{background:rgba(255,229,153,.18)!important;border-color:rgba(255,229,153,.34)!important}.hymn-score-tools-drawer{margin-top:7px!important;border:0!important;background:transparent!important}.hymn-score-tools-drawer>summary.sr-only{display:none!important}.hymn-score-tools-drawer:not([open]){display:none!important}.hymn-score-tools-drawer[open]{display:block!important}.compact-score-controls{display:grid!important;gap:8px!important;padding:8px 0 0!important}.hymn-control-label{align-self:center;justify-self:end;color:var(--muted-strong,var(--muted));font-size:.76rem;font-weight:900;white-space:nowrap}.hymn-score-inline-tools{display:grid!important;grid-template-columns:auto minmax(68px,.75fr) auto minmax(74px,1fr) 34px 34px auto!important;align-items:center!important;gap:6px!important;overflow:visible!important}.hymn-score-inline-tools select,.hymn-score-inline-tools button,.hymn-score-scale-actions.compact button{min-height:34px!important;min-width:0!important;padding-inline:9px!important;border-radius:999px!important;font-weight:900!important}.hymn-score-scale-actions.compact{display:grid!important;grid-template-columns:auto 50px 34px minmax(92px,1fr) 34px auto!important;align-items:center!important;gap:7px!important}.hymn-score-scale-value{min-width:48px!important;text-align:center!important;font-size:.78rem!important;font-weight:950!important;color:var(--muted-strong,var(--muted))!important}@media(max-width:560px){.star-goal-controls{grid-template-columns:minmax(116px,.48fr) minmax(0,1fr)!important}.reading-goal-stepper{grid-template-columns:32px minmax(42px,1fr) 32px;gap:5px}.reading-goal-step-btn,.reading-goal-input{min-height:34px;font-size:.88rem}.star-rank-intro{max-width:44vw;font-size:.68rem}.hymn-score-body>.hymn-score-player{margin-top:7px!important;padding:8px!important;border-radius:16px!important}.hymn-score-player-simple{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(64px,.62fr)!important;gap:6px!important}.hymn-score-player-btn{min-height:34px!important;padding:6px 8px!important;font-size:.8rem!important}.hymn-score-inline-tools{grid-template-columns:auto minmax(58px,.78fr) auto minmax(62px,1fr) 30px 30px 42px!important;gap:5px!important}.hymn-score-inline-tools select,.hymn-score-inline-tools button,.hymn-score-scale-actions.compact button{min-height:30px!important;padding-inline:5px!important;font-size:.68rem!important}.hymn-control-label{font-size:.68rem!important}.hymn-score-scale-actions.compact{grid-template-columns:auto 42px 30px minmax(58px,1fr) 30px 42px!important;gap:5px!important}.hymn-score-scale-value{min-width:42px!important;font-size:.68rem!important}}@media(max-width:360px){.star-goal-controls{grid-template-columns:1fr!important}.hymn-score-inline-tools{grid-template-columns:auto minmax(52px,.72fr) auto minmax(54px,1fr) 28px 28px 38px!important}.hymn-score-scale-actions.compact{grid-template-columns:40px 28px minmax(52px,1fr) 28px 38px!important}}

/* uiuxhotfix84: screenshot/user-request follow-up.
   1) Highlighted Bible verse rows must keep identical grid, padding and text width.
   2) Touch swipe chapter navigation gets a very small transition.
   3) Hymn index range chips stay compact; official topic chips scroll horizontally. */
.verse-list,
.focused-verse-list {
  overflow-x: clip !important;
}
.verse-row,
.focused-verse-list .verse-row,
.verse-row.has-underline,
[data-theme="dark"] .verse-row.has-underline,
[data-theme="light"] .verse-row.has-underline {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  gap: 7px !important;
  padding: 3px 5px 3px 1px !important;
  border: 0 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
.verse-row > .verse-no,
.focused-verse-list .verse-row > .verse-no,
.verse-row.has-underline > .verse-no,
[data-theme="dark"] .verse-row.has-underline > .verse-no,
[data-theme="light"] .verse-row.has-underline > .verse-no {
  box-sizing: border-box !important;
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  padding: 6px 1px 0 0 !important;
  text-align: right !important;
  justify-self: stretch !important;
}
.verse-row > .verse-body,
.focused-verse-list .verse-row > .verse-body,
.verse-row.has-underline > .verse-body,
[data-theme="dark"] .verse-row.has-underline > .verse-body,
[data-theme="light"] .verse-row.has-underline > .verse-body {
  box-sizing: border-box !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.52 !important;
  letter-spacing: -.01em !important;
  word-break: keep-all !important;
}
.verse-row.has-underline .verse-text,
[data-theme="dark"] .verse-row.has-underline .verse-text,
[data-theme="light"] .verse-row.has-underline .verse-text {
  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
@media (max-width: 520px) {
  .verse-row,
  .focused-verse-list .verse-row,
  .verse-row.has-underline,
  [data-theme="dark"] .verse-row.has-underline,
  [data-theme="light"] .verse-row.has-underline {
    grid-template-columns: 24px minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 3px 5px 3px 1px !important;
  }
  .verse-row > .verse-no,
  .focused-verse-list .verse-row > .verse-no,
  .verse-row.has-underline > .verse-no,
  [data-theme="dark"] .verse-row.has-underline > .verse-no,
  [data-theme="light"] .verse-row.has-underline > .verse-no {
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    font-size: 12px !important;
  }
}
.verse-list.read-swipe-out-next,
.verse-list.read-swipe-out-prev,
.verse-list.read-swipe-in-next,
.verse-list.read-swipe-in-prev {
  will-change: transform, opacity;
  pointer-events: none;
}
.verse-list.read-swipe-out-next { animation: bibleChapterOutNext .14s ease both; }
.verse-list.read-swipe-out-prev { animation: bibleChapterOutPrev .14s ease both; }
.verse-list.read-swipe-in-next { animation: bibleChapterInNext .18s ease both; }
.verse-list.read-swipe-in-prev { animation: bibleChapterInPrev .18s ease both; }
@keyframes bibleChapterOutNext {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: .18; transform: translateX(-18px); }
}
@keyframes bibleChapterOutPrev {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: .18; transform: translateX(18px); }
}
@keyframes bibleChapterInNext {
  from { opacity: .18; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes bibleChapterInPrev {
  from { opacity: .18; transform: translateX(-18px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .verse-list.read-swipe-out-next,
  .verse-list.read-swipe-out-prev,
  .verse-list.read-swipe-in-next,
  .verse-list.read-swipe-in-prev {
    animation: none !important;
  }
}
.hymn-index-card .hymn-filter-block {
  gap: 5px !important;
  margin-top: 7px !important;
}
.hymn-index-card .hymn-filter-label {
  margin-bottom: 0 !important;
}
.hymn-index-card .hymn-range-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  overflow-x: visible !important;
  padding: 0 0 2px !important;
  margin-inline: 0 !important;
}
.hymn-index-card .hymn-range-chips button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 30px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  font-size: .78rem !important;
  line-height: 1.1 !important;
}
.hymn-index-card .hymn-topic-chips {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0 6px 6px 0 !important;
  margin-inline: 0 -4px !important;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hymn-index-card .hymn-topic-chips::-webkit-scrollbar {
  display: none;
}
.hymn-index-card .hymn-topic-chips button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 36px !important;
  padding: 5px 10px !important;
  border-radius: 13px !important;
  gap: 0 !important;
  scroll-snap-align: start;
}
.hymn-index-card .hymn-topic-chips button span {
  font-size: .78rem !important;
  line-height: 1.1 !important;
}
.hymn-index-card .hymn-topic-chips button small {
  font-size: .62rem !important;
  line-height: 1.1 !important;
}
@media (max-width: 560px) {
  .hymn-index-card .hymn-range-chips {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
  }
  .hymn-index-card .hymn-range-chips button {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    padding-inline: 9px !important;
  }
  .hymn-index-card .hymn-topic-chips {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
  }
  .hymn-index-card .hymn-topic-chips button {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    padding-inline: 9px !important;
  }
}
@media (max-width: 360px) {
  .hymn-index-card .hymn-range-chips button,
  .hymn-index-card .hymn-topic-chips button {
    flex-basis: auto !important;
  }
}

/* uiuxhotfix85: hymn score controls must be folded by default and compact when expanded.
   The prior grid stretched speed/key selects across the whole player width on tablet/desktop. */
.hymn-score-body > .hymn-score-player {
  max-width: min(980px, calc(100vw - 28px)) !important;
}
.hymn-score-player-simple {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(84px, .72fr) !important;
}
.hymn-score-tools-drawer:not([open]) {
  display: none !important;
}
.hymn-score-tools-drawer[open] {
  display: block !important;
}
.hymn-score-tools-drawer .compact-score-controls {
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}
.hymn-score-inline-tools {
  display: grid !important;
  grid-template-columns: auto 96px auto minmax(118px, 168px) 34px 34px auto !important;
  justify-content: start !important;
  align-items: center !important;
  column-gap: 7px !important;
  row-gap: 7px !important;
  overflow: visible !important;
}
.hymn-score-inline-tools select[data-hymn-speed],
.hymn-score-inline-tools select[data-hymn-transpose] {
  width: 100% !important;
  max-width: none !important;
}
.hymn-score-inline-tools button {
  width: auto !important;
}
.hymn-score-scale-actions.compact {
  display: grid !important;
  grid-template-columns: auto 54px 34px minmax(160px, 1fr) 34px auto !important;
  align-items: center !important;
  gap: 7px !important;
}
.hymn-score-scale-actions.compact input[type="range"] {
  min-width: 0 !important;
  width: 100% !important;
}
.hymn-score-scale-value {
  text-align: center !important;
  white-space: nowrap !important;
}
@media (max-width: 560px) {
  .hymn-score-body > .hymn-score-player {
    max-width: calc(100vw - 22px) !important;
  }
  .hymn-score-player-simple {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(66px, .62fr) !important;
  }
  .hymn-score-inline-tools {
    grid-template-columns: auto minmax(64px, 78px) auto minmax(76px, 1fr) 30px 30px 42px !important;
    gap: 5px !important;
  }
  .hymn-score-scale-actions.compact {
    grid-template-columns: auto 42px 30px minmax(72px, 1fr) 30px 42px !important;
    gap: 5px !important;
  }
}
@media (max-width: 360px) {
  .hymn-score-inline-tools {
    grid-template-columns: auto minmax(56px, 66px) auto minmax(58px, 1fr) 28px 28px 38px !important;
  }
  .hymn-score-scale-actions.compact {
    grid-template-columns: auto 38px 28px minmax(54px, 1fr) 28px 38px !important;
  }
}
/* uiuxhotfix85b: override older mobile rule that made the score "맞춤" button span the whole row. */
.hymn-score-scale-actions.compact .hymn-score-scale-reset,
.hymn-score-scale-actions.compact .hymn-score-scale-btn {
  grid-column: auto !important;
  width: auto !important;
}

/* uiuxhotfix86: user-reported mobile fixes after real-device review.
   - Both hymn range and official-topic filters must remain horizontal scrollers on narrow screens.
   - Bible verse highlight uses an absolute overlay so row/body widths never change on tap.
   - Long-press verse menu uses normal rounded-card corners instead of the legacy pill radius. */
.hymn-index-card .hymn-range-chips,
.hymn-index-card .hymn-topic-chips {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0 8px 7px 0 !important;
  margin: 0 -4px 0 0 !important;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hymn-index-card .hymn-range-chips::-webkit-scrollbar,
.hymn-index-card .hymn-topic-chips::-webkit-scrollbar {
  display: none !important;
}
.hymn-index-card .hymn-range-chips button,
.hymn-index-card .hymn-topic-chips button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  scroll-snap-align: start;
}
@media (max-width: 560px) {
  .hymn-index-card .hymn-range-chips,
  .hymn-index-card .hymn-topic-chips {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 7px !important;
  }
  .hymn-index-card .hymn-range-chips button,
  .hymn-index-card .hymn-topic-chips button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    scroll-snap-align: start;
  }
}
@media (max-width: 360px) {
  .hymn-index-card .hymn-range-chips button,
  .hymn-index-card .hymn-topic-chips button {
    flex-basis: auto !important;
  }
}
.verse-row,
.focused-verse-list .verse-row,
.verse-row.has-underline,
[data-theme="dark"] .verse-row.has-underline,
[data-theme="light"] .verse-row.has-underline {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  gap: 7px !important;
  padding: 3px 5px 3px 1px !important;
}
.verse-row::before,
.focused-verse-list .verse-row::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 7px;
  background: transparent;
  pointer-events: none;
  z-index: 0;
}
.verse-row.has-underline::before,
[data-theme="dark"] .verse-row.has-underline::before,
[data-theme="light"] .verse-row.has-underline::before {
  background: rgba(215, 189, 131, .18) !important;
}
[data-theme="light"] .verse-row.has-underline::before {
  background: rgba(47, 38, 26, .92) !important;
}
.verse-row > .verse-no,
.verse-row > .verse-body,
.verse-row > .verse-body > .verse-text,
.verse-row > .verse-body > .parallel-text,
.verse-row > .verse-body > .memo-mark,
.focused-verse-list .verse-row > .verse-no,
.focused-verse-list .verse-row > .verse-body {
  position: relative !important;
  z-index: 1 !important;
}
.verse-row > .verse-no,
.focused-verse-list .verse-row > .verse-no,
.verse-row.has-underline > .verse-no,
[data-theme="dark"] .verse-row.has-underline > .verse-no,
[data-theme="light"] .verse-row.has-underline > .verse-no {
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  padding: 6px 1px 0 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  justify-self: stretch !important;
  background: transparent !important;
  font-weight: 700 !important;
}
.verse-row > .verse-body,
.focused-verse-list .verse-row > .verse-body,
.verse-row.has-underline > .verse-body,
[data-theme="dark"] .verse-row.has-underline > .verse-body,
[data-theme="light"] .verse-row.has-underline > .verse-body {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-sizing: border-box !important;
}
.verse-row .verse-text,
.verse-row.has-underline .verse-text,
[data-theme="dark"] .verse-row.has-underline .verse-text,
[data-theme="light"] .verse-row.has-underline .verse-text {
  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  text-decoration: none !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
}
.verse-dialog {
  width: min(92vw, 520px) !important;
  max-height: min(82dvh, 620px) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  padding: 0 !important;
}
.verse-dialog form {
  max-height: min(82dvh, 620px) !important;
  overflow: auto !important;
  border-radius: 22px !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}
@media (max-width: 430px) {
  .verse-dialog {
    width: calc(100vw - 28px) !important;
    border-radius: 18px !important;
  }
  .verse-dialog form {
    border-radius: 18px !important;
    padding: 14px !important;
  }
  .dialog-actions.four-actions {
    gap: 7px !important;
  }
}


/* uiuxhotfix88: user follow-up.
   - Hymn result cards use the same compact chip shape as the recent-hymn list.
   - Dedicated/score lyrics get clean text panels with smaller, stable Korean typography.
   - Star daily goal is a compact single-line row and ranking is loaded on startup. */
.hymn-chip,
.hymn-number-grid .hymn-result-chip {
  min-height: 30px !important;
  padding: 5px 9px !important;
  gap: 5px !important;
  border-radius: 999px !important;
  font-size: .76rem !important;
  line-height: 1.15 !important;
}
.hymn-chip strong,
.hymn-number-grid .hymn-result-chip strong {
  font-size: .76rem !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}
.hymn-chip span,
.hymn-number-grid .hymn-result-chip span {
  max-width: min(42vw, 180px) !important;
  font-size: .76rem !important;
  line-height: 1.12 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.hymn-number-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  gap: 7px !important;
  grid-template-columns: none !important;
  max-height: min(54dvh, 520px) !important;
  overflow-y: auto !important;
  padding: 2px 3px 4px 0 !important;
}
.hymn-number-grid .hymn-result-chip,
.hymn-number-grid .hymn-number-btn {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 0 1 auto !important;
  align-items: center !important;
  text-align: left !important;
  background: rgba(255,255,255,.085) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #fff7e9 !important;
  box-shadow: none !important;
}
.hymn-number-grid .hymn-result-chip.is-current {
  background: linear-gradient(135deg, rgba(255,230,168,.98), rgba(229,185,75,.98)) !important;
  color: var(--hymn-ink) !important;
}
.hymn-number-grid .hymn-result-chip.is-current strong,
.hymn-number-grid .hymn-result-chip.is-current span {
  color: var(--hymn-ink) !important;
}
@media (max-width: 520px) {
  .hymn-chip,
  .hymn-number-grid .hymn-result-chip {
    min-height: 28px !important;
    padding: 4px 8px !important;
    font-size: .72rem !important;
  }
  .hymn-chip strong,
  .hymn-chip span,
  .hymn-number-grid .hymn-result-chip strong,
  .hymn-number-grid .hymn-result-chip span {
    font-size: .72rem !important;
  }
  .hymn-chip span,
  .hymn-number-grid .hymn-result-chip span {
    max-width: min(48vw, 170px) !important;
  }
}
.star-goal-panel.star-goal-panel-compact {
  padding: 8px 10px !important;
  gap: 0 !important;
}
.star-goal-compact-row {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto auto 34px !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
}
.star-goal-inline-label {
  white-space: nowrap !important;
  font-size: .68rem !important;
  letter-spacing: .04em !important;
}
.star-goal-panel-compact .star-goal-summary {
  margin: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--ink) !important;
  font-size: .88rem !important;
  line-height: 1.18 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}
.star-goal-panel-compact .star-goal-progress {
  display: none !important;
}
.star-goal-select-inline {
  display: inline-grid !important;
  grid-template-columns: auto auto !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.star-goal-select-inline > span {
  white-space: nowrap !important;
  font-size: .68rem !important;
  font-weight: 900 !important;
  color: var(--muted) !important;
}
.star-goal-panel-compact .reading-goal-stepper {
  grid-template-columns: 26px 38px 26px !important;
  gap: 4px !important;
}
.star-goal-panel-compact .reading-goal-step-btn,
.star-goal-panel-compact .reading-goal-input {
  min-height: 28px !important;
  height: 28px !important;
  font-size: .76rem !important;
}
.star-goal-panel-compact .star-goal-bonus-inline {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--panel) 56%, transparent) !important;
}
.star-goal-panel-compact .star-goal-bonus-inline #goalBonusSummary {
  max-width: 142px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
}
.star-goal-panel-compact .star-icon-action {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  font-size: .88rem !important;
}
@media (max-width: 560px) {
  .star-goal-compact-row {
    grid-template-columns: minmax(0, 1fr) auto 30px !important;
    row-gap: 5px !important;
  }
  .star-goal-inline-label {
    display: none !important;
  }
  .star-goal-panel-compact .star-goal-summary {
    font-size: .82rem !important;
  }
  .star-goal-select-inline {
    grid-column: 2;
    grid-row: 1;
  }
  .star-goal-bonus-inline {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    max-width: 100% !important;
  }
  .star-goal-panel-compact .star-goal-bonus-inline #goalBonusSummary {
    max-width: calc(100vw - 96px) !important;
  }
  .star-goal-panel-compact .star-icon-action {
    grid-column: 3;
    grid-row: 1;
  }
}
.hymn-reader-panel .hymn-lyrics-wrap,
.hymn-score-clean-lyrics {
  font-family: "Noto Sans CJK KR", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Nanum Gothic", system-ui, sans-serif !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
}
.hymn-score-clean-lyrics {
  width: min(100%, 980px);
  margin: 10px auto 0;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 18px;
  background: rgba(255,255,255,.055);
  color: #fff7e9;
}
.hymn-score-clean-lyrics-title {
  margin-bottom: 8px;
  color: var(--hymn-gold-2, #ffe4a7);
  font-size: .78rem;
  font-weight: 1000;
  letter-spacing: .08em;
}
.hymn-score-clean-lyrics .hymn-lyrics-stanza {
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.hymn-score-clean-lyrics .hymn-lyrics-stanza-label,
.hymn-reader-panel .hymn-lyrics-stanza-label {
  font-size: .78rem !important;
  line-height: 1.25 !important;
}
.hymn-score-clean-lyrics p,
.hymn-reader-panel .hymn-lyrics-body p {
  margin: 0 0 4px !important;
  font-size: clamp(.92rem, 3.4vw, 1.04rem) !important;
  line-height: 1.58 !important;
  letter-spacing: -.015em !important;
  white-space: normal !important;
}
@media (max-width: 560px) {
  .hymn-score-clean-lyrics {
    padding: 10px 12px !important;
    border-radius: 16px !important;
  }
  .hymn-score-clean-lyrics p,
  .hymn-reader-panel .hymn-lyrics-body p {
    font-size: .9rem !important;
    line-height: 1.54 !important;
  }
}
/* uiuxhotfix88b: keep mobile daily-goal panel to a single visible row. */
@media (max-width: 560px) {
  .star-goal-panel-compact .star-goal-bonus-inline {
    display: none !important;
  }
  .star-goal-compact-row {
    grid-template-columns: minmax(0, 1fr) auto 30px !important;
    row-gap: 0 !important;
  }
}


/* uiuxhotfix88: compact Bible book selector and stable hymn title-first search results. */
.selector-book-only .selector-panel-title { display: none !important; }
.selector-book-only .book-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)) !important;
  gap: 6px !important;
  align-items: stretch !important;
  max-height: min(58vh, 520px) !important;
  overflow: auto !important;
  padding: 2px 2px 8px !important;
}
.selector-book-only .book-grid button {
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 2px !important;
  border-radius: 12px !important;
  text-align: center !important;
  overflow: hidden !important;
}
.selector-book-only .book-grid .book-grid-abbr {
  display: block !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font-size: clamp(12px, 3.2vw, 13.5px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}
.selector-book-only .book-grid .book-grid-name { display: none !important; }
@media (max-width: 430px) {
  .selector-book-only .book-grid {
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)) !important;
    gap: 5px !important;
  }
  .selector-book-only .book-grid button {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }
  .selector-book-only .book-grid .book-grid-abbr { font-size: 12px !important; }
}

/* uiuxhotfix88c: final user follow-up validation fixes.
   - Bible title keeps the reference on top and very small translation names below.
   - Bible selector uses abbreviation-only fixed cells with no instruction copy or overflow.
   - Hymn range/topic filters stay horizontal scrollers on mobile.
   - Parallel verse text no longer prefixes translation names. */
.title-block {
  gap: 1px !important;
  align-content: center !important;
}
.reference-btn {
  height: auto !important;
  min-height: 22px !important;
  padding: 0 10px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--reader-ink, var(--ink)) !important;
  font-size: clamp(12px, 3.4vw, 15px) !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
}
.verse-count-badge {
  display: block !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--reader-muted, var(--muted)) !important;
  font-size: clamp(8.5px, 2.25vw, 10.5px) !important;
  font-weight: 780 !important;
  line-height: 1.05 !important;
  letter-spacing: -.02em !important;
  opacity: .88 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.verse-count-badge[hidden] { display: none !important; }
.parallel-label { display: none !important; }
.parallel-text { padding-left: 0 !important; }
.selector-status:empty { display: none !important; }
.selector-book-only .book-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  max-height: min(58vh, 520px) !important;
  overflow: auto !important;
  padding: 2px 2px 8px !important;
}
.selector-book-only .book-grid button {
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 11px !important;
}
.selector-book-only .book-grid .book-grid-abbr {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-align: center !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  font-size: 12px !important;
  line-height: 1 !important;
  letter-spacing: -.05em !important;
}
.hymn-index-card .hymn-range-chips,
.hymn-index-card .hymn-topic-chips,
.hymn-range-chips,
.hymn-topic-chips {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  align-items: stretch !important;
  gap: 6px !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
}
.hymn-index-card .hymn-range-chips button,
.hymn-index-card .hymn-topic-chips button,
.hymn-range-chips button,
.hymn-topic-chips button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  white-space: nowrap !important;
}
@media (max-width: 430px) {
  .selector-book-only .book-grid { gap: 5px !important; }
  .selector-book-only .book-grid button {
    flex-basis: 39px !important;
    width: 39px !important;
    min-width: 39px !important;
    max-width: 39px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
  }
  .selector-book-only .book-grid .book-grid-abbr { font-size: 11.5px !important; }
}

/* uiuxhotfix90: compact one-line daily reading goal row */
.star-goal-panel.star-goal-panel-compact {
  padding: 7px 10px !important;
  border-radius: 18px !important;
}
.star-goal-compact-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}
.star-goal-panel-compact .star-goal-summary {
  margin: 0 !important;
  min-width: 0 !important;
  color: var(--ink) !important;
  font-size: .86rem !important;
  font-weight: 950 !important;
  line-height: 1.18 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.star-goal-panel-compact.is-achieved {
  border-color: color-mix(in srgb, var(--gold) 58%, var(--line)) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 18%, var(--panel)), color-mix(in srgb, #34d399 10%, var(--panel))) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 18%, transparent) !important;
}
.star-goal-panel-compact .star-goal-summary.is-achieved {
  color: color-mix(in srgb, var(--gold) 80%, #ffffff) !important;
}
.star-goal-select-inline {
  display: inline-grid !important;
  grid-template-columns: auto auto !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  min-width: 0 !important;
}
.star-goal-select-inline > span {
  white-space: nowrap !important;
  color: var(--muted) !important;
  font-size: .76rem !important;
  font-weight: 900 !important;
}
.star-goal-panel-compact .reading-goal-stepper {
  display: grid !important;
  grid-template-columns: 28px auto 28px !important;
  align-items: center !important;
  gap: 4px !important;
}
.star-goal-panel-compact .reading-goal-input-wrap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  height: 28px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent) !important;
  background: color-mix(in srgb, var(--panel) 78%, transparent) !important;
  color: var(--ink) !important;
  font-size: .78rem !important;
  font-weight: 950 !important;
}
.star-goal-panel-compact .reading-goal-input {
  width: 22px !important;
  min-width: 0 !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  text-align: center !important;
  font-size: .78rem !important;
  font-weight: 950 !important;
}
.star-goal-panel-compact .reading-goal-step-btn {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  font-size: .86rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}
.star-goal-panel-compact .star-goal-progress,
.star-goal-panel-compact .star-goal-bonus-inline,
.star-goal-panel-compact .star-icon-action {
  display: none !important;
}
@media (max-width: 560px) {
  .star-goal-panel.star-goal-panel-compact { padding: 7px 8px !important; }
  .star-goal-compact-row { grid-template-columns: minmax(0, 1fr) auto !important; gap: 5px !important; }
  .star-goal-panel-compact .star-goal-summary { font-size: .78rem !important; letter-spacing: -.02em !important; }
  .star-goal-select-inline { gap: 4px !important; }
  .star-goal-select-inline > span { font-size: .68rem !important; }
  .star-goal-panel-compact .reading-goal-stepper { grid-template-columns: 26px auto 26px !important; gap: 4px !important; }
  .star-goal-panel-compact .reading-goal-step-btn { width: 26px !important; min-width: 26px !important; height: 26px !important; min-height: 26px !important; }
  .star-goal-panel-compact .reading-goal-input-wrap { min-width: 38px !important; height: 26px !important; padding: 0 3px !important; font-size: .72rem !important; }
  .star-goal-panel-compact .reading-goal-input { width: 18px !important; height: 22px !important; min-height: 22px !important; font-size: .72rem !important; }
}
@media (max-width: 360px) {
  .star-goal-compact-row { grid-template-columns: 1fr !important; align-items: start !important; }
  .star-goal-select-inline { justify-self: start !important; }
}


/* uiuxhotfix90: reading goal pill UI without literal parentheses. */
.star-goal-panel.star-goal-panel-compact {
  padding: 8px 10px !important;
}
.star-goal-panel-compact .star-goal-compact-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}
.star-goal-panel-compact .star-goal-summary {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: .84rem !important;
  font-weight: 900 !important;
}
.star-goal-panel-compact .star-goal-summary.is-achieved {
  color: #ffe19a !important;
  text-shadow: 0 0 14px rgba(245, 200, 91, .22) !important;
}
.star-goal-panel-compact .star-goal-select-inline {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: 0 !important;
}
.star-goal-panel-compact .star-goal-label {
  font-size: .72rem !important;
  font-weight: 900 !important;
  color: var(--muted) !important;
}
.star-goal-panel-compact .reading-goal-stepper {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
}
.star-goal-panel-compact .reading-goal-step-btn,
.star-goal-panel-compact .reading-goal-input {
  height: 28px !important;
  min-height: 28px !important;
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent) !important;
  background: color-mix(in srgb, var(--panel) 72%, transparent) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
.star-goal-panel-compact .reading-goal-step-btn {
  width: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  font-size: .86rem !important;
  font-weight: 950 !important;
}
.star-goal-panel-compact .reading-goal-input {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  padding: 0 4px !important;
  text-align: center !important;
  font-size: .82rem !important;
  font-weight: 950 !important;
  appearance: textfield !important;
}
.star-goal-panel-compact .reading-goal-input-wrap {
  display: contents !important;
}
.star-goal-panel.star-goal-panel-compact.is-achieved {
  border-color: rgba(245, 200, 91, .55) !important;
  background: linear-gradient(90deg, rgba(245, 200, 91, .22), rgba(255,255,255,.055)) !important;
}
@media (max-width: 390px) {
  .star-goal-panel-compact .star-goal-compact-row {
    gap: 5px !important;
  }
  .star-goal-panel-compact .star-goal-summary {
    font-size: .78rem !important;
  }
  .star-goal-panel-compact .star-goal-label {
    font-size: .68rem !important;
  }
  .star-goal-panel-compact .reading-goal-step-btn {
    width: 25px !important;
    min-width: 25px !important;
  }
  .star-goal-panel-compact .reading-goal-input {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
  }
}

/* uiuxhotfix90: ensure hidden OSMD Korean lyric leakage never displays. */
.hymn-score-osmd svg text[data-hymn-score-lyric-hidden],
.hymn-score-osmd svg tspan[data-hymn-score-lyric-hidden] {
  display: none !important;
}

/* uiuxhotfix94: larger Bible reference title, compact translation subtitle, and score full-lyrics toggle. */
.title-block {
  gap: 2px !important;
  min-width: 0 !important;
  align-content: center !important;
}
.reference-btn {
  min-height: 25px !important;
  padding: 0 8px !important;
  font-size: clamp(16px, 4.65vw, 22px) !important;
  font-weight: 1000 !important;
  line-height: 1.08 !important;
  letter-spacing: -.045em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.verse-count-badge {
  font-size: clamp(10px, 2.65vw, 12px) !important;
  font-weight: 760 !important;
  line-height: 1.08 !important;
  opacity: .74 !important;
  letter-spacing: -.025em !important;
}
@media (max-width: 360px) {
  .reference-btn {
    font-size: clamp(15px, 4.45vw, 18px) !important;
    padding-inline: 4px !important;
  }
  .verse-count-badge {
    font-size: 9.5px !important;
  }
}
.hymn-score-lyrics-actions {
  display: grid !important;
  grid-template-columns: auto auto minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 7px !important;
}
.hymn-score-lyrics-toggle {
  min-height: 32px !important;
  padding: 5px 12px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.08) !important;
  color: #fff7e9 !important;
  font-weight: 950 !important;
  font-size: .78rem !important;
}
.hymn-score-lyrics-toggle.is-active,
.hymn-score-lyrics-toggle[aria-pressed="true"] {
  background: linear-gradient(135deg, rgba(255,230,168,.96), rgba(229,185,75,.96)) !important;
  color: var(--hymn-ink, #241b11) !important;
  border-color: rgba(255,230,168,.72) !important;
}
.hymn-score-lyrics-hint {
  min-width: 0 !important;
  color: var(--muted, #b8ad9f) !important;
  font-size: .76rem !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.hymn-score-clean-lyrics[hidden] {
  display: none !important;
}
.hymn-score-clean-lyrics {
  order: 2 !important;
}
@media (max-width: 560px) {
  .hymn-score-lyrics-actions {
    grid-template-columns: auto auto !important;
    gap: 6px !important;
  }
  .hymn-score-lyrics-hint {
    grid-column: 1 / -1 !important;
    white-space: normal !important;
    font-size: .68rem !important;
  }
  .hymn-score-lyrics-toggle {
    min-height: 30px !important;
    padding-inline: 10px !important;
    font-size: .72rem !important;
  }
}


/* uiuxhotfix95: keep Bible translation name as a centered second line under the reference.
   Previous hotfix94 enlarged the reference, but an older flex-row title-block rule
   could still keep the translation beside the title near the next-arrow button. */
body:not(.hymn-active):not(.hymn-reader-mode) .topbar {
  min-height: calc(58px + env(safe-area-inset-top, 0px)) !important;
  align-items: center !important;
}
body:not(.hymn-active):not(.hymn-reader-mode) .title-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: center !important;
  gap: 2px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-align: center !important;
}
body:not(.hymn-active):not(.hymn-reader-mode) .title-block .reference-btn {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  text-align: center !important;
}
body:not(.hymn-active):not(.hymn-reader-mode) .title-block .verse-count-badge {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body:not(.hymn-active):not(.hymn-reader-mode) .title-block .verse-count-badge[hidden] {
  display: none !important;
}
@media (max-width: 360px) {
  body:not(.hymn-active):not(.hymn-reader-mode) .topbar {
    grid-template-columns: 40px minmax(0, 1fr) 40px !important;
    gap: 4px !important;
  }
}


/* uiuxhotfix101: hymn lyrics font controls and goal-value-first daily goal stepper. */
.hymn-reader-panel .hymn-lyrics-wrap {
  --hymn-lyrics-font-size: 20px;
  --hymn-lyrics-line-height: 1.66;
}
.hymn-lyrics-font-tools {
  width: min(100%, 720px) !important;
  margin: -2px auto 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 6px 8px !important;
  border: 1px solid color-mix(in srgb, var(--line) 62%, transparent) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--panel) 76%, transparent) !important;
  color: var(--ink) !important;
}
.hymn-lyrics-font-label {
  color: var(--muted-strong, var(--muted)) !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}
.hymn-lyrics-font-btn,
.hymn-lyrics-font-reset {
  min-height: 30px !important;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--surface, var(--panel)) 70%, transparent) !important;
  color: var(--ink) !important;
  font-weight: 950 !important;
  box-shadow: none !important;
}
.hymn-lyrics-font-btn {
  width: 30px !important;
  min-width: 30px !important;
  padding: 0 !important;
  font-size: 1rem !important;
  line-height: 1 !important;
}
.hymn-lyrics-font-reset {
  padding: 0 10px !important;
  font-size: .76rem !important;
}
.hymn-lyrics-font-value {
  min-width: 44px !important;
  text-align: center !important;
  color: var(--ink) !important;
  font-size: .78rem !important;
  font-weight: 950 !important;
}
.hymn-lyrics-font-btn:disabled {
  opacity: .42 !important;
  cursor: not-allowed !important;
}
.hymn-reader-panel .hymn-lyrics-body p {
  font-size: var(--hymn-lyrics-font-size, 20px) !important;
  line-height: var(--hymn-lyrics-line-height, 1.66) !important;
}
.hymn-reader-panel .hymn-lyrics-stanza-label {
  font-size: max(.82rem, calc(var(--hymn-lyrics-font-size, 20px) * .62)) !important;
}
.star-goal-panel-compact .star-goal-select-inline {
  gap: 0 !important;
}
.star-goal-panel-compact .star-goal-select-inline > .star-goal-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.star-goal-panel-compact .reading-goal-stepper {
  display: inline-grid !important;
  grid-template-columns: minmax(82px, auto) 28px 28px !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: 0 !important;
}
.star-goal-panel-compact .reading-goal-input-wrap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 82px !important;
  height: 28px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line)) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--panel) 82%, transparent), color-mix(in srgb, var(--gold) 12%, var(--panel))) !important;
  color: var(--ink) !important;
  font-size: .78rem !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}
.star-goal-panel-compact .reading-goal-input-wrap::before {
  content: "목표" !important;
  color: var(--muted-strong, var(--muted)) !important;
  font-size: .68rem !important;
  font-weight: 900 !important;
}
.star-goal-panel-compact .reading-goal-input-wrap::after {
  content: "장" !important;
  color: var(--muted-strong, var(--muted)) !important;
  font-size: .68rem !important;
  font-weight: 900 !important;
}
.star-goal-panel-compact .reading-goal-input {
  width: 18px !important;
  min-width: 18px !important;
  max-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  text-align: center !important;
  font-size: .84rem !important;
  font-weight: 1000 !important;
  appearance: textfield !important;
}
.star-goal-panel-compact .reading-goal-step-btn {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--panel) 82%, #000 10%) !important;
  border-color: color-mix(in srgb, var(--line) 70%, transparent) !important;
  color: var(--ink) !important;
  font-size: .86rem !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
}
@media (max-width: 390px) {
  .star-goal-panel-compact .reading-goal-stepper {
    grid-template-columns: minmax(74px, auto) 25px 25px !important;
    gap: 4px !important;
  }
  .star-goal-panel-compact .reading-goal-step-btn {
    width: 25px !important;
    min-width: 25px !important;
    height: 25px !important;
    min-height: 25px !important;
  }
  .star-goal-panel-compact .reading-goal-input-wrap {
    min-width: 74px !important;
    height: 25px !important;
    padding-inline: 8px !important;
  }
  .star-goal-panel-compact .reading-goal-input-wrap::before,
  .star-goal-panel-compact .reading-goal-input-wrap::after {
    font-size: .64rem !important;
  }
  .star-goal-panel-compact .reading-goal-input {
    font-size: .78rem !important;
  }
  .hymn-lyrics-font-tools {
    gap: 5px !important;
    padding-inline: 6px !important;
  }
  .hymn-lyrics-font-reset {
    padding-inline: 8px !important;
  }
}


/* uiuxhotfix103: compact hymn lyrics controls, clean score player copy, and selector fit fixes. */
.hymn-image-tool-hint,
.hymn-score-lyrics-hint,
.hymn-score-player-status[hidden] {
  display: none !important;
}
.hymn-lyrics-font-tools {
  display: none !important;
}
.hymn-lyrics-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}
#hymnLyricsTitleText {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.hymn-lyrics-title-actions {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.hymn-lyrics-title-actions .hymn-lyrics-font-btn {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.1) !important;
  color: #fff1d0 !important;
  font-size: 1.05rem !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}
.hymn-lyrics-title-actions .hymn-lyrics-font-btn:disabled {
  opacity: .42 !important;
}
.hymn-reader-panel .hymn-lyrics-body p {
  font-size: var(--hymn-lyrics-font-size, 20px) !important;
  line-height: var(--hymn-lyrics-line-height, 1.66) !important;
}
.hymn-score-player-progress-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}
.hymn-score-player-progress-row .hymn-score-player-progress {
  width: 100% !important;
  min-width: 0 !important;
}
.hymn-score-player-time {
  min-width: 42px !important;
  color: rgba(247,234,215,.78) !important;
  font-size: .78rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: right !important;
  white-space: nowrap !important;
}
.selector-jump-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 62px !important;
  gap: 6px !important;
  align-items: stretch !important;
}
.selector-jump-form .primary-btn,
.selector-jump-form button {
  grid-column: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  padding-inline: 0 !important;
}
.selector-version-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 88px !important;
  gap: 6px !important;
  align-items: stretch !important;
}
.selector-version-row .version-select-field,
.selector-version-row .compare-picker-btn,
.selector-version-row select {
  grid-column: auto !important;
  width: 100% !important;
  min-width: 0 !important;
}
.selector-grid-wrap.selector-book-only {
  grid-template-columns: 1fr !important;
}
.selector-grid-wrap.selector-book-only > section:first-child {
  grid-column: 1 / -1 !important;
}
.selector-grid-wrap.selector-book-only .book-grid,
.selector-book-only .book-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(42px, 1fr)) !important;
  justify-content: stretch !important;
  align-items: stretch !important;
  align-content: start !important;
  gap: 5px !important;
  width: 100% !important;
  max-height: none !important;
}
.selector-grid-wrap.selector-book-only .book-grid button,
.selector-book-only .book-grid button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: initial !important;
  height: 34px !important;
  min-height: 34px !important;
}
.chapter-picker-panel {
  z-index: 230 !important;
  top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: min(640px, calc(100vw - 16px)) !important;
  max-height: none !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
}
.chapter-picker-panel[hidden],
.chapter-picker-panel.is-hidden {
  display: none !important;
}
.chapter-picker-grid {
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  grid-template-columns: repeat(auto-fit, minmax(54px, 1fr)) !important;
  align-content: start !important;
}
@media (max-width: 430px) {
  .selector-jump-form { grid-template-columns: minmax(0, 1fr) 56px !important; }
  .selector-version-row { grid-template-columns: minmax(0, 1fr) 80px !important; }
  .selector-grid-wrap.selector-book-only .book-grid,
  .selector-book-only .book-grid { grid-template-columns: repeat(auto-fit, minmax(39px, 1fr)) !important; }
  .chapter-picker-grid { grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)) !important; gap: 5px !important; }
  .chapter-picker-grid button { min-height: 34px !important; border-radius: 10px !important; font-size: .82rem !important; }
}

/* uiuxhotfix105: settings app version/update row. */
.app-version-card {
  padding-block: 14px;
}

.app-version-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.app-version-copy {
  min-width: 0;
}

.app-version-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.app-version-summary strong {
  color: var(--ink);
  font-weight: 900;
}

.app-update-install-btn {
  min-width: 92px;
  min-height: 38px;
  padding-inline: 14px;
  white-space: nowrap;
}

.app-install-update-status {
  margin-top: 8px;
}

@media (max-width: 420px) {
  .app-version-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .app-version-summary {
    display: grid;
    gap: 2px;
    font-size: 12px;
  }

  .app-update-install-btn {
    min-width: 78px;
    padding-inline: 10px;
  }
}

/* uiuxhotfix108: hymn score stays MusicXML/OSMD; score lyrics use NWC source data. */
.hymn-score-safe-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: rgba(255, 255, 255, .045);
}

.hymn-score-safe-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}

.hymn-score-safe-title strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hymn-score-safe-badge {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(245, 194, 92, .35);
  background: rgba(245, 194, 92, .13);
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 900;
}

.hymn-score-safe-action {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(245, 194, 92, .45);
  background: rgba(245, 194, 92, .15);
  color: var(--ink);
  font-weight: 900;
}

.hymn-score-safe-image-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border-radius: 18px;
  background: #111;
}

.hymn-score-safe-image {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  border-radius: 12px;
  background: #fff;
}

@media (max-width: 420px) {
  .hymn-score-safe-head {
    padding: 8px 10px;
    gap: 8px;
  }
  .hymn-score-safe-title {
    font-size: 13px;
  }
  .hymn-score-safe-badge {
    display: none;
  }
  .hymn-score-safe-action {
    min-height: 32px;
    padding-inline: 10px;
    font-size: 12px;
  }
}


/* uiuxhotfix176: persistent comparison controls + server-independent static bottom nav. */
.selector-version-row {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 176px) !important;
}
.parallel-control-row {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  gap: 6px !important;
  min-width: 0 !important;
}
.selector-version-row .parallel-control-row button,
.selector-version-row .compare-toggle-btn,
.selector-version-row .compare-picker-btn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 7px !important;
  border-radius: 18px !important;
  font-size: 11.5px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}
.compare-toggle-btn[data-enabled="true"] {
  border-color: rgba(216,192,138,.65) !important;
  background: rgba(216,192,138,.18) !important;
  color: #f6ead7 !important;
}
#parallelSummary[hidden] { display: none !important; }
#parallelSummary:not([hidden]) {
  display: block !important;
  margin: 2px 3px 0 !important;
  color: var(--reader-muted, #aaa) !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}
.bottom-tabs[data-static-icons="true"] .nav-icon,
.bottom-tabs[data-static-icons="true"] .nav-icon svg {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}
@media (max-width: 430px) {
  .selector-version-row { grid-template-columns: minmax(0, 1fr) 150px !important; }
  .parallel-control-row { grid-template-columns: 68px minmax(0, 1fr) !important; gap: 5px !important; }
  .selector-version-row .parallel-control-row button { font-size: 10.8px !important; padding-inline: 4px !important; }
}