:root {
  color-scheme: light;
  --surface-1:      #fcfcfb;
  --page:           #f9f9f7;
  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --text-muted:     #898781;
  --gridline:       #e1e0d9;
  --baseline:       #c3c2b7;
  --border:         rgba(11,11,11,0.10);
  --series-1:       #2a78d6; /* blue */
  --series-2:       #eb6834; /* orange */
  --good:           #0ca30c;
  --critical:       #d03b3b;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --surface-1:      #1a1a19;
    --page:           #0d0d0d;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted:     #898781;
    --gridline:       #2c2c2a;
    --baseline:       #383835;
    --border:         rgba(255,255,255,0.10);
    --series-1:       #3987e5;
    --series-2:       #d95926;
    --good:           #0ca30c;
    --critical:       #e66767;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--page);
  color: var(--text-primary);
}

/* Mobile only (see media query below): a single thin strip just to open
   the nav drawer. The app title and logout now live inside the drawer
   itself (see .sidebar-brand-row / .sidebar-footer) - there's no longer a
   second "fixed" chrome region competing with the page's own scrolling
   (e.g. the audio player's sticky bar), which used to make part of the
   page appear to scroll along with content underneath it. */
.mobile-topbar {
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  position: sticky;
  top: 0;
  /* Above .nav-backdrop (z-index 15) - position:sticky already opens a
     stacking context, so the dropdown menu's z-index only ranks it within
     this header, not against the backdrop sitting outside it. If this
     header itself ranks below the backdrop, the whole menu renders behind
     it and becomes unclickable regardless of the menu's own z-index. */
  z-index: 25;
}
.logout-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 4px 12px; font-size: 0.8rem; }

.menu-toggle-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
}
.menu-toggle-btn:hover, .menu-toggle-btn[aria-expanded="true"] { color: var(--text-primary); border-color: var(--series-1); }
.menu-icon, .menu-icon::before, .menu-icon::after {
  display: block;
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}
.menu-icon { position: relative; }
.menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; transition: transform 0.15s ease; }
.menu-icon::before { top: -5px; }
.menu-icon::after { top: 5px; }

.app-body { position: relative; }

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 15;
}
.nav-backdrop[hidden] { display: none; }

/* Mobile-first default: the nav is a small dropdown anchored under the
   Menu button, positioned relative to .app-body (which starts right below
   .mobile-topbar). Overridden below at desktop widths to become a
   persistent in-flow sidebar instead. */
.tabs {
  position: absolute;
  top: 6px;
  left: 24px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 220px;
  max-width: calc(100vw - 48px);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.tabs[hidden] { display: none; }
.tab-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  padding: 9px 12px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.92rem;
  text-align: left;
  width: 100%;
}
.tab-btn:hover { background: color-mix(in srgb, var(--series-1) 8%, transparent); }
.tab-btn.active { background: var(--series-1); color: #fff; border-color: var(--series-1); }
.tab-icon { flex-shrink: 0; width: 1.2em; text-align: center; }

.sidebar-group { margin: 6px 0; }
.sidebar-group-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  color: var(--text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.sidebar-subitem { padding-left: 30px; }

/* The brand row (app name + collapse toggle) always shows - on mobile it's
   the drawer's own header once opened; on desktop it's the permanent top
   of the sidebar. The collapse toggle itself is desktop-only (see media
   query below), since collapsing to icons isn't a mobile concept. */
.sidebar-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.sidebar-brand-title { font-size: 1.05rem; font-weight: 600; color: var(--text-secondary); }
.sidebar-collapse-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
}
.sidebar-collapse-btn:hover { color: var(--text-primary); border-color: var(--series-1); }

/* Pinned to the bottom of the sidebar on desktop (see min-height there);
   on the mobile dropdown, which sizes to its content, it just falls after
   the last nav item - still reads fine as "last thing in the menu". */
.sidebar-footer { margin-top: auto; padding: 10px 8px 4px; border-top: 1px solid var(--border); }
.sidebar-footer form { margin: 0; }
.sidebar-footer .logout-btn { width: 100%; }

.lang-switcher { display: flex; gap: 4px; margin-bottom: 8px; }
.lang-btn {
  flex: 1;
  padding: 4px 0;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--surface-1);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}
