:root {
  --bg-top: #eef2f9;
  --bg-bottom: #e2e8f3;
  --surface: #f4f7fc;
  --surface-strong: #ffffff;
  --surface-soft: #f0f4fb;
  --ink: #1a2030;
  --muted: #5a6578;
  --accent: #4a90d9;
  --accent-strong: #3b6fb5;
  --accent-warm: #5a9fe8;
  --accent-glow: rgba(74, 144, 217, 0.25);
  --line: #d0d9e8;
  --line-soft: rgba(74, 144, 217, 0.18);
  --danger: #dc2626;
  --shadow: 0 14px 44px rgba(15, 23, 42, 0.10);
}

body.dark-mode {
  --bg-top: #0c0e14;
  --bg-bottom: #0c0e14;
  --surface: #141820;
  --surface-strong: #1c2130;
  --surface-soft: #111520;
  --ink: #e6edf3;
  --muted: #8b949e;
  --accent: #4a90d9;
  --accent-strong: #3b6fb5;
  --accent-warm: #5a9fe8;
  --accent-glow: rgba(74, 144, 217, 0.35);
  --line: #2a3040;
  --line-soft: rgba(74, 144, 217, 0.26);
  --shadow: 0 18px 48px rgba(2, 6, 23, 0.55);
}

body.dark-mode .app-shell {
  background: linear-gradient(180deg, #141820, #111520);
  border-color: #2a3040;
  box-shadow: 0 20px 48px rgba(2, 6, 23, 0.48);
}

body.dark-mode .app-header,
body.dark-mode .preview-topbar,
body.dark-mode .projects-topbar {
  background: linear-gradient(180deg, rgba(20, 24, 32, 0.98), rgba(17, 21, 32, 0.95));
}

body.dark-mode .toolbar,
body.dark-mode .version-controls {
  background: rgba(12, 14, 20, 0.8);
  box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.16);
}

body.dark-mode .mobile-chip-icon {
  background: rgba(74, 144, 217, 0.2);
  color: #dbeafe;
}

body.dark-mode .mobile-nav-btn {
  color: #8b949e;
}

body.dark-mode .mobile-nav-btn.active {
  background: rgba(74, 144, 217, 0.24);
  color: #e6edf3;
}

body.dark-mode .mobile-add-btn,
body.dark-mode .mobile-add-btn:hover {
  color: #fff;
  background: linear-gradient(135deg, #4a90d9, #3b6fb5);
  box-shadow: 0 4px 20px var(--accent-glow);
}

body.dark-mode .mobile-nav-icon {
  background: rgba(74, 144, 217, 0.14);
  box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.24);
}

body.dark-mode .mobile-nav-btn.active .mobile-nav-icon {
  background: rgba(74, 144, 217, 0.26);
  box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.4);
}

body.dark-mode #study-title,
body.dark-mode .heading-input,
body.dark-mode .node-text,
body.dark-mode .scripture-input,
body.dark-mode #translation-select,
body.dark-mode .heading-style-select {
  background: #1c2130;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.2);
}

body.dark-mode button {
  background: #1c2130;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.2);
}

body.dark-mode button:hover {
  background: #242a3a;
}

body.dark-mode button.primary {
  background: linear-gradient(135deg, #4a90d9, #3b6fb5);
  color: #fff;
  box-shadow: 0 4px 20px var(--accent-glow);
}

body.dark-mode button.primary:hover {
  background: linear-gradient(135deg, #5a9fe8, #4a80c5);
  box-shadow: 0 4px 32px rgba(74, 144, 217, 0.5);
}

body.dark-mode .projects-note {
  background: rgba(20, 24, 32, 0.72);
  border-color: rgba(74, 144, 217, 0.3);
}

body.dark-mode .project-status.never {
  color: #8b949e;
  border-color: rgba(139, 148, 158, 0.3);
  background: rgba(28, 33, 48, 0.9);
}

body.dark-mode .project-status.current {
  color: #e6edf3;
  border-color: rgba(74, 144, 217, 0.5);
  background: rgba(74, 144, 217, 0.2);
}

body.dark-mode .project-status.stale {
  color: #e0e7ff;
  border-color: rgba(129, 140, 248, 0.4);
  background: rgba(67, 56, 202, 0.2);
}

body.dark-mode .pdf-preview-canvas {
  background:
    repeating-linear-gradient(-45deg, rgba(74, 144, 217, 0.08) 0 8px, rgba(74, 144, 217, 0.04) 8px 16px),
    #0c0e14;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

input,
select,
textarea,
button {
  font-family: inherit;
}

html,
body {
  margin: 0;
  min-height: 100%;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: "Manrope", "Exo 2", system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(74, 144, 217, 0.08) 0%, transparent 60%),
    linear-gradient(160deg, var(--bg-top), var(--bg-bottom));
  padding:
    max(1.1rem, env(safe-area-inset-top))
    max(0.85rem, env(safe-area-inset-right))
    max(2.2rem, env(safe-area-inset-bottom))
    max(0.85rem, env(safe-area-inset-left));
  min-height: 100dvh;
  overscroll-behavior-x: none;
}

.app-shell {
  width: min(1040px, 100%);
  max-width: 1040px;
  margin: 0 auto;
  background: linear-gradient(180deg, #ffffff, var(--surface));
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.10);
  overflow: hidden;
}

.app-header {
  padding: 1.75rem clamp(1rem, 3vw, 2.25rem) 1.5rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-strong), var(--surface));
}

