@import url('https://fonts.googleapis.com/css2?family=Literata:opsz,wght@7..72,400;7..72,500;7..72,600;7..72,700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --paper: #FAFAF6;
  --ink: #20261F;
  --ink-soft: #5A6258;
  --cinnabar: #A63A1B;       /* кіновар — рубрики давніх кириличних книг */
  --cinnabar-deep: #7E2B12;
  --hairline: #DEDED4;
  --chip: #EFEEE5;
  --chip-active: #20261F;
  --card: #FFFFFE;
  --serif: 'Literata', Georgia, 'Times New Roman', serif;
  --mono: 'JetBrains Mono', Consolas, monospace;
  --ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --hebrew: "SBL Hebrew", "Noto Serif Hebrew", "Noto Sans Hebrew", "Taamey Frank CL", "Ezra SIL", var(--serif);

  --placeholder: #A9AFA5;
  --btn-hover-bg: #000;
  --toggle-off: #C9C9BE;
  --toggle-on-bg: #F3EBE6;
  --error-bg: #FBF3F0;
  --ok: #2E6B33;
}

/* Early seamless reading mode initialization */
html.is-reading-mode #searchView {
  display: none !important;
}
html.is-reading-mode #readView {
  display: block !important;
}

/* ── Темна тема: за замовчуванням системна (prefers-color-scheme), можна
   перемкнути вручну кнопкою — тоді атрибут data-theme на <html> переважає. ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --paper: #1B1915; --ink: #EDE8DC; --ink-soft: #A79C87;
    --cinnabar: #E2683D; --cinnabar-deep: #FF8B5E;
    --hairline: #3A362C; --chip: #29261F; --chip-active: #EDE8DC; --card: #221F19;
    --placeholder: #6B6459; --btn-hover-bg: #fff;
    --toggle-off: #4A463C; --toggle-on-bg: #3A241C;
    --error-bg: #2E1A14; --ok: #5FBF68;
  }
}
:root[data-theme="dark"] {
  --paper: #1B1915; --ink: #EDE8DC; --ink-soft: #A79C87;
  --cinnabar: #E2683D; --cinnabar-deep: #FF8B5E;
  --hairline: #3A362C; --chip: #29261F; --chip-active: #EDE8DC; --card: #221F19;
  --placeholder: #6B6459; --btn-hover-bg: #fff;
  --toggle-off: #4A463C; --toggle-on-bg: #3A241C;
  --error-bg: #2E1A14; --ok: #5FBF68;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
  max-width: 100vw;
}

.wrap { max-width: 700px; margin: 0 auto; padding: 28px 18px 80px; }

/* ── Пошук ── */
:root { --search-h: 54px; }
.search-row { display: flex; gap: 8px; align-items: flex-start; }
.searchbar {
  flex: 1;
  height: var(--search-h);
  display: flex;
  gap: 0;
  border: 1.5px solid var(--ink);
  background: var(--card);
  border-radius: 3px;
  overflow: hidden;
}
.searchbar input {
  flex: 1;
  border: none;
  outline: none;
  padding: 13px 14px;
  font-family: var(--serif);
  font-size: 18px;
  background: transparent;
  color: var(--ink);
  min-width: 0;
}
.searchbar input::placeholder { color: var(--placeholder); font-size: 16px; }
.searchbar button {
  border: none;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--ui);
  font-size: 14.5px;
  font-weight: 600;
  padding: 0 22px;
  cursor: pointer;
}
.searchbar button:hover { background: var(--btn-hover-bg); }
.searchbar .search-clear-btn {
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--ui);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  padding: 0 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
}
.searchbar .search-clear-btn:hover {
  background: transparent;
  color: var(--cinnabar);
}
.searchbar .search-clear-btn[hidden] {
  display: none;
}
.searchbar input:focus-visible { outline: none; }
.searchbar:focus-within { border-color: var(--cinnabar); }