.lang-btn:hover { color: var(--text-primary); border-color: var(--series-1); }
.lang-btn.active { background: var(--series-1); color: #fff; border-color: var(--series-1); }
.login-box .lang-switcher { justify-content: center; margin: 0 0 14px; }
.login-box .lang-btn { flex: none; width: 44px; }

main { max-width: 760px; margin: 0 auto; padding: 24px; }
main:has(#tab-text.active) { max-width: 1100px; }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

@media (min-width: 768px) {
  .app-body { display: flex; align-items: flex-start; }

  /* The sidebar is always visible on desktop, so the mobile "open drawer"
     strip has nothing to do there. */
  .mobile-topbar { display: none; }
  .sidebar-collapse-btn { display: flex; }
  .tabs.nav-collapsed .sidebar-brand-row { justify-content: center; }

  /* On desktop the sidebar is always present (either expanded or collapsed
     to icons) - it's no longer the mobile dropdown, so it must stay visible
     regardless of the [hidden] attribute that drives the mobile open/closed
     state. */
  .tabs, .tabs[hidden] {
    display: flex !important;
    position: sticky;
    top: 0;
    z-index: 5;
    flex-direction: column;
    width: 230px;
    flex-shrink: 0;
    max-width: none;
    min-width: 0;
    min-height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    border: none;
    border-right: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    transition: width 0.15s ease;
  }
  .tabs.nav-collapsed { width: 60px; }
  .tabs.nav-collapsed .tab-label,
  .tabs.nav-collapsed .sidebar-group-label,
  .tabs.nav-collapsed .sidebar-brand-title { display: none; }
  .tabs.nav-collapsed .sidebar-subitem { padding-left: 12px; }

  .nav-backdrop { display: none !important; }

  main { flex: 1; min-width: 0; margin: 0; max-width: none; padding: 24px 32px; }
  main:has(#tab-text.active) { max-width: none; }
}

.subtabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.subtab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  padding: 8px 4px;
  margin-right: 18px;
  cursor: pointer;
  font-size: 0.92rem;
}
.subtab-btn.active { color: var(--text-primary); border-bottom-color: var(--series-1); font-weight: 600; }
.subtab-panel { display: none; }
.subtab-panel.active { display: block; }

.detail-tabs { display: flex; gap: 4px; margin: 4px 0 14px; border-bottom: 1px solid var(--border); }
.detail-tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  padding: 7px 4px;
  margin-right: 16px;
  cursor: pointer;
  font-size: 0.9rem;
}
.detail-tab-btn.active { color: var(--text-primary); border-bottom-color: var(--series-1); font-weight: 600; }
.detail-tab-panel { display: none; }
.detail-tab-panel.active { display: block; }

.history-list { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; }
.history-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--gridline);
  font-size: 0.9rem;
}
.history-list li:first-child { font-weight: 600; }
.history-list .h-word { color: var(--text-primary); }
.history-list .h-meta { color: var(--text-muted); font-size: 0.8rem; }
.history-list .h-mark.correct { color: var(--good); }
.history-list .h-mark.incorrect { color: var(--critical); }

.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.choice-btn {
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 1rem;
  text-align: left;
}
.choice-btn:disabled { cursor: default; opacity: 0.85; }
.choice-btn.correct { background: var(--good); color: #fff; border-color: var(--good); }
.choice-btn.incorrect { background: var(--critical); color: #fff; border-color: var(--critical); }
@media (max-width: 560px) {
  .choice-grid { grid-template-columns: 1fr; }
}

.permission-checks { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0; }
.permission-checks label { display: flex; align-items: center; gap: 6px; font-size: 0.88rem; color: var(--text-secondary); }
.permission-checks input { width: auto; }
.subtitle-user-settings { display: flex; flex-wrap: wrap; gap: 8px; }
.subtitle-user-settings label { display: flex; align-items: center; gap: 4px; color: var(--text-secondary); }
.subtitle-user-settings input { width: 64px; }

.filter-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.filter-row input[type=text] { flex: 1; min-width: 200px; width: auto; }
.filter-row .checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 0.88rem; color: var(--text-secondary); white-space: nowrap; }
.filter-row .checkbox-label input { width: auto; }

.login-main { max-width: 340px; margin: 15vh auto 0; padding: 0 20px; }
.login-box { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 24px; }
.login-logo { display: block; margin: 0 auto 12px; border-radius: 12px; }
.login-box h1 { margin: 0 0 8px; font-size: 1.2rem; text-align: center; }
.login-tagline { margin: 0 0 18px; font-size: 0.85rem; color: var(--text-secondary); text-align: center; line-height: 1.4; }
.login-box form { display: flex; flex-direction: column; gap: 14px; }
.login-box label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: var(--text-secondary); }
.login-box button { width: 100%; }