.header-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.brand-logo-wrap {
  flex-shrink: 0;
}

.brand-logo {
  height: 1.4rem;
  width: auto;
}

.brand-logo-dark {
  display: none;
}

body.dark-mode .brand-logo-light {
  display: none;
}

body.dark-mode .brand-logo-dark {
  display: block;
}

.eyebrow {
  margin: 0;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-family: "Manrope", "Exo 2", system-ui, sans-serif;
  font-weight: 600;
}

h1 {
  margin: 0;
  font-size: clamp(1.3rem, 2.8vw, 1.8rem);
  line-height: 1.1;
  font-family: "Exo 2", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.subtitle {
  margin: 0.5rem 0 0;
  max-width: 72ch;
  color: var(--muted);
  font-family: "Manrope", "Exo 2", system-ui, sans-serif;
  font-size: 0.92rem;
}

.title-label {
  display: block;
  margin-top: 1.4rem;
  margin-bottom: 0.4rem;
  font-family: "Manrope", "Exo 2", system-ui, sans-serif;
  font-weight: 600;
}

#study-title {
  width: min(760px, 100%);
  font-size: 1.1rem;
  font-family: "Exo 2", system-ui, sans-serif;
  padding: 0.72rem 0.88rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-strong);
  color: var(--ink);
  transition: border-color 0.15s;
}

#study-title:focus,
.rich-edit:focus,
.scripture-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.toolbar {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0.58rem;
  border-radius: 14px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

.mobile-quick-actions {
  display: none;
}

.mobile-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  font: 700 0.65rem/1 "Manrope", "Exo 2", system-ui, sans-serif;
  background: rgba(74, 144, 217, 0.12);
  color: var(--accent-strong);
}

.mobile-bottom-nav {
  display: none;
}

.mobile-nav-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  border: none;
  border-radius: 14px;
  padding: 0.42rem 0.3rem 0.38rem;
  min-height: 3rem;
  min-width: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  transition: background-color 140ms ease, color 140ms ease, transform 120ms ease;
}

.mobile-nav-btn:hover {
  transform: none;
  background: rgba(74, 144, 217, 0.08);
}

.mobile-nav-btn.active {
  background: rgba(74, 144, 217, 0.14);
  color: var(--accent-strong);
}

.mobile-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: rgba(74, 144, 217, 0.1);
  box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.14);
}

.mobile-nav-icon svg {
  width: 1.04rem;
  height: 1.04rem;
  display: block;
  fill: currentColor;
}

.mobile-nav-label {
  font: 600 0.66rem/1 "Manrope", "Exo 2", system-ui, sans-serif;
  letter-spacing: 0.02em;
}

.mobile-bottom-nav .menu-group {
  display: flex;
  width: 100%;
}

.mobile-nav-btn.active .mobile-nav-icon {
  background: rgba(74, 144, 217, 0.2);
  box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.3);
}

.save-status {
  margin-left: auto;
  align-self: center;
  color: var(--muted);
  font: 500 0.85rem "Manrope", "Exo 2", system-ui, sans-serif;
  padding-left: 0.35rem;
  transition: opacity 200ms ease;
}

.save-status.save-flash {
  animation: save-flash 600ms ease;
}

@keyframes save-flash {
  0% { opacity: 0.4; }
  30% { opacity: 1; color: var(--accent); }
  100% { opacity: 1; color: var(--muted); }
}

.spinner-inline {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 600ms linear infinite;
  vertical-align: middle;
  margin-right: 4px;
}

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

.version-controls {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.45rem 0.58rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  font-family: "Manrope", "Exo 2", system-ui, sans-serif;
}

.version-controls label {
  font-size: 0.92rem;
  color: var(--muted);
  font-weight: 600;
}

.list-mode-label {
  color: var(--muted);
  font: 600 0.9rem "Manrope", "Exo 2", system-ui, sans-serif;
  margin-left: 0.18rem;
}

#translation-select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.42rem 0.7rem;
  background: var(--surface-strong);
  font: 500 0.92rem "Manrope", "Exo 2", system-ui, sans-serif;
  color: var(--ink);
  transition: border-color 0.15s;
}

#translation-select:focus {
  border-color: var(--accent);
}

.list-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
  padding: 0.18rem;
  border-radius: 8px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
}

.list-mode-toggle button {
  padding: 0.3rem 0.64rem;
  border-radius: 6px;
  font-size: 0.82rem;
  border: none;
  box-shadow: none;
  background: transparent;
  color: var(--muted);
}

.list-mode-toggle button:hover {
  transform: none;
  background: rgba(74, 144, 217, 0.1);
}

.list-mode-toggle button.active {
  background: linear-gradient(135deg, #4a90d9, #3b6fb5);
  color: #fff;
}

body.dark-mode .list-mode-toggle {
  background: #1c2130;
  border-color: #2a3040;
}

body.dark-mode .list-mode-toggle button.active {
  color: #fff;
}

#translation-active {
  color: var(--muted);
  font-size: 0.9rem;
}

.floating-format-toolbar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  gap: 0.35rem;
  padding: 0.34rem 0.38rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-strong);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.15);
  backdrop-filter: blur(8px);
}

.floating-format-toolbar.visible {
  display: flex;
}