/* ── Кнопки книга/розділ/вірш ── */
.ref-picker { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.picker-item { position: relative; flex: 1; min-width: 90px; }
.picker-btn {
  width: 100%;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 9px 10px;
  cursor: pointer;
  text-align: center;
}
.picker-btn:hover { border-color: var(--cinnabar); }
.picker-btn[aria-expanded="true"] { border-color: var(--cinnabar); background: var(--toggle-on-bg); }
.picker-btn:focus-visible { outline: 2px solid var(--cinnabar); outline-offset: 1px; }

.picker-btn-split {
  display: flex;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  background: var(--card);
}
.split-half { position: relative; flex: 1; }
.split-half:first-child::after {
  content: '';
  position: absolute;
  top: 8px; bottom: 8px; right: 0;
  width: 1px;
  background: var(--hairline);
}
.split-half:first-child .picker-btn-half { border-radius: 3px 0 0 3px; }
.split-half:last-child .picker-btn-half { border-radius: 0 3px 3px 0; }
.picker-btn-half {
  width: 100%;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink);
  background: none;
  border: none;
  padding: 9px 12px;
  cursor: pointer;
  text-align: center;
}
.picker-btn-half:hover { background: var(--chip); }
.picker-btn-half[aria-expanded="true"] { background: var(--toggle-on-bg); color: var(--cinnabar); }
.picker-btn-half:focus-visible { outline: 2px solid var(--cinnabar); outline-offset: -2px; }
.picker-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 170px;
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  padding: 6px;
  z-index: 25;
}
.picker-dropdown[hidden] { display: none; }
.picker-group-header {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 8px 3px 8px;
  user-select: none;
  border-top: 1px solid var(--hairline);
  margin-top: 4px;
}
.picker-group-header.first {
  border-top: none;
  margin-top: 0;
  padding-top: 2px;
}
.picker-option {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 6px 10px;
  border: none;
  background: none;
  color: var(--ink);
  border-radius: 3px;
  cursor: pointer;
}
.picker-option:hover { background: var(--chip); }
.picker-option.active { background: var(--chip-active); color: var(--paper); }
.picker-option:focus-visible { outline: 2px solid var(--cinnabar); outline-offset: -2px; }

/* ── Гамбургер-меню ── */
.menu-wrap { position: relative; flex: none; }
.hamburger-btn {
  width: var(--search-h);
  height: var(--search-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border: 1.5px solid var(--ink);
  background: var(--card);
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  flex: none;
}
.hamburger-btn span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 1px; }
.hamburger-btn:hover { border-color: var(--cinnabar); }
.hamburger-btn[aria-expanded="true"] { border-color: var(--cinnabar); background: var(--toggle-on-bg); }
.hamburger-btn[aria-expanded="true"] span { background: var(--cinnabar); }
.hamburger-btn:focus-visible { outline: 2px solid var(--cinnabar); outline-offset: 2px; }

/* ── Перемикач «Пошук цитат» / «Читання» ── */
.mode-toggle-btn {
  height: var(--search-h);
  padding: 0 16px;
  font-family: var(--ui);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  cursor: pointer;
  flex: none;
  white-space: nowrap;
}
.mode-toggle-btn:hover { border-color: var(--cinnabar); }
.mode-toggle-btn.on { border-color: var(--cinnabar); background: var(--toggle-on-bg); color: var(--cinnabar-deep); }
.mode-toggle-btn:focus-visible { outline: 2px solid var(--cinnabar); outline-offset: 2px; }

.menu-panel {
  position: absolute;
  top: 46px; right: 0;
  width: 320px;
  max-width: calc(100vw - 36px);
  max-height: 78vh;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  padding: 16px;
  z-index: 30;
}
.menu-panel[hidden] { display: none; }
.menu-panel .modules-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--hairline);
}

.toolbar-vert { display: flex; flex-direction: column; gap: 8px; }
.toolbar-vert .toggle-btn { width: 100%; }

.toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ui);
  font-size: 12.5px;
  color: var(--ink-soft);
  background: var(--chip);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 5px 13px 5px 9px;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.toggle-btn:hover { border-color: var(--ink-soft); }
.toggle-btn .toggle-dot {
  width: 26px; height: 15px;
  border-radius: 999px;
  background: var(--toggle-off);
  position: relative;
  transition: background 0.15s;
  flex: none;
}
.toggle-btn .toggle-dot::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
}
.toggle-btn.on { color: var(--ink); background: var(--toggle-on-bg); border-color: var(--cinnabar); }
.toggle-btn.on .toggle-dot { background: var(--cinnabar); }
.toggle-btn.on .toggle-dot::after { transform: translateX(11px); }
.toggle-btn:focus-visible { outline: 2px solid var(--cinnabar); outline-offset: 2px; }

