/* ReadHero базовые стили, оптимизировано для мобильных */
:root {
  --bg: #0e0f10;
  --panel: #141518;
  --text: #e7e7ea;
  --muted: #a2a2ad;
  /* Brand palette */
  --primary: #F29F05;   /* CTA */
  --accent:  #F294C0;   /* Secondary */
  --danger:  #A65424;   /* Warnings */
  --cream:   #F2DCC2;   /* Light blocks if needed */
  --orange:  #F27405;
  --shadow:  0 8px 24px rgba(0,0,0,0.25);
  --circle-bg: #1b1c20;
  /* Highlights */
  --hl-bg: rgba(242, 159, 5, 0.35);
  --hl-underline: rgba(242, 159, 5, 0.85);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji';
  color: var(--text);
  background: var(--bg);
}

#topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px;
  background: var(--panel);
  box-shadow: var(--shadow);
  z-index: 10;
}
#topbar h1 { font-size: 16px; margin: 0; font-weight: 600; }
#topbar #btnMore, #topbar #btnImport, #topbar #btnHome { background: none; border: 1px solid var(--accent); color: var(--text); padding: 6px 10px; border-radius: 8px; }
#topbar .topbar-left { display:flex; align-items:center; gap:8px; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 58vw; }

#tabbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 56px;
  background: var(--panel);
  display: grid; grid-template-columns: repeat(5, 1fr);
  box-shadow: var(--shadow);
  z-index: 10;
}
#tabbar .tab { color: var(--muted); text-decoration: none; display:flex; align-items:center; justify-content:center; font-size: 13px; }
#tabbar .tab.active { color: var(--text); font-weight: 600; }

#app {
  position: relative;
  padding-top: 56px; /* topbar */
  padding-bottom: 56px; /* tabbar */
  min-height: 100vh;
}

/* Главная: поиск */
.search-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid #2a2b2f;
  color: var(--text);
  border-radius: 10px;
  padding: 10px 12px;
}

/* Круглые кнопки */
.circle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 12px; }
.circle {
  width: 88px; height: 88px; border-radius: 50%;
  justify-self: center;
  background: var(--circle-bg); color: var(--text);
  border: 1px solid #2a2b2f;
  display: flex; align-items: center; justify-content: center;
}

/* Контейнер чтения */
.reader-container {
  height: calc(100vh - 112px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 14px 24px;
}
#viewer {
  height: 100%;
}

/* Кнопки навигации чтения */
.reader-controls {
  position: fixed;
  right: 10px;
  bottom: 66px; /* над таббаром */
  display: flex;
  gap: 8px;
  z-index: 11;
}
.reader-controls button {
  background: var(--panel);
  color: var(--text);
  border: 1px solid #2a2b2f;
  border-radius: 12px;
  padding: 8px 12px;
  box-shadow: var(--shadow);
}
.reader-controls button.primary { background: var(--primary); color: #fff; border-color: transparent; }

/* Всплывающий тулбар при выделении */
#selectionToolbar {
  position: fixed;
  background: var(--panel);
  border: 1px solid #2a2b2f;
  border-radius: 12px;
  padding: 6px;
  gap: 6px;
  display: flex;
  box-shadow: var(--shadow);
}
#selectionToolbar.hidden { display: none; }
#selectionToolbar button { background: var(--primary); color: white; border: none; border-radius: 8px; padding: 6px 10px; }
#selectionToolbar button#btnAddNote { background: #F294C033; color: var(--text); border: 1px solid var(--accent); }

/* Карточки списков */
.list { padding: 12px; display: grid; gap: 10px; }
.card {
  background: var(--panel);
  border: 1px solid #2a2b2f;
  border-radius: 12px;
  padding: 12px;
}
.card .meta { color: var(--muted); font-size: 12px; }
.card .actions { display:flex; gap: 8px; margin-top: 8px; }
.card .actions button { background: #F294C033; color: var(--text); border: 1px solid var(--accent); border-radius: 8px; padding: 6px 10px; }
.card .actions button.danger { background: #A6542422; border-color: var(--danger); }

/* Сетка книг */
.book-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 4px; }
.book-card { background: var(--panel); border: 1px solid #2a2b2f; border-radius: 12px; padding: 10px; display:flex; flex-direction: column; gap: 8px; }
.book-card .cover { height: 120px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--primary)); }
.book-card .title { font-size: 13px; }
.book-card .read-btn { background: var(--primary); color: #fff; border: none; border-radius: 8px; padding: 6px 10px; }

/* Подсветка выделенных цитат в рендере EPUB */
.epubjs-hl { background: var(--hl-bg) !important; box-shadow: inset 0 -2px 0 0 var(--hl-underline); }

/* Dialog */
 dialog { border: 1px solid #2a2b2f; border-radius: 12px; background: var(--panel); color: var(--text); }
 dialog textarea { width: 60vw; max-width: 480px; min-width: 260px; }
 dialog menu { display:flex; justify-content: flex-end; gap: 8px; padding: 12px 0 0; }

/* FB2 вспомогательные классы */
.fb2-h { height: 0; margin: 0; visibility: hidden; }
.fb2-hl { background: var(--hl-bg); box-shadow: inset 0 -2px 0 0 var(--hl-underline); }