.floating-format-toolbar button {
  border-radius: 8px;
  padding: 0.26rem 0.45rem;
  min-width: 1.9rem;
}

.hidden-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.pdf-import-marker {
  display: none;
}

button {
  border: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--ink);
  border-radius: 8px;
  padding: 0.42rem 0.82rem;
  cursor: pointer;
  font-family: "Manrope", "Exo 2", system-ui, sans-serif;
  font-size: 0.89rem;
  font-weight: 600;
  box-shadow: none;
  transition: all 0.15s ease;
}

button:hover {
  background: var(--surface-soft);
  border-color: var(--accent);
}

button:active {
  transform: scale(0.96);
}

button.primary {
  background: linear-gradient(135deg, #4a90d9, #3b6fb5);
  color: #fff;
  border: none;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 20px var(--accent-glow);
}

button.primary:hover {
  background: linear-gradient(135deg, #5a9fe8, #4a80c5);
  box-shadow: 0 4px 32px rgba(74, 144, 217, 0.45);
}

button.danger {
  border-color: rgba(220, 38, 38, 0.34);
  color: var(--danger);
}

button.icon {
  border-radius: 8px;
  padding: 0.28rem 0.45rem;
  min-width: 2rem;
  text-align: center;
}

.menu-group {
  position: relative;
  display: inline-flex;
}

.menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.menu-panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 40;
  display: none;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 10.6rem;
  padding: 0.32rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-strong);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
}

.menu-group.open .menu-panel {
  display: flex;
}

.menu-panel button {
  width: 100%;
  border-radius: 8px;
  text-align: left;
  background: transparent;
  box-shadow: none;
  padding: 0.34rem 0.5rem;
  font-size: 0.84rem;
}

.menu-panel button:hover {
  transform: none;
  background: rgba(74, 144, 217, 0.12);
}

body.dark-mode .menu-panel {
  background: rgba(11, 21, 38, 0.98);
  border-color: rgba(74, 144, 217, 0.32);
  box-shadow: 0 14px 30px rgba(2, 6, 23, 0.58);
}

body.dark-mode .menu-panel button:hover {
  background: rgba(74, 144, 217, 0.2);
}

.helper {
  margin: 0.9rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-family: "Manrope", "Exo 2", system-ui, sans-serif;
}

kbd {
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  font-family: "Manrope", "Exo 2", system-ui, sans-serif;
  padding: 0.08rem 0.35rem;
  background: #f8fbff;
  font-size: 0.85em;
}

#outline-root {
  padding: 1.15rem clamp(0.8rem, 3vw, 2.25rem) 1.8rem;
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.45), rgba(248, 251, 255, 0.18));
  overflow-x: clip;
}

.preview-screen {
  display: none;
  overflow-x: clip;
}

.projects-screen {
  display: none;
  overflow-x: clip;
}

.app-shell.preview-active .app-header,
.app-shell.preview-active #outline-root {
  display: none;
}

.app-shell.preview-active .preview-screen {
  display: block;
}

.app-shell.projects-active .app-header,
.app-shell.projects-active #outline-root,
.app-shell.projects-active .preview-screen {
  display: none;
}

.app-shell.projects-active .projects-screen {
  display: block;
}

.preview-topbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  padding: 1rem clamp(0.8rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff, rgba(244, 248, 255, 0.95));
}

.preview-label {
  margin-left: auto;
  color: var(--muted);
  font-family: "Manrope", "Exo 2", system-ui, sans-serif;
  font-size: 0.9rem;
}

.pdf-preview-canvas {
  padding: 1.1rem clamp(0.6rem, 3vw, 1.8rem) 2rem;
  background:
    repeating-linear-gradient(-45deg, rgba(74, 144, 217, 0.06) 0 8px, rgba(56, 189, 248, 0.05) 8px 16px),
    #eaf1fb;
}

.pdf-page {
  width: min(8.5in, 100%);
  min-height: 11in;
  margin: 0 auto;
  padding: 0.5in;
  background: #fff;
  box-shadow: 0 20px 50px rgba(45, 42, 37, 0.16);
  color: #000;
  font-family: Aptos, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.pdf-title {
  margin: 0 0 0.95rem;
  padding-bottom: 0.32rem;
  border-bottom: 2px solid #222;
  font: 700 2rem/1.2 Aptos, Arial, sans-serif;
}

.pdf-heading-section {
  margin-top: 1.2rem;
}

.pdf-heading {
  margin: 0 0 0.35rem;
  color: #000;
  font-family: Aptos, Arial, sans-serif;
  line-height: 1.3;
  break-after: avoid;
  page-break-after: avoid;
}

.pdf-heading.style-1 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-bottom: 1.5px solid #555;
  padding-bottom: 0.2rem;
  margin-bottom: 0.5rem;
}