/* ── Історія ── */
.history { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.history-label { font-size: 11.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.08em; margin-right: 2px; }
.hist-item {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--cinnabar);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.hist-item:hover { color: var(--cinnabar-deep); }

/* ── Гортання ±1 вірш ── */
.verse-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 22px;
  padding: 8px 0;
  border-top: 1px dashed var(--hairline);
  border-bottom: 1px dashed var(--hairline);
}
.verse-nav[hidden] { display: none; }
.nav-arrow {
  width: 34px; height: 34px;
  border: 1px solid var(--cinnabar);
  background: none;
  color: var(--cinnabar);
  border-radius: 3px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  font-family: var(--ui);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.nav-arrow:hover:not(:disabled) { background: var(--cinnabar); color: var(--paper); }
.nav-arrow:disabled { opacity: 0.32; cursor: default; border-color: var(--hairline); color: var(--ink-soft); }
.nav-arrow:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.nav-ref {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--cinnabar);
  min-width: 112px;
  text-align: center;
}

/* ── Режим читання ── */
.read-text {
  margin-top: 24px;
  font-family: var(--serif);
  font-size: 17.5px;
  line-height: 1.75;
  color: var(--ink);
}
.read-text.heb {
  font-family: var(--hebrew);
  direction: rtl;
  text-align: right;
  font-size: 22px;
  line-height: 2;
}
.rv-para { margin-bottom: 0.9em; }
.rv-para:last-child { margin-bottom: 0; }
.rv-verse {
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.12s;
}
.rv-verse:hover { background: var(--chip); }
.rv-verse.active { background: var(--toggle-on-bg); }
.rv-num {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-soft);
  vertical-align: super;
  margin-right: 1px;
  user-select: none;
}
.read-text.heb .rv-num { vertical-align: text-top; font-size: 11px; }

.rv-q { margin-bottom: 0.15em; text-indent: -1.1em; padding-left: 1.1em; }
.rv-q.rv-q2 { padding-left: 2.4em; }
.rv-q + .rv-para, .rv-para + .rv-q { margin-top: 0.9em; }
.rv-gap { height: 0.75em; }
.rv-poetry .rv-verse { display: block; }
.rv-head {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  margin: 1.5em 0 0.55em;
}
.read-text.heb .rv-head {
  font-family: var(--hebrew);
}
.rv-head:first-child { margin-top: 0; }
.rv-desc { font-style: italic; color: var(--ink-soft); margin-bottom: 0.9em; }

.read-empty-note { margin-top: 26px; color: var(--ink-soft); font-size: 13.5px; }

.read-copyright-notice {
  margin-top: 2.5em;
  padding-top: 1em;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  text-align: center;
}
.read-copyright-notice a {
  color: inherit;
  text-decoration: underline;
}
.read-loading { margin-top: 26px; color: var(--ink-soft); font-size: 13.5px; }

.read-copy-bar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: calc(100% - 36px);
  max-width: 664px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--cinnabar);
  border-radius: 4px;
  padding: 10px 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  z-index: 20;
}
.read-copy-bar[hidden] { display: none; }
.read-copy-bar .rc-ref { font-family: var(--serif); font-size: 14px; color: var(--cinnabar); font-weight: 500; }
.rc-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ── Результати ── */
#results { margin-top: 26px; display: flex; flex-direction: column; gap: 16px; }

.verse-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--cinnabar);
  border-radius: 3px;
  padding: 16px 18px 13px;
}
.verse-text {
  font-family: var(--serif);
  font-size: 17.5px;
  line-height: 1.62;
  color: var(--ink);
}
.verse-text .ref {
  color: var(--cinnabar);
  font-weight: 500;
  white-space: nowrap;
}
.ref-link {
  display: inline;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  color: var(--cinnabar);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  border-radius: 2px;
}
.ref-link:hover { color: var(--cinnabar-deep); }
.ref-link:focus-visible { outline: 2px solid var(--cinnabar); outline-offset: 1px; }

.heb,
:lang(he) {
  font-family: var(--hebrew);
}

.verse-text.heb {
  font-family: var(--hebrew);
  font-size: 24px;
  line-height: 1.9;
  direction: rtl;
  text-align: right;
}
.verse-text.heb .ref {
  font-size: 17.5px;
  direction: ltr;
  unicode-bidi: embed;
}
.verse-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px dashed var(--hairline);
}
.verse-version {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}
.verse-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.verse-actions .action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.action-btn-icon {
  font-style: normal;
  line-height: 1;
}

/* ── .action-btn: unified .copy-btn / .compare-btn styles ── */
.action-btn {
  font-family: var(--ui);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cinnabar);
  background: none;
  border: 1px solid var(--cinnabar);
  border-radius: 3px;
  padding: 4px 13px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.action-btn:hover { background: var(--cinnabar); color: var(--paper); }