h2 { margin-top: 0; }
.hint { color: var(--text-muted); font-size: 0.88rem; }
.warning { color: var(--critical); font-size: 0.88rem; }

textarea, input[type=text], input[type=password], input[type=number], input[type=date], select {
  width: 100%;
  font-size: 1rem;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-1);
  color: var(--text-primary);
  font-family: inherit;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.form-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: var(--text-secondary); }
.form-grid label.checkbox-label { flex-direction: row; align-items: center; gap: 8px; justify-content: flex-start; margin-top: auto; }
.form-grid label.checkbox-label input { width: auto; }

.quiz-example { font-style: italic; margin-top: -6px; }

.progress-bar-outer { background: var(--gridline); border-radius: 6px; height: 10px; overflow: hidden; margin-top: 8px; }
.progress-bar-inner { background: var(--series-1); height: 100%; width: 0%; transition: width 0.25s ease; }

.text-log-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; gap: 10px; flex-wrap: wrap; }
.text-source-edit { display: inline-flex; align-items: center; gap: 6px; }
.text-source-edit input { width: 160px; padding: 4px 8px; font-size: 0.85rem; }
.badge { background: var(--series-2); color: #fff; border-radius: 10px; padding: 1px 9px; font-size: 0.75rem; white-space: nowrap; }
.badge-ready { background: var(--good); }
.badge-pending { background: var(--surface-1); color: var(--text-secondary); border: 1px solid var(--border); }
.badge-source { background: hsl(var(--source-hue, 210) 70% 92%); color: hsl(var(--source-hue, 210) 70% 30%); border: 1px solid hsl(var(--source-hue, 210) 60% 60%); }
@media (prefers-color-scheme: dark) {
  .badge-source { background: hsl(var(--source-hue, 210) 40% 20%); color: hsl(var(--source-hue, 210) 70% 78%); border-color: hsl(var(--source-hue, 210) 40% 45%); }
}
.text-log-snippet { white-space: pre-wrap; }

.audio-player-bar {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--surface-1);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.audio-icon-btn {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.audio-icon-btn:hover { background: color-mix(in srgb, var(--series-1) 10%, transparent); }
.audio-time { flex: none; font-size: 0.8rem; color: var(--text-secondary); min-width: 3.5em; text-align: center; }
.audio-progress-track {
  flex: 1;
  height: 10px;
  background: var(--gridline);
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
}
.audio-progress-fill { background: var(--series-1); height: 100%; width: 0%; }
.subtitle-list {
  --subtitle-en-font-size: 16px;
  --subtitle-cs-font-size: 15px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-top: 8px;
}
.subtitle-row { padding: 8px 12px; border-bottom: 1px solid var(--gridline); cursor: pointer; }
.subtitle-row:hover { background: color-mix(in srgb, var(--series-1) 6%, transparent); }
.subtitle-row.active { background: color-mix(in srgb, var(--series-1) 16%, transparent); border-left: 3px solid var(--series-1); }
.subtitle-en { margin: 0; font-size: var(--subtitle-en-font-size); }
.subtitle-cs { margin: 2px 0 0; font-size: var(--subtitle-cs-font-size); color: var(--text-secondary); }

.subtitle-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.subtitle-mode-label { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.85rem; color: var(--text-secondary); }
.subtitle-mode-label select { width: auto; }
.subtitle-controls .subtitle-mode-label { margin-top: 0; }
.subtitle-controls label { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text-secondary); }
.subtitle-controls input[type=number] { width: 70px; padding: 5px 7px; }
.subtitle-list[data-mode="none"] { display: none; }
.subtitle-list[data-mode="en"] .subtitle-cs { display: none; }
.subtitle-list[data-mode="cs"] .subtitle-en { display: none; }

#text-log-table tbody tr { cursor: pointer; }
#text-log-table tbody tr:hover { background: color-mix(in srgb, var(--series-1) 8%, transparent); }
.sortable-th { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable-th:hover { color: var(--text-primary); }
.sortable-th::after { content: "↕"; opacity: 0.35; margin-left: 4px; font-size: 0.75em; }
.sortable-th.sort-asc::after { content: "↑"; opacity: 1; }
.sortable-th.sort-desc::after { content: "↓"; opacity: 1; }

.btn-primary, .btn-secondary, .btn-danger {
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 0.95rem;
  cursor: pointer;
  margin-top: 10px;
}
.btn-primary { background: var(--series-1); color: #fff; }
.btn-secondary { background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border); }
.btn-danger { background: var(--critical); color: #fff; }
a.btn-secondary, a.btn-primary { display: inline-block; text-decoration: none; margin-right: 10px; }
.btn-primary:disabled, .btn-secondary:disabled, .btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}
.modal-box {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px;
  max-width: 420px;
  width: 100%;
}
.modal-box h3 { margin-top: 0; }
.modal-box .checkbox-label { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0; cursor: pointer; }
.modal-box .checkbox-label input { margin-top: 3px; width: auto; }
.modal-box .checkbox-label:has(input:disabled) { color: var(--text-muted); cursor: not-allowed; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.modal-actions .btn-primary, .modal-actions .btn-secondary, .modal-actions .btn-danger { margin-top: 0; }

.result-box {
  margin-top: 20px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
}
.result-box h3 { margin-top: 0; font-size: 0.85rem; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.03em; }

mark.new-word { background: color-mix(in srgb, var(--series-2) 30%, transparent); color: var(--text-primary); border-radius: 3px; padding: 0 2px; }

.en-render { font-size: 1.05rem; line-height: 1.6; }

.prompt-word { font-size: 1.6rem; font-weight: 600; margin: 12px 0; }

#quiz-feedback.correct { color: var(--good); font-weight: 600; }
#quiz-feedback.incorrect { color: var(--critical); font-weight: 600; }

.goal-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 0.85rem; color: var(--text-secondary); }
.goal-row input { width: 90px; }

.stats-scope-toggle { display: flex; gap: 8px; margin-bottom: 16px; }
.stats-scope-toggle button.active { background: var(--series-1); color: #fff; border-color: var(--series-1); }

.tiles-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.tile {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  min-width: 130px;
  flex: 1;
}
.tile .value { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tile .label { color: var(--text-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }

.chart-box { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 20px; overflow-x: auto; }
.chart-box svg { display: block; }
.chart-legend { display: flex; gap: 16px; margin-top: 6px; font-size: 0.8rem; color: var(--text-secondary); }
.chart-legend .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

.chart-tooltip {
  position: fixed;
  pointer-events: none;
  background: var(--text-primary);
  color: var(--surface-1);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.78rem;
  z-index: 100;
  display: none;
  white-space: nowrap;
}

/* Wraps every .data-table so a too-wide table scrolls within itself on
   narrow screens instead of forcing the whole page wider (was pushing the
   mobile viewport out to 900px+ for the wider tables). */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.data-table th, .data-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--gridline); }
.data-table .cell-example { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }
.data-table .row-actions { white-space: nowrap; }
.data-table .row-actions button { padding: 4px 10px; font-size: 0.78rem; margin: 0 4px 0 0; }
.data-table input, .data-table select { padding: 4px 6px; font-size: 0.85rem; width: auto; min-width: 90px; }
.data-table th { color: var(--text-muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; }
.data-table td:nth-child(3), .data-table td:nth-child(4) { font-variant-numeric: tabular-nums; }

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