.pdf-heading.style-2 {
  font-size: 1.08rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pdf-heading.style-3 {
  font-size: 1rem;
  font-weight: 700;
  font-style: italic;
}

.pdf-heading.style-4 {
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.pdf-heading-section.style-2 {
  margin-top: 0.8rem;
}

.pdf-heading-section.style-3 {
  margin-top: 0.6rem;
}

.pdf-heading-section.style-4 {
  margin-top: 0.5rem;
}

.pdf-outline {
  margin: 0.2rem 0 0.35rem;
  padding-left: 1.55rem;
}

.pdf-outline.numbered .pdf-outline {
  list-style-type: upper-alpha;
}

.pdf-outline.numbered .pdf-outline .pdf-outline {
  list-style-type: lower-roman;
}

.pdf-outline.numbered .pdf-outline .pdf-outline .pdf-outline {
  list-style-type: lower-alpha;
}

.pdf-outline.numbered .pdf-outline .pdf-outline .pdf-outline .pdf-outline {
  list-style-type: decimal;
}

.pdf-outline.numbered .pdf-outline .pdf-outline .pdf-outline .pdf-outline .pdf-outline {
  list-style-type: lower-alpha;
}

.pdf-outline.bulleted {
  list-style-type: disc;
}

.pdf-outline.bulleted .pdf-outline {
  list-style-type: "◦ ";
}

.pdf-outline.bulleted .pdf-outline .pdf-outline {
  list-style-type: square;
}

.pdf-outline.bulleted .pdf-outline .pdf-outline .pdf-outline {
  list-style-type: "▸ ";
}

.pdf-outline.bulleted .pdf-outline .pdf-outline .pdf-outline .pdf-outline {
  list-style-type: "▹ ";
}

.pdf-outline.bulleted .pdf-outline .pdf-outline .pdf-outline .pdf-outline .pdf-outline {
  list-style-type: "◦ ";
}

.pdf-outline li {
  margin: 0.45rem 0;
}

.pdf-point {
  display: inline;
}

.pdf-scripture {
  font-size: 14px;
}

.pdf-scripture sup {
  font-size: 0.72em;
  margin-right: 0.15rem;
}

.pdf-scripture-citation {
  font-style: italic;
  font-size: 12px;
}

.pdf-empty {
  color: #64748b;
}

.projects-topbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  padding: 1rem clamp(0.8rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff, rgba(244, 248, 255, 0.95));
}

.projects-label {
  margin-left: auto;
  color: var(--muted);
  font-family: "Manrope", "Exo 2", system-ui, sans-serif;
  font-size: 0.9rem;
}

.projects-body {
  padding: 1rem clamp(0.8rem, 3vw, 2rem) 2rem;
}

.projects-note {
  margin: 0 0 1rem;
  border: 1px solid rgba(74, 144, 217, 0.22);
  border-radius: 12px;
  background: rgba(239, 246, 255, 0.72);
  padding: 0.8rem 0.9rem;
  color: var(--muted);
  font-family: "Manrope", "Exo 2", system-ui, sans-serif;
  line-height: 1.45;
}

.projects-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.8rem;
}

.project-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 0.8rem 0.9rem;
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  justify-content: space-between;
}

.project-card.active {
  border-color: rgba(74, 144, 217, 0.5);
  box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.22);
}

.project-main {
  min-width: 0;
}

.project-title {
  margin: 0;
  font-family: "Exo 2", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
}

.project-meta {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-family: "Manrope", "Exo 2", system-ui, sans-serif;
  font-size: 0.9rem;
}

.project-status {
  display: inline-flex;
  align-items: center;
  margin-top: 0.55rem;
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  font: 600 0.78rem "Manrope", "Exo 2", system-ui, sans-serif;
  border: 1px solid transparent;
}

.project-status.never {
  color: #475569;
  border-color: rgba(100, 116, 139, 0.28);
  background: rgba(241, 245, 249, 0.92);
}

.project-status.current {
  color: #3b6fb5;
  border-color: rgba(74, 144, 217, 0.35);
  background: rgba(219, 234, 254, 0.86);
}

.project-status.stale {
  color: #4338ca;
  border-color: rgba(67, 56, 202, 0.32);
  background: rgba(224, 231, 255, 0.9);
}

.project-actions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.projects-empty {
  margin: 0;
  border: 2px dashed var(--line);
  border-radius: 12px;
  padding: 1rem;
  color: var(--muted);
  text-align: center;
}

.empty-state {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--muted);
  background: var(--surface-strong);
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
}

.empty-state-icon {
  font-size: 2.4rem;
  margin-bottom: 0.6rem;
  opacity: 0.7;
}

.empty-state p {
  font: 600 1rem "Manrope", "Exo 2", sans-serif;
  margin: 0 0 1rem;
  color: var(--ink);
  opacity: 0.75;
}

.heading-card {
  margin-bottom: 1rem;
  border: none;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  animation: slide-in 260ms ease both;
}

.heading-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  column-gap: 0.44rem;
  row-gap: 0.34rem;
  padding: 0.52rem 0.58rem 0.44rem;
  background: transparent;
  border-bottom: none;
  min-width: 0;
}

.heading-row > .drag-handle {
  grid-column: 1;
  grid-row: 1;
}

.heading-row > .icon[data-action="toggle-collapse"] {
  grid-column: 2;
  grid-row: 1;
}

.heading-row > .heading-input {
  grid-column: 3;
  grid-row: 1;
}

.heading-row > .heading-actions {
  grid-column: 3;
  grid-row: 2;
  justify-content: flex-start;
}

.heading-input {
  flex: 1;
  min-width: 120px;
  border: none;
  border-radius: 10px;
  padding: 0.52rem 0.6rem;
  font-family: "Exo 2", system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.98);
  min-height: 2.3rem;
  line-height: 1.35;
  box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.17);
}

.heading-actions,
.node-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  max-width: 100%;
  min-width: 0;
}