.action-btn.copied { background: var(--cinnabar); color: var(--paper); }
.action-btn.active { background: var(--cinnabar); color: var(--paper); border-color: var(--cinnabar); }
.action-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

.v-badge, .rv-badge {
  font-size: 0.8em;
  margin-left: 3px;
  vertical-align: middle;
  display: inline-block;
  opacity: 0.9;
}

.rv-note-trigger {
  background: none;
  border: none;
  padding: 1px 3px;
  cursor: pointer;
  font-size: 0.85em;
  vertical-align: middle;
  border-radius: 4px;
  transition: transform 0.15s ease, background 0.15s ease;
  line-height: 1;
}
.rv-note-trigger:hover {
  transform: scale(1.25);
  background: color-mix(in srgb, var(--cinnabar) 15%, transparent);
}
.rv-note-trigger:focus-visible {
  outline: 2px solid var(--cinnabar);
  outline-offset: 1px;
}

/* ── Interactive Note Popover / Tooltip ── */
.rv-note-popover {
  position: fixed;
  z-index: 10000;
  width: 310px;
  max-width: calc(100vw - 24px);
  background: var(--card);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
  padding: 14px 16px;
  font-family: var(--ui);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px) scale(0.98);
  transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.18s;
  pointer-events: none;
}

.rv-note-popover.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.rv-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
}

.rv-popover-title-box {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rv-popover-icon {
  font-size: 1rem;
}

.rv-popover-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #8b263e;
}
:root[data-theme="dark"] .rv-popover-title {
  color: #e2683d;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .rv-popover-title {
    color: #e2683d;
  }
}

.rv-popover-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.12s, background 0.12s;
}
.rv-popover-close:hover {
  color: var(--ink);
  background: var(--chip);
}

.rv-popover-content {
  max-height: 240px;
  overflow-y: auto;
  padding-right: 2px;
}

.rv-popover-item {
  padding: 8px 0;
}
.rv-popover-item + .rv-popover-item {
  border-top: 1px dashed var(--hairline);
}

.rv-popover-text {
  font-family: var(--serif);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}

.rv-popover-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.rv-popover-actions {
  display: flex;
  gap: 6px;
}

.rv-popover-btn {
  font-family: var(--ui);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--hairline);
  background: var(--chip);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.12s ease;
}
.rv-popover-btn:hover {
  background: #8b263e;
  color: #ffffff;
  border-color: #8b263e;
}
:root[data-theme="dark"] .rv-popover-btn:hover {
  background: #e2683d;
  color: #1b1915;
  border-color: #e2683d;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .rv-popover-btn:hover {
    background: #e2683d;
    color: #1b1915;
    border-color: #e2683d;
  }
}

.rv-popover-btn.rv-popover-del:hover {
  background: #b3261e;
  color: #ffffff;
  border-color: #b3261e;
}

.rv-popover-footer {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
  text-align: center;
}

.rv-popover-add-btn {
  width: 100%;
  font-family: var(--ui);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px dashed color-mix(in srgb, var(--cinnabar) 50%, transparent);
  background: color-mix(in srgb, var(--cinnabar) 8%, transparent);
  color: var(--cinnabar);
  cursor: pointer;
  transition: all 0.15s ease;
}
.rv-popover-add-btn:hover {
  background: var(--cinnabar);
  color: var(--paper);
  border-style: solid;
}


/* Keep .copy-btn and .compare-btn as aliases for backward compatibility */
.copy-btn, .compare-btn {
  font-family: var(--ui);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cinnabar);
  background: none;
  border: 1px solid var(--cinnabar);
  border-radius: 3px;
  padding: 4px 13px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.copy-btn:hover, .compare-btn:hover { background: var(--cinnabar); color: var(--paper); }
.copy-btn.copied { background: var(--cinnabar); color: var(--paper); }
.copy-btn:focus-visible, .compare-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* ── Керування картками ── */
.verse-card.closable,
.not-found.closable { padding-top: 34px; }
.card-handle, .card-close {
  position: absolute;
  top: 6px;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none;
  border-radius: 3px;
}
.card-handle {
  left: 6px;
  color: var(--ink-soft);
  font-size: 15px;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.card-close {
  right: 6px;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.card-close:hover { background: var(--chip); color: var(--cinnabar-deep); }
.card-close:focus-visible, .card-handle:focus-visible { outline: 2px solid var(--cinnabar); outline-offset: 1px; }
.verse-card.dragging, .not-found.dragging { opacity: 0.6; box-shadow: 0 6px 18px rgba(0,0,0,0.25); transition: none; }
.verse-card.drag-over, .not-found.drag-over { outline: 2px dashed var(--cinnabar); outline-offset: -2px; }

/* ── Кнопка «+» додати ще переклад ── */
.add-card-wrap { position: relative; display: flex; justify-content: center; margin-top: 18px; }
.add-card-wrap[hidden] { display: none; }
.add-card-wrap .picker-dropdown { left: 50%; transform: translateX(-50%); width: 210px; }

.not-found {
  position: relative;
  font-size: 13.5px;
  color: var(--ink-soft);
  border-left: 3px solid var(--hairline);
  padding: 8px 14px;
}
.error-msg {
  font-size: 13.5px;
  color: var(--cinnabar-deep);
  border: 1px solid var(--cinnabar);
  border-radius: 3px;
  background: var(--error-bg);
  padding: 10px 14px;
}

/* ── Порожній стан ── */
.empty {
  margin-top: 34px;
  padding: 26px 22px;
  border: 1.5px dashed var(--hairline);
  border-radius: 4px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 14px;
}
.empty .big { font-family: var(--serif); font-size: 19px; color: var(--ink); margin-bottom: 6px; }

/* ── Модулі / налаштування ── */
.modules-section { margin-top: 44px; border-top: 1px solid var(--hairline); padding-top: 8px; }
details summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 10px 0;
  list-style: none;
  user-select: none;
}
details summary::before { content: '▸ '; color: var(--cinnabar); }
details[open] summary::before { content: '▾ '; }
details summary:focus-visible { outline: 2px solid var(--cinnabar); outline-offset: 2px; }

.mod-body { padding: 6px 0 14px; }
.mod-def-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
  cursor: pointer;
  font-size: 13px;
}
.mod-code { font-family: var(--mono); font-size: 11.5px; }
.mod-name { color: var(--ink-soft); }

.spin {
  display: inline-block;
  width: 13px; height: 13px;
  border: 2px solid var(--hairline);
  border-top-color: var(--cinnabar);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

@media (max-width: 480px) {
  .wrap { padding: 20px 13px 60px; }
  .brand { font-size: 25px; }
  .verse-text { font-size: 16.5px; }
  .verse-text.heb { font-size: 21px; }
  .verse-text.heb .ref { font-size: 16.5px; }
  .searchbar input { font-size: 16px; }
  .menu-panel { max-width: calc(100vw - 26px); }
  .mode-toggle-btn { padding: 0 10px; font-size: 12.5px; }
  .read-text { font-size: 16.5px; }
  .read-text.heb { font-size: 19px; }
}

/* ═══════════ Full-Text KWIC Search Styles ═══════════ */
.kwic-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  font-size: 14px;
}

.kwic-count {
  color: var(--ink);
}

.cancel-search-btn {
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--ink-soft);
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s ease;
}
.cancel-search-btn:hover {
  background: var(--chip);
  color: var(--cinnabar);
  border-color: var(--cinnabar);
}

.kwic-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.kwic-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  font-size: 14.5px;
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kwic-item:hover {
  border-color: var(--cinnabar);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.kwic-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
}

mark.kwic-match {
  background: rgba(226, 104, 61, 0.22);
  color: inherit;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 4px;
}