.heading-style-select {
  border: none;
  border-radius: 9px;
  padding: 0.24rem 0.48rem;
  font: 600 0.78rem "Manrope", "Exo 2", system-ui, sans-serif;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.2);
}

.heading-style-select:focus {
  outline: 2px solid rgba(74, 144, 217, 0.28);
}

.heading-content {
  padding: 0.45rem 0.52rem 0.62rem 0.62rem;
}

/* Style 1 (Title): largest, bold — inherits from .heading-input defaults */

.heading-card.style-2 .heading-input {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.2);
}

.heading-card.style-3 .heading-input {
  font-size: 0.95rem;
  font-weight: 700;
  font-style: italic;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.17);
}

.heading-card.style-4 .heading-input {
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.15);
}

.outline-list {
  margin: 0.22rem 0 0.28rem;
  padding-left: 1.6rem;
}

.outline-list.numbered .outline-list {
  list-style-type: upper-alpha;
}

.outline-list.numbered .outline-list .outline-list {
  list-style-type: lower-roman;
}

.outline-list.numbered .outline-list .outline-list .outline-list {
  list-style-type: lower-alpha;
}

.outline-list.numbered .outline-list .outline-list .outline-list .outline-list {
  list-style-type: decimal;
}

.outline-list.numbered .outline-list .outline-list .outline-list .outline-list .outline-list {
  list-style-type: lower-alpha;
}

.outline-list.bulleted {
  list-style-type: disc;
}

.outline-list.bulleted .outline-list {
  list-style-type: "◦ ";
}

.outline-list.bulleted .outline-list .outline-list {
  list-style-type: square;
}

.outline-list.bulleted .outline-list .outline-list .outline-list {
  list-style-type: "▸ ";
}

.outline-list.bulleted .outline-list .outline-list .outline-list .outline-list {
  list-style-type: "▹ ";
}

.outline-list.bulleted .outline-list .outline-list .outline-list .outline-list .outline-list {
  list-style-type: "◦ ";
}

.outline-item {
  margin-bottom: 0.28rem;
}

.node-card {
  border: none;
  border-radius: 12px;
  background: transparent;
  padding: 0.24rem 0.24rem 0.2rem;
  animation: slide-in 220ms ease both;
}

.node-row {
  display: flex;
  align-items: flex-start;
  gap: 0.38rem;
}

.node-card:not(.scripture-card) .node-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  column-gap: 0.34rem;
  row-gap: 0.3rem;
  min-width: 0;
}

.node-card:not(.scripture-card) .node-row > .drag-handle {
  grid-column: 1;
  grid-row: 1;
}

.node-card:not(.scripture-card) .node-row > .icon[data-action="toggle-collapse"] {
  grid-column: 2;
  grid-row: 1;
}

.node-card:not(.scripture-card) .node-row > .node-text {
  grid-column: 3;
  grid-row: 1;
}

.node-card:not(.scripture-card) .node-row > .node-actions {
  grid-column: 3;
  grid-row: 2;
  justify-content: flex-start;
}

.node-text {
  flex: 1;
  width: 100%;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  padding: 0.48rem 0.58rem;
  min-height: 2.2rem;
  font: 500 0.99rem/1.35 "Manrope", "Exo 2", system-ui, sans-serif;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.14);
}

.rich-edit {
  cursor: text;
}

.rich-edit:empty::before {
  content: attr(data-placeholder);
  color: #94a3b8;
  pointer-events: none;
}

.children-wrap.collapsed {
  display: none;
}

.scripture-card {
  border-left: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.scripture-card .node-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0.4rem;
}

.scripture-text {
  margin: 0;
  font-family: "Manrope", "Exo 2", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 2rem;
}

.scripture-text-wrap {
  flex: 1;
  min-width: 0;
}

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

.scripture-actions {
  width: 100%;
  align-self: stretch;
}

.scripture-tools-panel {
  margin-top: 0.35rem;
  padding: 0.58rem;
  border-radius: 10px;
  background: rgba(239, 246, 255, 0.74);
  box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.16);
}

.scripture-tools-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  margin-bottom: 0.45rem;
}

.scripture-tools-header h4 {
  margin: 0;
  font: 700 0.88rem "Manrope", "Exo 2", system-ui, sans-serif;
  color: var(--ink);
}

.scripture-tools-header-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.34rem;
}

.scripture-tools-loading,
.scripture-tools-error,
.scripture-tools-attribution {
  margin: 0.35rem 0 0;
  font: 500 0.82rem/1.35 "Manrope", "Exo 2", system-ui, sans-serif;
}

.scripture-tools-error {
  color: var(--danger);
}

.scripture-tools-attribution {
  color: var(--muted);
}

.scripture-tools-list {
  margin: 0.45rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.scripture-tools-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.45rem;
  padding: 0.34rem 0.42rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.14);
}

.scripture-tools-item-main {
  display: inline-flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
  word-break: break-word;
  color: var(--ink);
  font: 500 0.85rem/1.3 "Manrope", "Exo 2", system-ui, sans-serif;
}

.scripture-tools-item-main small {
  color: var(--muted);
  font: 500 0.74rem/1.3 "Manrope", "Exo 2", system-ui, sans-serif;
}

.scripture-tools-item-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.3rem;
  max-width: 100%;
}

.scripture-tools-preview-loading,
.scripture-tools-preview-empty {
  color: var(--muted);
}

.scripture-tools-preview-error {
  color: var(--danger);
}