.kwic-link-btn {
  flex-shrink: 0;
  background: var(--chip);
  border: 1px solid var(--hairline);
  color: var(--cinnabar);
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.kwic-link-btn:hover {
  background: var(--cinnabar);
  color: #ffffff;
  border-color: var(--cinnabar);
}

.kwic-more-wrap {
  text-align: center;
  margin: 16px 0 24px;
}

.kwic-more-btn {
  background: var(--cinnabar);
  color: #ffffff;
  border: none;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.kwic-more-btn:hover {
  opacity: 0.9;
}

.kwic-end-msg {
  color: var(--ink-soft);
  font-size: 13px;
  font-style: italic;
}

.text-search-loading {
  padding: 16px;
  color: var(--ink-soft);
  font-style: italic;
  text-align: center;
}

@media (max-width: 640px) {
  .kwic-item {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .kwic-text {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    width: 100%;
  }
  .kwic-link-btn {
    align-self: flex-end;
  }
  .read-copy-bar {
    bottom: 12px;
    width: calc(100% - 24px);
    max-width: calc(100vw - 24px);
    padding: 8px 10px;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .read-copy-bar .rc-ref {
    font-size: 13.5px;
    text-align: center;
    width: 100%;
    white-space: nowrap;
  }
  .rc-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    width: 100%;
  }
  .rc-actions .action-btn {
    flex: 1 1 calc(50% - 6px);
    max-width: calc(50% - 3px);
    text-align: center;
    padding: 6px 8px;
    font-size: 12.5px;
    white-space: nowrap;
    justify-content: center;
  }
  .verse-meta {
    flex-wrap: wrap;
    gap: 6px;
  }
  .verse-actions {
    gap: 6px;
  }
  .verse-actions .action-btn {
    padding: 4px 8px;
    min-width: 32px;
    min-height: 28px;
    text-align: center;
  }
  .verse-actions .action-btn .action-btn-label,
  .verse-actions .action-btn .btn-label {
    display: none;
  }
}

/* ═══════════ Reading Plans (Плани читання) ═══════════ */

#plansView {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* The ID rule above outranks the UA's [hidden] { display: none }, so without
   this the block flashes at the bottom of the page until setupPlansViewPlacement()
   moves it into the drawer. */
#plansView[hidden] { display: none !important; }

.plans-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 12px;
}

.plans-header h1 {
  font-family: var(--serif);
  font-size: 24px;
  color: var(--ink);
}

.plans-back-btn {
  align-self: flex-start;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--cinnabar);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.plans-back-btn:hover {
  color: var(--cinnabar-deep);
  text-decoration: underline;
}

.menu-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--ui);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  background: var(--chip);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 8px 12px;
  cursor: pointer;
  width: 100%;
  transition: background 0.12s, border-color 0.12s;
}

.menu-action-btn:hover {
  background: var(--toggle-on-bg);
  border-color: var(--cinnabar);
}

.plans-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.plan-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}

.plan-card:hover {
  border-color: var(--cinnabar);
  transform: translateY(-1px);
}

.plan-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.plan-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.plan-card-meta {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 4px;
}

.plan-card-progress-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--cinnabar);
  white-space: nowrap;
}

.plan-progress-bar-container {
  background: var(--chip);
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
  margin-top: 10px;
  width: 100%;
}

.plan-progress-bar-fill {
  background: var(--cinnabar);
  height: 100%;
  width: 0%;
  transition: width 0.3s ease;
}

/* Plan Form */
.plan-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.form-group select,
.form-group input[type="text"],
.form-group input[type="number"] {
  font-family: var(--ui);
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  outline: none;
}

.form-group select:focus,
.form-group input:focus {
  border-color: var(--cinnabar);
}

.plan-template-desc {
  font-size: 12.5px;
  color: var(--ink-soft);
  background: var(--chip);
  padding: 8px 12px;
  border-radius: 4px;
  border-left: 3px solid var(--cinnabar);
  margin-top: 4px;
}

.books-preset-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.preset-btn {
  font-family: var(--ui);
  font-size: 11.5px;
  padding: 3px 8px;
  background: var(--chip);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.1s;
}

.preset-btn:hover {
  background: var(--hairline);
}

.books-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--hairline);
  padding: 10px;
  border-radius: 4px;
  margin-top: 8px;
  background: var(--paper);
}

.book-checkbox-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  cursor: pointer;
}

.book-checkbox-item input {
  cursor: pointer;
}

/* Plan Details */
.plan-summary-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--hairline);
}

.summary-row:last-of-type {
  border-bottom: none;
}

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

.tc-btn-danger {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: 4px;
  border: none;
  background: #a63a1b;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tc-btn-danger:hover {
  background: #7e2b12;
}

.days-list-container {
  margin-top: 20px;
}

.days-list-container h3 {
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 6px;
  margin-bottom: 10px;
}

.plan-days-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 4px;
}

.plan-day-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 8px 12px;
  transition: background 0.3s ease, opacity 0.3s ease, border-color 0.3s ease;
  gap: 12px;
}

.plan-day-row:hover {
  background: var(--chip);
}

.plan-day-left {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  flex: 1;
}

.plan-day-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.plan-day-info {
  display: flex;
  flex-direction: column;
}

.plan-day-number {
  font-size: 13.5px;
  font-weight: 600;
}

.plan-day-passages {
  font-size: 12px;
  color: var(--ink-soft);
}

.plan-day-read-btn {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 500;
  color: var(--cinnabar);
  background: none;
  border: 1px solid var(--cinnabar);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
}

.plan-day-read-btn:hover {
  background: var(--cinnabar);
  color: #fff;
}

.plan-day-row.completed {
  opacity: 0.65;
  border-color: transparent;
  background: color-mix(in srgb, var(--card) 92%, transparent);
}

.plan-day-row.completed .plan-day-number {
  color: var(--ink-soft);
  text-decoration: none;
}