.scripture-tools-preview-text {
  color: var(--ink);
}

.scripture-topic-chips {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.24rem;
  margin-top: 0.08rem;
}

.scripture-topic-chip {
  border-radius: 999px;
  padding: 0.08rem 0.38rem;
  font: 600 0.68rem/1.2 "Manrope", "Exo 2", system-ui, sans-serif;
  color: var(--accent-strong);
  background: rgba(74, 144, 217, 0.12);
  box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.18);
}

.scripture-tools-footer-actions {
  margin-top: 0.42rem;
  display: flex;
  justify-content: flex-start;
}

.scripture-text sup {
  color: inherit;
  font-size: 0.72em;
  margin-right: 0.15rem;
}

.scripture-citation {
  color: inherit;
  font-size: 0.9em;
  font-style: italic;
}

.scripture-composer {
  margin-top: 0.35rem;
  padding: 0.55rem;
  border: none;
  border-radius: 10px;
  background: rgba(239, 246, 255, 0.86);
  box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.16);
}

.scripture-composer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.scripture-input {
  flex: 1;
  min-width: 210px;
  border: none;
  border-radius: 9px;
  padding: 0.45rem 0.55rem;
  font-family: "Manrope", "Exo 2", system-ui, sans-serif;
  font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.16);
}

.heading-actions button,
.node-actions button {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.14);
  color: rgba(30, 41, 59, 0.88);
  font-size: 0.82rem;
  padding: 0.25rem 0.46rem;
  min-width: 1.9rem;
}

.heading-actions .icon:not(.danger),
.node-actions .icon:not(.danger) {
  font-weight: 600;
}

.drag-handle {
  cursor: grab;
  user-select: none;
  font-size: 0.74rem;
  letter-spacing: -0.08em;
  color: #64748b;
}

.drag-handle:active {
  cursor: grabbing;
}

.heading-actions button:hover,
.node-actions button:hover {
  background: rgba(219, 234, 254, 0.55);
}

.heading-actions .danger,
.node-actions .danger {
  color: #dc2626;
}

[data-node-id] {
  position: relative;
}

[data-node-id].drop-before {
  box-shadow: inset 0 3px 0 rgba(74, 144, 217, 0.88);
  border-radius: 10px;
}

[data-node-id].drop-after {
  box-shadow: inset 0 -3px 0 rgba(74, 144, 217, 0.88);
  border-radius: 10px;
}

[data-node-id].drop-inside {
  box-shadow: inset 0 0 0 2px rgba(74, 144, 217, 0.48);
  border-radius: 10px;
}

.drag-source {
  opacity: 0.45;
}

body.dragging-outline .rich-edit {
  user-select: none;
}

.scripture-error {
  margin-top: 0.5rem;
  color: var(--danger);
  font-family: "Manrope", "Exo 2", system-ui, sans-serif;
  font-size: 0.88rem;
}

.hidden {
  display: none !important;
}

/* Final dark-mode overrides are kept here so they win over component defaults above. */
body.dark-mode {
  color-scheme: dark;
}

body.dark-mode #outline-root {
  background: linear-gradient(180deg, rgba(13, 22, 40, 0.7), rgba(10, 18, 34, 0.62));
}

body.dark-mode .empty-state {
  background: var(--surface-strong);
  box-shadow: 0 2px 12px rgba(2, 6, 23, 0.2);
}

body.dark-mode #study-title,
body.dark-mode .heading-input,
body.dark-mode .node-text,
body.dark-mode .scripture-input,
body.dark-mode #translation-select,
body.dark-mode .heading-style-select {
  background: rgba(12, 22, 40, 0.94);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.24);
}

body.dark-mode .heading-card.style-2 .heading-input,
body.dark-mode .heading-card.style-3 .heading-input,
body.dark-mode .heading-card.style-4 .heading-input {
  background: rgba(12, 22, 40, 0.94);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.24);
}

body.dark-mode .heading-actions button,
body.dark-mode .node-actions button {
  background: rgba(11, 21, 38, 0.92);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.24);
}

body.dark-mode .heading-actions button:hover,
body.dark-mode .node-actions button:hover {
  background: rgba(20, 34, 58, 0.96);
}

body.dark-mode .scripture-composer {
  background: rgba(12, 23, 43, 0.78);
  box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.24);
}

body.dark-mode .scripture-tools-panel {
  background: rgba(12, 23, 43, 0.76);
  box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.25);
}

body.dark-mode .scripture-tools-item {
  background: rgba(11, 21, 38, 0.86);
  box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.24);
}

body.dark-mode .scripture-topic-chip {
  color: #bfdbfe;
  background: rgba(74, 144, 217, 0.2);
  box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.32);
}

body.dark-mode .floating-format-toolbar {
  background: rgba(11, 21, 38, 0.98);
  border-color: rgba(74, 144, 217, 0.38);
  box-shadow: 0 14px 28px rgba(2, 6, 23, 0.58);
}

body.dark-mode .drag-handle {
  color: #a8b6cc;
}

body.dark-mode .rich-edit:empty::before {
  color: #7f93ae;
}

body.dark-mode kbd {
  background: rgba(11, 21, 38, 0.92);
  color: var(--ink);
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 760px) {
  body {
    padding:
      max(0.75rem, env(safe-area-inset-top))
      max(0.6rem, env(safe-area-inset-right))
      max(6.6rem, env(safe-area-inset-bottom))
      max(0.6rem, env(safe-area-inset-left));
  }

  .app-shell {
    border-radius: 20px;
    border-color: rgba(74, 144, 217, 0.2);
  }

  .app-header {
    padding: 1rem 0.9rem 0.95rem;
  }

  .eyebrow {
    display: none;
  }

  h1 {
    font-size: clamp(1.24rem, 6vw, 1.7rem);
    margin-top: 0;
    margin-bottom: 0.3rem;
  }

  .subtitle {
    display: none;
  }

  .title-label {
    margin-top: 0.8rem;
    font-size: 0.86rem;
  }

  #study-title {
    width: 100%;
    padding: 0.64rem 0.75rem;
    border-radius: 12px;
    font-size: 1rem;
  }

  .mobile-quick-actions {
    margin-top: 0.7rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.38rem;
  }

  .mobile-quick-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.22rem;
    border-radius: 11px;
    padding: 0.36rem 0.32rem;
    font-size: 0.74rem;
    letter-spacing: 0.01em;
    min-height: 2.05rem;
  }

  .mobile-quick-actions button span:last-child {
    min-width: 0;
    white-space: nowrap;
  }

  .toolbar {
    display: none;
  }

  .helper {
    display: none;
  }

  .version-controls {
    margin-top: 0.64rem;
    border-radius: 12px;
    padding: 0.42rem 0.5rem;
    gap: 0.34rem;
  }

  .version-controls label,
  .list-mode-label {
    font-size: 0.78rem;
  }

  #translation-select {
    padding: 0.36rem 0.58rem;
    font-size: 0.84rem;
  }

  .list-mode-toggle button {
    font-size: 0.72rem;
    padding: 0.27rem 0.52rem;
  }

  #translation-active {
    font-size: 0.77rem;
  }

  .mobile-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: max(0.46rem, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: min(560px, calc(100% - 0.9rem));
    z-index: 1300;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.18rem;
    padding: 0.36rem 0.34rem;
    border-radius: 18px;
    border: 1px solid rgba(74, 144, 217, 0.2);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.22);
    backdrop-filter: blur(14px);
    overflow: visible;
  }

  .mobile-nav-btn {
    padding: 0.34rem 0.2rem 0.35rem;
    min-height: 3.05rem;
    border-radius: 12px;
  }

  .mobile-nav-icon {
    width: 1.26rem;
    height: 1.26rem;
  }

  .mobile-nav-icon svg {
    width: 0.97rem;
    height: 0.97rem;
  }

  .mobile-nav-label {
    font-size: 0.68rem;
  }

  body.dark-mode .mobile-bottom-nav {
    border-color: rgba(74, 144, 217, 0.28);
    background: rgba(12, 21, 37, 0.94);
    box-shadow: 0 18px 34px rgba(2, 6, 23, 0.55);
  }

  .mobile-nav-menu {
    position: relative;
    display: flex;
  }

  .mobile-nav-menu .menu-trigger {
    width: 100%;
  }

  .mobile-bottom-nav .menu-panel {
    top: auto;
    left: auto;
    right: 0;
    bottom: calc(100% + 0.45rem);
    min-width: 14.3rem;
    max-width: min(19rem, calc(100vw - 1rem));
    max-height: min(58vh, 27rem);
    overflow-y: auto;
  }

  .mobile-add-btn {
    background: linear-gradient(160deg, var(--accent), var(--accent-strong));
    color: #eff6ff;
    box-shadow: 0 10px 18px rgba(74, 144, 217, 0.34);
  }

  .mobile-add-btn:hover {
    background: linear-gradient(160deg, var(--accent), var(--accent-strong));
  }

  .mobile-add-btn .mobile-nav-label {
    color: #eff6ff;
  }

  .preview-topbar,
  .projects-topbar {
    display: none;
  }

  #outline-root,
  .projects-body,
  .pdf-preview-canvas {
    padding-bottom: 6.3rem;
  }

  .heading-row,
  .node-card:not(.scripture-card) .node-row {
    grid-template-columns: auto auto minmax(0, 1fr);
    row-gap: 0.34rem;
  }

  .heading-row > .heading-actions,
  .node-card:not(.scripture-card) .node-row > .node-actions {
    grid-column: 1 / -1;
  }

  .scripture-card .node-row {
    flex-direction: column;
    align-items: stretch;
  }

  .heading-actions,
  .node-actions {
    justify-content: flex-start;
    gap: 0.28rem;
  }

  .heading-actions button,
  .node-actions button {
    font-size: 0.78rem;
    padding: 0.24rem 0.42rem;
  }

  .outline-list {
    padding-left: 1.2rem;
  }

  .pdf-page {
    padding: 0.42in;
    min-height: auto;
  }

  .preview-label {
    width: 100%;
    margin-left: 0;
  }

  .projects-label {
    width: 100%;
    margin-left: 0;
  }

  .project-card {
    flex-direction: column;
  }

  .project-actions {
    justify-content: flex-start;
  }

  .scripture-tools-item {
    flex-direction: column;
  }

  .scripture-tools-item-actions {
    justify-content: flex-start;
  }

  .pdf-preview-canvas {
    padding-top: 0.7rem;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  body {
    padding:
      max(1rem, env(safe-area-inset-top))
      max(0.85rem, env(safe-area-inset-right))
      max(7.2rem, env(safe-area-inset-bottom))
      max(0.85rem, env(safe-area-inset-left));
  }

  .app-shell {
    width: 100%;
    max-width: 100%;
    border-radius: 24px;
  }

  .app-header {
    padding: 1.1rem 1rem 1rem;
  }

  h1 {
    font-size: clamp(1.48rem, 3.2vw, 2rem);
    margin-bottom: 0.35rem;
  }

  .subtitle {
    max-width: none;
    font-size: 0.95rem;
  }

  #study-title {
    width: 100%;
  }

  .mobile-quick-actions {
    margin-top: 0.75rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.48rem;
  }

  .mobile-quick-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.26rem;
    border-radius: 12px;
    padding: 0.5rem 0.4rem;
    font-size: 0.82rem;
    min-height: 2.3rem;
  }

  .toolbar {
    display: none;
  }

  .helper {
    display: none;
  }

  .version-controls {
    margin-top: 0.66rem;
    gap: 0.42rem;
  }

  .mobile-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: max(0.62rem, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: min(760px, calc(100% - 1.2rem));
    z-index: 1300;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.24rem;
    padding: 0.44rem 0.4rem;
    border-radius: 20px;
    border: 1px solid rgba(74, 144, 217, 0.22);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.2);
    backdrop-filter: blur(16px);
    overflow: visible;
  }

  body.dark-mode .mobile-bottom-nav {
    border-color: rgba(74, 144, 217, 0.3);
    background: rgba(12, 21, 37, 0.94);
    box-shadow: 0 20px 38px rgba(2, 6, 23, 0.56);
  }

  .mobile-nav-btn {
    min-height: 3.28rem;
    border-radius: 14px;
    padding: 0.46rem 0.25rem 0.42rem;
  }

  .mobile-nav-icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .mobile-nav-icon svg {
    width: 1.12rem;
    height: 1.12rem;
  }

  .mobile-nav-label {
    font-size: 0.72rem;
  }

  .mobile-nav-menu {
    position: relative;
    display: flex;
  }

  .mobile-nav-menu .menu-trigger {
    width: 100%;
  }

  .mobile-bottom-nav .menu-panel {
    top: auto;
    left: auto;
    right: 0;
    bottom: calc(100% + 0.5rem);
    min-width: 15rem;
    max-width: min(22rem, calc(100vw - 1.2rem));
    max-height: min(60vh, 30rem);
    overflow-y: auto;
  }

  .preview-topbar,
  .projects-topbar {
    display: none;
  }

  #outline-root,
  .projects-body,
  .pdf-preview-canvas {
    padding-bottom: 6.9rem;
  }
}