.plan-day-number {
  font-size: 13.5px;
  font-weight: 600;
  position: relative;
  display: inline-block;
}

.plan-day-number::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--ink-soft);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translateY(-50%);
}

.plan-day-row.completed .plan-day-number::after {
  width: 100%;
}

/* Plan Reading View Integration */
.plan-read-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  margin-bottom: 12px;
}

.plan-read-header[hidden] {
  display: none !important;
}

.plan-read-header .action-btn {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 500;
  color: var(--cinnabar);
  background: none;
  border: 1px solid var(--cinnabar);
  border-radius: 4px;
  padding: 3px 8px;
  cursor: pointer;
}

.plan-read-header .action-btn:hover {
  background: var(--cinnabar);
  color: #fff;
}

.plan-read-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.plan-read-footer {
  display: flex;
  justify-content: center;
  padding: 16px 0;
  border-top: 1px dashed var(--hairline);
  margin-top: 20px;
}

.plan-read-footer[hidden] {
  display: none !important;
}

.plan-mark-read-btn {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 6px;
  border: 1px solid var(--cinnabar);
  background: var(--toggle-on-bg);
  color: var(--cinnabar);
  cursor: pointer;
  transition: all 0.2s ease;
}

.plan-mark-read-btn:hover {
  background: var(--cinnabar);
  color: #fff;
}

.plan-chapter-wrapper {
  margin-bottom: 28px;
}

.plan-chapter-wrapper:not(:last-child) {
  position: relative;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px dashed var(--hairline);
}

.plan-chapter-wrapper:not(:last-child)::after {
  content: '❖';
  position: absolute;
  bottom: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg, var(--bar-bg, #f4efe6));
  padding: 0 10px;
  color: var(--ink-soft);
  font-size: 14px;
}

.plan-chapter-wrapper:last-of-type {
  margin-bottom: 0;
}

.plan-passage-heading {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--cinnabar);
  margin-bottom: 14px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--hairline);
}

/* Catch Up Alert & Button Styling */
.plan-catchup-alert {
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--cinnabar) 10%, var(--card));
  border: 1px solid color-mix(in srgb, var(--cinnabar) 30%, transparent);
  border-radius: 6px;
  padding: 12px 16px;
  margin-top: 16px;
  gap: 12px;
  animation: planFadeIn 0.3s ease-out;
}

.plan-catchup-alert[hidden] {
  display: none !important;
}

.plan-catchup-alert .alert-icon {
  font-size: 1.5rem;
}

.plan-catchup-alert .alert-content {
  flex: 1;
}

.plan-catchup-alert .alert-title {
  font-weight: bold;
  font-size: 14px;
  color: var(--cinnabar);
}

.plan-catchup-alert .alert-desc {
  font-size: 12.5px;
  opacity: 0.85;
  margin-top: 2px;
}

.tc-btn-warning {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid var(--cinnabar);
  background: var(--cinnabar);
  color: #fff;
  cursor: pointer;
  transition: opacity 0.2s;
  white-space: nowrap;
}

.tc-btn-warning:hover {
  opacity: 0.9;
}

/* Catch Up Modal Option cards */
.catchup-option-card {
  transition: transform 0.2s, border-color 0.2s, background-color 0.2s;
  background: var(--card) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--border-color) !important;
  cursor: pointer;
}

.catchup-option-card:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--cinnabar) !important;
  background: color-mix(in srgb, var(--cinnabar) 8%, var(--card)) !important;
}

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

/* Reading Statistics & Heatmap */
.plan-stats-card {
  animation: planFadeIn 0.3s ease-out;
}

.heatmap-container {
  margin-top: 12px;
}