@media print {
  @page {
    margin: 0.5in;
  }

  body,
  .app-shell,
  .app-shell * {
    font-family: Aptos, Arial, sans-serif !important;
  }

  body {
    background: #fff !important;
    padding: 0;
  }

  .app-shell {
    max-width: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: #fff;
  }

  .app-header {
    border: none;
    padding-bottom: 0.6rem;
  }

  .toolbar,
  .version-controls,
  .menu-group,
  .mobile-quick-actions,
  .mobile-bottom-nav,
  .helper,
  .heading-actions,
  .node-actions,
  .projects-topbar,
  .projects-note,
  .project-actions,
  .scripture-composer,
  .scripture-tools-panel,
  .eyebrow,
  .subtitle,
  h1,
  .title-label {
    display: none !important;
  }

  button {
    display: none !important;
  }

  .floating-format-toolbar {
    display: none !important;
  }

  .preview-topbar {
    display: none !important;
  }

  .projects-screen {
    display: none !important;
  }

  .app-shell.preview-active #pdf-preview-screen {
    display: block !important;
  }

  .app-shell.preview-active .pdf-preview-canvas {
    padding: 0;
    background: #fff;
  }

  .app-shell.preview-active .pdf-page {
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    box-shadow: none;
  }

  .pdf-import-marker {
    display: block !important;
    color: #fff !important;
    font-size: 1px !important;
    line-height: 1 !important;
    white-space: pre-wrap;
    word-break: break-all;
    user-select: text;
  }

  .heading-card,
  .node-card {
    border: none;
    background: #fff;
    padding: 0;
    margin: 0;
    animation: none;
  }

  .heading-row {
    border: none;
    background: #fff;
    padding: 0;
    margin-bottom: 0.3rem;
    display: block;
    overflow: visible;
  }

  #study-title,
  .heading-input,
  .node-text {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: Aptos, Arial, sans-serif;
    line-height: 1.4;
  }

  #study-title {
    width: 100%;
    font-size: 2rem;
    font-weight: 700;
    padding-bottom: 0.18rem !important;
    border-bottom: 2px solid #222 !important;
    margin-bottom: 0.85rem !important;
  }

  #study-title::placeholder {
    color: transparent;
  }

  .heading-input {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3 !important;
    min-height: 0 !important;
    padding: 0.08em 0 !important;
    overflow: visible !important;
  }

  .node-text,
  .scripture-text {
    font-size: 14px !important;
  }

  .children-wrap.collapsed {
    display: block !important;
  }

  .outline-list {
    margin-top: 0.25rem;
    break-inside: avoid;
  }

  .scripture-card {
    border-left: none;
    padding-left: 0;
    margin: 0.15rem 0;
  }

  .scripture-citation {
    color: inherit;
    font-size: 12px;
  }

  a[href]::after {
    content: "" !important;
  }
}