.heatmap-grid {
  display: grid;
  grid-template-rows: repeat(7, 10px);
  grid-auto-flow: column;
  gap: 3px;
  justify-content: start;
  overflow-x: auto;
  padding: 6px 4px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  /* Custom scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: var(--hairline) transparent;
}

.heatmap-grid::-webkit-scrollbar {
  height: 4px;
}

.heatmap-grid::-webkit-scrollbar-thumb {
  background-color: var(--hairline);
  border-radius: 4px;
}

.heatmap-cell {
  width: 10px;
  height: 10px;
  background-color: var(--chip);
  border-radius: 2px;
  cursor: pointer;
  transition: transform 0.1s ease, background-color 0.2s ease;
}

.heatmap-cell:hover {
  transform: scale(1.2);
  z-index: 10;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
}

/* Light Mode levels using opacity/shades of var(--cinnabar) */
.heatmap-cell.level-1 { background-color: rgba(166, 58, 27, 0.22) !important; }
.heatmap-cell.level-2 { background-color: rgba(166, 58, 27, 0.45) !important; }
.heatmap-cell.level-3 { background-color: rgba(166, 58, 27, 0.72) !important; }
.heatmap-cell.level-4 { background-color: var(--cinnabar) !important; }

/* Dark Mode levels using opacity/shades of var(--cinnabar) (#E2683D) */
:root[data-theme="dark"] .heatmap-cell.level-1 { background-color: rgba(226, 104, 61, 0.22) !important; }
:root[data-theme="dark"] .heatmap-cell.level-2 { background-color: rgba(226, 104, 61, 0.45) !important; }
:root[data-theme="dark"] .heatmap-cell.level-3 { background-color: rgba(226, 104, 61, 0.72) !important; }
:root[data-theme="dark"] .heatmap-cell.level-4 { background-color: var(--cinnabar) !important; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .heatmap-cell.level-1 { background-color: rgba(226, 104, 61, 0.22) !important; }
  :root:not([data-theme]) .heatmap-cell.level-2 { background-color: rgba(226, 104, 61, 0.45) !important; }
  :root:not([data-theme]) .heatmap-cell.level-3 { background-color: rgba(226, 104, 61, 0.72) !important; }
  :root:not([data-theme]) .heatmap-cell.level-4 { background-color: var(--cinnabar) !important; }
}

/* Simple toast utility */
.share-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink-soft);
  color: var(--paper);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.9rem;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.share-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ── Приватні переклади: кнопка у випадаючому списку та модальні вікна ── */
.picker-option.picker-add-translation-btn {
  border-top: 1px dashed var(--hairline);
  margin-top: 5px;
  padding-top: 7px;
  color: var(--cinnabar);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.picker-option.picker-add-translation-btn:hover {
  background: var(--chip);
  color: var(--cinnabar-dark, #8b263e);
}
.picker-add-icon {
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}

.trans-upload-card {
  max-width: 520px;
  text-align: left;
  padding: 2rem 2rem;
}
.tc-modal-close-icon {
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  border: none;
  background: transparent;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}
.tc-modal-close-icon:hover {
  color: var(--cinnabar);
}

.trans-quota-bar {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 1rem;
  font-family: var(--sans);
}

.trans-dropzone {
  border: 2px dashed var(--hairline);
  border-radius: 8px;
  padding: 1.5rem 1rem;
  text-align: center;
  background: color-mix(in srgb, var(--bar-ink, #2b2620) 3%, transparent);
  transition: border-color 0.2s, background-color 0.2s;
  cursor: pointer;
}
.trans-dropzone.drag-over {
  border-color: var(--cinnabar);
  background: var(--chip);
}
.trans-drop-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.trans-drop-icon {
  font-size: 2rem;
}
.trans-drop-label {
  font-size: 0.9rem;
  color: var(--ink);
  font-family: var(--sans);
}
.trans-selected-file {
  margin-top: 0.8rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--cinnabar);
  word-break: break-all;
}
.trans-file-size {
  color: var(--ink-soft);
  margin-left: 0.4rem;
}

.trans-alert {
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
  font-size: 0.88rem;
  margin-top: 0.8rem;
  font-family: var(--sans);
}
.trans-alert.error {
  background: #fde8e8;
  color: #9b1c1c;
  border: 1px solid #f8b4b4;
}
.trans-alert.success {
  background: #def7ec;
  color: #03543f;
  border: 1px solid #84e1bc;
}
.trans-alert.info {
  background: #e1effe;
  color: #1e429f;
  border: 1px solid #a4cafe;
}

.trans-user-list-section {
  margin-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  padding-top: 1rem;
}
.trans-user-list-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
  color: var(--ink);
  font-family: var(--sans);
}
.trans-user-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 180px;
  overflow-y: auto;
}
.trans-empty-note {
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-style: italic;
  padding: 0.5rem 0;
}
.trans-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.75rem;
  border-radius: 6px;
  background: var(--card);
  border: 1px solid var(--hairline);
  gap: 0.5rem;
}
.trans-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.trans-item-name {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trans-item-meta {
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-family: var(--mono);
}
.trans-delete-btn {
  background: none;
  border: 1px solid color-mix(in srgb, #c81e1e 30%, transparent);
  color: #c81e1e;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.trans-delete-btn:hover {
  background: #fde8e8;
  border-color: #f8b4b4;
}