:root {
  --bg: #ffffff;
  --bg-panel: #fafafa;
  --ink: #141414;
  --ink-soft: #555555;
  --ink-faint: #9a9a9a;
  --line: rgba(0, 0, 0, 0.09);
  --hover: rgba(0, 0, 0, 0.045);
  --active: rgba(0, 0, 0, 0.07);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.05);
  --radius: 14px;
  --radius-sm: 10px;
  --accent: #8b5cf6;
  --accent-soft: rgba(139, 92, 246, 0.14);
  --map-ink: #6b6088;
  --sidebar-w: 300px;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-ar: 'Noto Naskh Arabic', 'Traditional Arabic', serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121212;
    --bg-panel: #191919;
    --ink: #f0f0f0;
    --ink-soft: #b3b3b3;
    --ink-faint: #737373;
    --line: rgba(255, 255, 255, 0.1);
    --hover: rgba(255, 255, 255, 0.06);
    --active: rgba(255, 255, 255, 0.1);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --map-ink: #b3a3e0;
  }
}

/* explicit choice via the theme toggle wins over the system preference */
:root[data-theme="dark"] {
  --bg: #121212;
  --bg-panel: #191919;
  --ink: #f0f0f0;
  --ink-soft: #b3b3b3;
  --ink-faint: #737373;
  --line: rgba(255, 255, 255, 0.1);
  --hover: rgba(255, 255, 255, 0.06);
  --active: rgba(255, 255, 255, 0.1);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
  --map-ink: #b3a3e0;
}

.theme-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 200;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-panel);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-faint); transform: scale(1.06); }
.theme-toggle .theme-icon-sun { display: none; }
.theme-toggle .theme-icon-moon { display: block; }
.theme-toggle.is-dark .theme-icon-sun { display: block; }
.theme-toggle.is-dark .theme-icon-moon { display: none; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; }

/* ---------- Start screen ---------- */
.start-screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 64px;
  background: var(--bg);
  z-index: 100;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.start-screen.leaving { opacity: 0; visibility: hidden; pointer-events: none; }

/* Decorative contour map of the Arab world (Morocco to Iraq) sitting behind
   the start-screen content — a barely-visible geographic layer, not a real
   atlas: opacity stays in the 5-12% band and the whole thing is one flat
   --map-ink tone so it never competes with the foreground. */
.start-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
/* Dimming lives directly in each path's own fill-opacity/stroke-opacity,
   not on an ancestor <g> opacity — an ancestor's opacity multiplies down
   and caps whatever a hovered child tries to do, so a "brighten on hover"
   border could never actually get brighter than the ambient 16% ceiling.
   Per-path opacity has no such ceiling: hover can jump all the way up. */
.start-map .map-country {
  fill: var(--map-ink);
  fill-opacity: 0.05;
  stroke: var(--accent);
  stroke-opacity: 0.13;
  stroke-width: 1;
  stroke-linejoin: round;
  filter: url(#map-glow);
  pointer-events: auto;
  cursor: default;
  transition: fill-opacity 0.3s ease, stroke-opacity 0.3s ease, stroke-width 0.3s ease;
}
.start-map .map-country:hover {
  fill-opacity: 0.3;
  stroke-opacity: 1;
  stroke-width: 1.6;
  filter: url(#country-glow-hover);
}
.start-map .map-dot { fill: var(--map-ink); opacity: 0.13; }

/* A handful of historical/cultural centres, not a dot per country — quiet
   by default (small grey-violet core, soft halo), the accent purple only
   shows up on hover so it reads as "part of the map" rather than a row of
   glowing buttons. */
.start-map .map-routes { opacity: 0.5; }
.start-map .map-route {
  fill: none;
  stroke: var(--map-ink);
  stroke-width: 0.5;
  stroke-dasharray: 2 3;
}

.start-map .map-cities { opacity: 0.9; }
.start-map .map-city { pointer-events: auto; cursor: default; }
.start-map .map-city-hit { fill: transparent; }
.start-map .map-city-dot {
  fill: var(--map-ink);
  opacity: 0.4;
  filter: url(#city-glow-soft);
  transform-box: fill-box;
  transform-origin: center;
  transition: fill 0.35s ease, opacity 0.35s ease, transform 0.35s ease, filter 0.35s ease;
}
.start-map .tier-key .map-city-dot { r: 2.2px; }
.start-map .tier-minor .map-city-dot { r: 1.5px; }
.start-map .map-city:hover .map-city-dot {
  fill: var(--accent);
  opacity: 1;
  filter: url(#city-glow-hover);
  transform: scale(1.7);
}

.start-map .map-city-label {
  fill: var(--map-ink);
  font-family: var(--font-ar);
  opacity: 0.32;
  transition: opacity 0.35s ease;
}
.start-map .tier-key .map-city-label { font-size: 11px; }
.start-map .tier-minor .map-city-label { font-size: 9px; }
.start-map .map-city:hover .map-city-label {
  fill: var(--accent);
  opacity: 0.95;
}

.start-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.start-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.start-content { text-align: center; position: relative; z-index: 1; }
.start-eyebrow {
  font-family: var(--font-ar);
  font-size: 22px;
  color: var(--ink-faint);
  margin: 0 0 12px;
  letter-spacing: 0.02em;
}
.start-title {
  font-size: clamp(32px, 6vw, 52px);
  font-weight: 500;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.start-sub {
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0;
  max-width: 360px;
}

.start-quote {
  margin-top: 32px;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.start-quote-ar {
  font-family: var(--font-ar);
  font-size: 21px;
  line-height: 1.9;
  color: var(--ink-soft);
  margin: 0;
  max-width: 480px;
  white-space: pre-line;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.start-quote-tr {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-faint);
  margin: 10px 0 0;
  max-width: 380px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s ease 0.06s, transform 0.6s ease 0.06s;
}
.start-quote.visible .start-quote-ar,
.start-quote.visible .start-quote-tr {
  opacity: 1;
  transform: translateY(0);
}

.start-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 8px;
  animation: float 2.6s ease-in-out infinite;
  position: relative;
  z-index: 1;
}
.start-arrow:hover { color: var(--ink); }
.start-arrow-text {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
}
.start-arrow svg { transform: rotate(90deg) scaleX(-1); }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

/* ---------- App shell ---------- */
.app { height: 100%; display: flex; flex-direction: column; }
.app[hidden] { display: none; }
.app::after {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 8px;
  background: linear-gradient(180deg, #4f6df5, #8b5cf6);
  pointer-events: none;
  z-index: 60;
}

.topbar {
  display: none;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.topbar-title {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-soft);
}
.menu-toggle {
  width: 34px; height: 34px;
  border-radius: 10px;
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
}
.menu-toggle:hover { background: var(--hover); }
.menu-toggle-line { width: 16px; height: 1.4px; background: var(--ink); border-radius: 2px; }

.layout { flex: 1; display: flex; min-height: 0; }

/* ---------- Sidebar ---------- */
.sidebar {
  position: relative;
  width: var(--sidebar-w);
  flex-shrink: 0;
  border-right: 1px solid var(--line);
  overflow-y: auto;
  background: var(--bg);
}
.sidebar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 8px;
  background: linear-gradient(180deg, #4f6df5, #8b5cf6);
}
.sidebar-inner { padding: 22px 14px 40px; }

/* Sticky quick-nav row ("collapse everything" + recently-visited sections)
   — see renderQuickNav in sidebar.js. Lives above the category list at the
   top of #sidebar-content, which puts it outside every category's
   overflow:hidden expand-animation wrapper, so position:sticky sticks it
   to the sidebar's real scrollport untouched. Fixed height so .category-
   head's own sticky offset (top: 40px, below) stays correct regardless of
   how many buttons are actually showing. */
.sidebar-quicknav {
  position: sticky;
  top: 0;
  z-index: 6;
  height: 34px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-bottom: 6px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.sidebar-quicknav.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

.quicknav-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 128px;
  padding: 0 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* the same soft accent glow as the open sticky category header, below —
     one shared visual cue for "this is pinned", not a one-off. */
  box-shadow: 0 3px 10px -5px var(--accent-soft);
  transition: background 0.15s ease, color 0.15s ease;
}
.quicknav-btn:hover { background: var(--hover); color: var(--ink); }
.quicknav-recent { border-bottom: 1px solid var(--accent-soft); }
.sidebar-backdrop { display: none; }

.sidebar-resizer {
  width: 6px;
  flex-shrink: 0;
  cursor: col-resize;
  position: relative;
  z-index: 5;
}
.sidebar-resizer::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 2px;
  width: 2px;
  border-radius: 2px;
  background: transparent;
  transition: background 0.15s ease;
}
.sidebar-resizer:hover::after,
.sidebar-resizer.dragging::after { background: var(--accent); }
body.sidebar-resizing { cursor: col-resize; user-select: none; }

.brand {
  font-family: var(--font-ar);
  font-size: 20px;
  padding: 4px 10px 20px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.brand-write-wrap {
  position: relative;
  display: block;
  overflow: hidden;
  width: 0;
  height: 20px;
  margin-top: 6px;
}
.brand-write-wrap.active {
  animation: brand-write-reveal 4.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.brand-write-text {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font-ar);
  font-size: 15px;
  line-height: 20px;
  color: var(--accent);
}
.brand-write-caret {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px 1px var(--accent-soft), 0 0 2px var(--accent);
  opacity: 0;
}
.brand-write-wrap.active .brand-write-caret {
  animation: brand-write-caret-fade 4.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes brand-write-reveal {
  0%, 6% { width: 0; }
  62%, 78% { width: var(--brand-write-w, 0px); }
  96%, 100% { width: 0; }
}
@keyframes brand-write-caret-fade {
  0%, 4% { opacity: 0; }
  8%, 74% { opacity: 1; }
  82%, 100% { opacity: 0; }
}

/* category (top-level accordion item) */
.category { margin-bottom: 4px; }

.category-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  /* var(--bg), not none/transparent — needs to be opaque once stuck below,
     or the word list scrolling past underneath would show through it. At
     rest it's indistinguishable from "none" since .sidebar is the same
     color. Offset by the collapse-all pill's own height (34px + 6px
     margin, see .sidebar-collapse-all above) so the two sticky siblings
     stack instead of fighting over the same top:0 slot. */
  background: var(--bg);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  position: sticky;
  top: 40px;
  z-index: 4;
}
.category-head:hover { background: var(--hover); }
/* Translucent on purpose — the word list should still show through the
   stuck header, just softened by the blur instead of legible/sharp, so it
   reads as "glass panel floating over the list" rather than "this text is
   fighting that text". The accent glow + hairline is what actually makes
   it register as pinned at a glance; the translucency alone (the original
   --active tint, no blur) wasn't enough on its own. */
.category-head.open {
  background: var(--active);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  box-shadow: 0 3px 10px -5px var(--accent-soft);
  border-bottom: 1px solid var(--accent-soft);
}
.category-head.open:hover { background: var(--active); }

.category-label {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.label-ru,
.label-ar {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity 0.3s ease, filter 0.3s ease;
}
.label-ru { opacity: 1; filter: none; }
.label-ar {
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: blur(2px);
  font-family: var(--font-ar);
  font-size: 15px;
  line-height: 1.6;
  direction: rtl;
  text-align: right;
  unicode-bidi: isolate;
}
.category-head:hover .label-ru { opacity: 0; filter: blur(2px); }
.category-head:hover .label-ar { opacity: 1; filter: none; }

.category-count {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
  transition: opacity 0.2s ease;
}
.category-head:hover .category-count { opacity: 0; }

.category-preview {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-shrink: 0;
  max-width: 0;
  overflow: hidden;
  font-family: var(--font-ar);
  font-size: 15px;
  color: var(--ink-faint);
  transition: max-width 0.3s ease;
}
.category-head:hover .category-preview { max-width: 220px; }
.preview-word {
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.category-head:hover .preview-word {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.category-head:hover .preview-word:nth-child(2) { transition-delay: 0.1s; }
.category-head:hover .preview-word:nth-child(3) { transition-delay: 0.2s; }

.chevron {
  flex-shrink: 0;
  width: 16px; height: 16px;
  color: var(--ink-faint);
  transition: transform 0.25s ease;
}
.category-head.open .chevron { transform: rotate(90deg); }

.category-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}
.category-body.open { grid-template-rows: 1fr; }
.category-body-inner { overflow: hidden; }

/* subcategory (second-level accordion item) */
.subcategory { margin-left: 14px; border-left: 1px solid var(--line); padding-left: 10px; margin-top: 2px; }

.subcategory-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-soft);
  cursor: pointer;
  text-align: left;
}
.subcategory-head:hover { background: var(--hover); color: var(--ink); }
.subcategory-head.open { background: var(--active); color: var(--ink); }
.subcategory-head .chevron { width: 13px; height: 13px; }

.sparkle-icon {
  flex-shrink: 0;
  color: var(--accent);
  animation: sparkle-pulse 2.4s ease-in-out infinite;
}
@keyframes sparkle-pulse {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.85; }
  50% { transform: scale(1.18) rotate(8deg); opacity: 1; }
}

.subcategory-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.24s ease;
}
.subcategory-body.open { grid-template-rows: 1fr; }
.subcategory-body-inner { overflow: hidden; }

/* leaf list (word links) */
.word-list {
  margin-left: 12px;
  padding-left: 10px;
  border-left: 1px solid var(--line);
  padding-top: 2px;
  padding-bottom: 4px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0 6px;
}

.word-item {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  color: var(--ink-soft);
}
.word-item:hover { background: var(--hover); color: var(--ink); }
.word-item.active { background: var(--active); color: var(--ink); }
.word-item-ar { font-family: var(--font-ar); font-size: 16px; }
.word-item-tr { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); flex-shrink: 0; }

/* "Особые" глаголы (полый/недостаточный/удвоенный/с хамзой) — один цвет на
   категорию, общий и для карточки слова, и для списка глаголов в сайдбаре. */
:root {
  --irr-hollow: #4F46E5;
  --irr-defective: #7C3AED;
  --irr-doubled: #2563EB;
  --irr-hamzated: #0891B2;
}
.word-item.irregular-item .word-item-ar { font-weight: 600; }
.word-item.irregular-hollow .word-item-ar { color: var(--irr-hollow); }
.word-item.irregular-defective .word-item-ar { color: var(--irr-defective); }
.word-item.irregular-doubled .word-item-ar { color: var(--irr-doubled); }
.word-item.irregular-hamzated .word-item-ar { color: var(--irr-hamzated); }

.soon-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  padding: 8px 10px;
}

.sort-row {
  display: flex;
  gap: 6px;
  padding: 4px 10px 8px;
  flex-wrap: wrap;
}
.sort-btn {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
}
.sort-btn:hover { border-color: var(--ink-faint); }
.sort-btn.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.practice-tense-row { padding: 14px 0 0; }

/* ---------- Main panel ---------- */
.main { flex: 1; overflow-y: auto; min-width: 0; }
.main-content { padding: 30px 44px 60px; max-width: 780px; margin: 0 auto; }

.breadcrumbs {
  padding: 20px 44px 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.crumb { cursor: pointer; }
.crumb:hover { color: var(--ink); text-decoration: underline; }
.crumb.current { color: var(--ink); cursor: default; }
.crumb.current:hover { text-decoration: none; }
.crumb-sep { color: var(--ink-faint); }

.empty-state {
  color: var(--ink-faint);
  font-size: 14px;
  margin-top: 40px;
  line-height: 1.7;
}
.empty-state strong { color: var(--ink-soft); }

/* word grid (list rendered in main panel, e.g. top-100) */
.word-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.word-grid-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  cursor: pointer;
  background: var(--bg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.word-grid-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.word-grid-card .wg-ar { font-family: var(--font-ar); font-size: 22px; margin-bottom: 6px; }
.word-grid-card .wg-tr { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }
.word-grid-card .wg-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.word-grid-card .wg-translation { font-size: 13px; color: var(--ink-soft); }
.level-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
}

.level-group { margin-top: 26px; }
.level-group-title {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

/* section heading */
.section-title { font-size: 22px; font-weight: 500; margin: 0 0 6px; }
.section-sub { color: var(--ink-soft); font-size: 14px; margin: 0; }

/* ---------- Word card ---------- */
.word-card { margin-top: 6px; }
.wc-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 4px; }
.wc-ar { font-family: var(--font-ar); font-size: 44px; line-height: 1.5; }

.wc-status-actions { display: flex; gap: 8px; margin-left: auto; align-self: center; }
.wc-status-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
}
.wc-status-btn:hover { box-shadow: var(--shadow-sm); }
.wc-status-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.wc-tr { font-family: var(--font-mono); font-size: 14px; color: var(--ink-faint); }
.wc-translation { font-size: 18px; color: var(--ink-soft); margin: 6px 0 18px; }

.wc-meta-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.meta-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 11px;
}
.irregular-chip { font-weight: 600; }
.irregular-chip.irregular-hollow { color: var(--irr-hollow); border-color: var(--irr-hollow); }
.irregular-chip.irregular-defective { color: var(--irr-defective); border-color: var(--irr-defective); }
.irregular-chip.irregular-doubled { color: var(--irr-doubled); border-color: var(--irr-doubled); }
.irregular-chip.irregular-hamzated { color: var(--irr-hamzated); border-color: var(--irr-hamzated); }

.audio-stub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px dashed var(--line);
  border-radius: 999px;
  padding: 7px 14px 7px 12px;
  color: var(--ink-faint);
  font-size: 12.5px;
  margin-bottom: 26px;
  cursor: not-allowed;
}

.visual-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
  background: var(--bg-panel);
  margin-bottom: 26px;
}
.visual-link:hover { box-shadow: var(--shadow-sm); }

.wc-note {
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  padding: 14px 18px;
  margin-bottom: 26px;
}
.wc-note-title {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--accent);
  letter-spacing: 0.06em;
  margin: 0 0 6px;
}
.wc-note p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink); }

.examples-title {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}
.example-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.example-item:last-child { border-bottom: none; }
.example-ar { font-family: var(--font-ar); font-size: 20px; line-height: 1.9; margin-bottom: 6px; }
.example-tr { color: var(--ink-soft); font-size: 14px; }

.wc-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.wc-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 4px;
  transition: color 0.15s ease;
}
.wc-nav-btn:hover:not(:disabled) { color: var(--accent); }
.wc-nav-btn:disabled { color: var(--ink-faint); opacity: 0.4; cursor: default; }
.wc-nav-random { color: var(--ink-faint); }
.wc-nav-random:hover:not(:disabled) { color: var(--accent); }

/* ---------- Word card: verb page ----------
   Same design system as the rest of the word card (tokens, spacing,
   accent), just a calmer composition: the two conjugated forms read as
   one unit instead of competing pills, fewer borders, more whitespace. */
.word-card.is-verb .wc-head { align-items: baseline; margin-bottom: 0; }
.wc-verb-forms { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.wc-verb-past { font-family: var(--font-ar); font-size: 68px; line-height: 1.25; }
.wc-verb-present { font-family: var(--font-ar); font-size: 28px; line-height: 1.25; color: var(--ink-soft); }
.wc-verb-masdar { font-family: var(--font-ar); font-size: 21px; line-height: 1.25; color: var(--ink-faint); }
.word-card.is-verb .wc-translation { font-size: 19px; margin: 10px 0 24px; }

/* Past/present/masdar each get a tiny "الماضي / المضارع / المصدر" label
   underneath — but only on hover, so a beginner who wonders why there
   are two or three forms can find out, without it competing with the
   Arabic at rest for everyone who already knows. */
.wc-verb-form-wrap { position: relative; display: inline-flex; }
.wc-verb-form-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 4px;
  font-family: var(--font-ar);
  font-size: 14px;
  color: var(--ink-faint);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.wc-verb-form-wrap:hover .wc-verb-form-label { opacity: 1; }

/* Status actions + the conjugation link stack together under the verb
   forms, both rows spanning the same width — знаю/сохранить hug the
   right edge of that width, спряжение fills it edge to edge, so the
   two rows read as one aligned block instead of a ragged staircase. */
.word-card.is-verb .wc-head-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-left: auto; }
.word-card.is-verb .wc-head-actions .wc-status-actions { margin-left: 0; justify-content: flex-end; }
.wc-conjugation-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12.5px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  cursor: pointer;
  transition: box-shadow 0.18s ease;
}
.wc-conjugation-btn:hover { box-shadow: var(--shadow-sm); }

.word-card.is-verb .wc-meta-row { margin-bottom: 12px; }
.wc-root-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-ar);
  font-size: 15px;
  color: var(--ink-faint);
  margin-bottom: 24px;
}
.wc-irr-label { font-family: var(--font-ar); font-weight: 600; }
.wc-irr-label.irregular-hollow { color: var(--irr-hollow); }
.wc-irr-label.irregular-defective { color: var(--irr-defective); }
.wc-irr-label.irregular-doubled { color: var(--irr-doubled); }
.wc-irr-label.irregular-hamzated { color: var(--irr-hamzated); }

.word-card.is-verb .examples-title { border-bottom: none; padding-bottom: 0; margin: 40px 0 20px; text-transform: none; }
.word-card.is-verb .examples-list { display: flex; flex-direction: column; gap: 28px; }
.word-card.is-verb .example-item { padding: 0; border-bottom: none; }
.word-card.is-verb .example-ar { font-size: 21px; line-height: 2; }
.word-card.is-verb .example-tr { font-size: 14px; color: var(--ink-faint); margin-top: 4px; }
.word-card.is-verb .example-ar .wc-highlight { color: var(--accent); }

/* ---------- Word card: "Семья слова" (word family) ----------
   Same card treatment for every word type, verb or not — plain items
   that pick up a background only on hover/current, no permanent border
   or pill shape. */
.wc-family { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 26px; }
.wc-family-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  cursor: pointer;
  transition: background 0.18s ease;
}
.wc-family-item:hover:not(:disabled) { background: var(--hover); }
.wc-family-item:disabled { cursor: default; }
.wc-family-ar { font-family: var(--font-ar); font-size: 18px; color: var(--ink); }
.wc-family-tr { font-family: var(--font-ui); font-size: 11.5px; color: var(--ink-faint); }
.wc-family-item.is-current { cursor: default; background: var(--accent-soft); }
.wc-family-item.is-current .wc-family-ar { color: var(--accent); }

/* the root button is the only door into "Корни" — always shown as its
   own distinct button (not a plain hover-only item like the family
   words) so it never gets confused with them. */
.wc-family-root { background: var(--accent-soft); cursor: pointer; }
.wc-family-root:hover { background: var(--accent-soft); }
.wc-family-root .wc-family-ar { color: var(--accent); }
.wc-family-root .wc-family-tr { color: var(--accent); }

/* ---------- Visual world ---------- */
.scene-wrap { margin-top: 16px; }
.scene-tabs { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.scene-tab {
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
}
.scene-tab.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.scene-tab:disabled { cursor: not-allowed; opacity: 0.5; }

.scene-stage {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  aspect-ratio: 5 / 8;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: var(--shadow-sm);
  overflow: visible;
}
.scene-figure { width: 100%; height: 100%; display: block; color: var(--ink-soft); }
.scene-figure .body-outline { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }

.hotspot {
  position: absolute;
  width: 16px; height: 16px;
  margin-left: -8px;
  margin-top: -8px;
  border-radius: 50%;
  border: none;
  background: var(--ink);
  cursor: pointer;
  padding: 0;
}
.hotspot::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform: scale(0.85);
}
.hotspot:hover::before, .hotspot.active::before { opacity: 0.5; transform: scale(1); }
.hotspot.active { background: var(--ink); box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--ink); }

.hotspot-line {
  position: absolute;
  height: 1px;
  background: var(--ink-faint);
  transform-origin: left center;
  pointer-events: none;
}

.hotspot-label {
  position: absolute;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  box-shadow: var(--shadow-md);
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
}
.hotspot-label .hl-ar { font-family: var(--font-ar); font-size: 17px; display: block; margin-bottom: 2px; }
.hotspot-label .hl-tr { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); }

.scene-legend { margin-top: 24px; }
.scene-legend-title {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.legend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.legend-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--bg);
}
.legend-item:hover, .legend-item.active { background: var(--hover); }
.legend-item .li-ar { font-family: var(--font-ar); font-size: 16px; }
.legend-item .li-tr { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); }

/* ---------- Practice ---------- */
.practice-level-bar {
  max-width: 780px;
  margin: 16px auto 0;
  padding: 0 10px;
  text-align: center;
}
.practice-level-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.practice-level-row { justify-content: center; padding: 0; }

.practice-wrap { position: relative; z-index: 0; margin: 16px auto 0; max-width: 780px; text-align: center; }
.practice-wrap::before {
  /* Anchored to the viewport rather than this 780px column so the glow reads
     as ambient room light behind the whole page, not a rectangle pasted
     behind the card — a contained box here looked jarring against the flat
     surrounding background. */
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40vw circle at 18% 12%, var(--practice-glow, var(--accent-soft)), transparent 70%),
    radial-gradient(36vw circle at 85% 80%, var(--practice-glow, var(--accent-soft)), transparent 70%);
  animation: fc-glow-drift 16s ease-in-out infinite alternate;
}

/* Tint the glow by CEFR level, drawing from the same 6-hue palette the
   Лента already uses for its per-card-type backgrounds (bg-1..6) so the
   app keeps one color vocabulary instead of inventing a second. Cool-to-
   warm reads as "just starting" -> "advanced". */
#practice-body-mount[data-level="A1"] { --practice-glow: rgba(45, 176, 168, 0.16); }
#practice-body-mount[data-level="A2"] { --practice-glow: rgba(94, 168, 110, 0.16); }
#practice-body-mount[data-level="B1"] { --practice-glow: rgba(70, 122, 220, 0.16); }
#practice-body-mount[data-level="B2"] { --practice-glow: rgba(139, 92, 246, 0.16); }
#practice-body-mount[data-level="C1"] { --practice-glow: rgba(214, 148, 62, 0.18); }

/* Faint echo of the landing page's contour map, reused as-is via <use
   href="#map-dim"> (see mountPracticeWithLevelBar in app.js) rather than
   duplicating the path data — #map-dim is just the country silhouettes,
   no cities/routes, so it reads as a quiet brand watermark rather than a
   second decorative motif competing with the glow. */
.practice-map-echo {
  position: fixed;
  z-index: -2;
}

/* Ambient rain/snow/sea/fire canvas + its picker pill — see js/ambience.js.
   The canvas is the very first node in <body> so it paints behind every
   other layer (sidebar/content panels are opaque and simply cover it where
   they sit); both are hidden by default and only shown on quiz screens. */
#ambience-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: none;
}
/* Лента's backdrop photo — see js/feedBackground.js. Same fixed/z-index:-1/
   first-node-in-body trick as #ambience-canvas above, just an <img>-style
   layer instead of a canvas. Hidden by default, shown only on the feed view. */
#feed-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: none;
  background-image:
    linear-gradient(180deg, rgba(6, 8, 14, 0.32) 0%, rgba(6, 8, 14, 0.05) 30%, rgba(6, 8, 14, 0.1) 65%, rgba(6, 8, 14, 0.5) 100%),
    url('../data/images/feed-bg-street.jpg');
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
}
#feed-bg.is-visible { display: block; }

/* While the photo is behind it, the feed's panels (intro/card/recap — all
   .feed-shell) go from a flat --bg-panel box to frosted glass, so the photo
   reads through instead of being fully hidden by an opaque card. */
body.has-feed-bg .feed-intro,
body.has-feed-bg .feed-recap,
body.has-feed-bg .feed-settings,
body.has-feed-bg .feed-card {
  /* The photo is always dark, so these panels force a dark-glass palette
     via local custom-property overrides — every descendant already reads
     color from var(--ink)/--ink-soft/--ink-faint/--line, so this keeps text
     legible even when the app's own theme toggle is set to light. */
  --ink: #f5f5f5;
  --ink-soft: #cfcfd6;
  --ink-faint: #9a9aa3;
  --line: rgba(255, 255, 255, 0.16);
  --hover: rgba(255, 255, 255, 0.08);
  --bg: rgba(255, 255, 255, 0.06);
  --bg-panel: rgba(255, 255, 255, 0.08);
  background-color: rgba(20, 20, 26, 0.46);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--ink);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6), var(--shadow-md);
}
body.has-feed-bg .feed-progress { background: rgba(255, 255, 255, 0.16); }
body.has-feed-bg .feed-live-stats { color: rgba(255, 255, 255, 0.55); }

.ambience-picker {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 55;
  display: none;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border-radius: 999px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.ambience-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.ambience-btn:hover { background: var(--hover); color: var(--ink); }
.ambience-btn.active { background: var(--accent-soft); color: var(--accent); }
.ambience-btn.is-muted { color: var(--ink-faint); }
.ambience-sep { width: 1px; height: 18px; background: var(--line); margin: 0 3px; }

@media (max-width: 640px) {
  .ambience-picker { left: 12px; bottom: 12px; }
}

.practice-header { margin-bottom: 26px; }
.practice-title {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.practice-word { display: flex; align-items: baseline; gap: 14px; }
.practice-word-ar { font-family: var(--font-ar); font-size: 32px; }
.practice-word-tr { font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); }

.practice-progress {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-faint);
  margin-bottom: 18px;
}

.practice-prompt {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
  margin-bottom: 20px;
  text-align: center;
}
.practice-prompt-label {
  font-size: 12.5px;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.practice-pronoun { display: flex; align-items: baseline; justify-content: center; gap: 12px; }
.practice-pronoun-ar { font-family: var(--font-ar); font-size: 30px; }
.practice-pronoun-ru { font-size: 15px; color: var(--ink-soft); }

.practice-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.practice-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.practice-option:hover { background: var(--hover); }
.practice-option .po-ar { font-family: var(--font-ar); font-size: 20px; }
.practice-option .po-tr { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }
.practice-option.correct {
  border-color: #34c759;
  background: rgba(52, 199, 89, 0.12);
}
.practice-option.wrong {
  border-color: #ff453a;
  background: rgba(255, 69, 58, 0.1);
}

.practice-next, .practice-restart {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 11px 22px;
  border-radius: 999px;
  border: none;
  color: #fff;
  background: linear-gradient(135deg, #4f6df5, #8b5cf6);
  cursor: pointer;
}
.practice-next:hover, .practice-restart:hover { filter: brightness(1.08); }

.practice-result { text-align: center; padding: 40px 0; }
.practice-result-score {
  font-family: var(--font-mono);
  font-size: 44px;
  font-weight: 500;
  background: linear-gradient(135deg, #4f6df5, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 8px;
}
.practice-result-label { color: var(--ink-soft); font-size: 14px; margin-bottom: 24px; }

.practice-explain {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  padding: 14px 16px;
  margin-bottom: 18px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* synonyms / antonyms */
.sa-pair { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.sa-word { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sa-word-ar { font-family: var(--font-ar); font-size: 26px; }
.sa-word-tr { font-size: 12.5px; color: var(--ink-soft); }
.sa-sep { font-size: 20px; color: var(--ink-faint); }
.sa-answer-ar { font-family: var(--font-ar); font-size: 20px; color: var(--ink); margin-bottom: 2px; }
.sa-answer-tr { color: var(--ink-soft); margin-bottom: 10px; }

/* collocations */
.cl-prompt-ar { font-family: var(--font-ar); font-size: 26px; direction: rtl; }
.cl-explain { text-align: left; }
.cl-full-ar { font-family: var(--font-ar); font-size: 20px; color: var(--ink); margin-bottom: 2px; }
.cl-full-translation { color: var(--ink-soft); margin-bottom: 10px; }
.cl-example-ar { font-family: var(--font-ar); font-size: 16px; color: var(--ink); }
.cl-example-translation { color: var(--ink-faint); margin-bottom: 8px; }
.cl-note { padding-top: 8px; border-top: 1px solid var(--line); }

/* определение — a full monolingual-Arabic sentence, not a short phrase, so
   it needs real line-height/max-width instead of cl-prompt-ar's one-liner
   sizing. */
.df-prompt-ar { font-family: var(--font-ar); font-size: 21px; line-height: 1.9; direction: rtl; max-width: 480px; margin: 0 auto; }
.df-explain { text-align: center; }
.df-answer-ar { font-family: var(--font-ar); font-size: 24px; color: var(--ink); margin-bottom: 4px; }
.df-answer-tr { color: var(--ink-soft); }

/* verb check — two-column знаю/не знаю result with a center divider */
.vc-results { padding-top: 8px; }
.vc-summary { text-align: center; margin-bottom: 28px; }
.vc-summary-score {
  display: block;
  font-family: var(--font-mono);
  font-size: 38px;
  font-weight: 500;
  background: linear-gradient(135deg, #4f6df5, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.vc-summary-label { color: var(--ink-soft); font-size: 14px; }

.vc-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  text-align: left;
  max-height: 420px;
}
.vc-divider { width: 1px; background: var(--line); }
.vc-col { min-width: 0; overflow-y: auto; }
.vc-col-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.vc-col-known .vc-col-title { color: #34c759; }
.vc-col-unknown .vc-col-title { color: #ff453a; }
.vc-col-list { display: flex; flex-direction: column; gap: 2px; }
.vc-word-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  text-align: left;
}
.vc-word-row:hover { background: var(--hover); }
.vc-word-ar { font-family: var(--font-ar); font-size: 16px; color: var(--ink); }
.vc-word-tr { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); flex-shrink: 0; }

@media (max-width: 640px) {
  .vc-split { grid-template-columns: 1fr; }
  .vc-divider { display: none; }
  .vc-col-known { order: 1; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; }
  .vc-col-unknown { order: 0; }
}

/* root tree */
.root-meaning { color: var(--ink-soft); font-size: 14px; margin-top: 2px; }

.root-search-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.root-search {
  flex: 1;
  max-width: 320px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-panel);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
  padding: 9px 16px;
  outline: none;
}
.root-search:focus { border-color: var(--ink-faint); }
.root-search::placeholder { color: var(--ink-faint); }
.root-search-count { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; }

/* the full root list can run past 100 entries — cap it to a compact,
   scrollable strip instead of pushing the actual root diagram far down the
   page; typing in the search box narrows it down instantly */
.root-tabs-scroll {
  max-height: 132px;
  overflow-y: auto;
  margin-bottom: 20px;
  padding-right: 4px;
}
.root-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.root-tab {
  font-family: var(--font-ar);
  font-size: 14px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
}
.root-tab.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.root-tab[hidden] { display: none; }

/* diagram on one side, detail card on the other — clicking a word updates
   the card right next to it, no scrolling down to see the result */
.root-layout {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  text-align: left;
  margin-top: 12px;
}

.root-stage {
  position: relative;
  width: 100%;
  max-width: 360px;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

.root-detail {
  flex: 1;
  min-width: 0;
  position: sticky;
  top: 16px;
}

.root-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: linear-gradient(135deg, #4f6df5, #8b5cf6);
  color: #fff;
  box-shadow: var(--shadow-md);
  z-index: 2;
}
.root-center-ar { font-family: var(--font-ar); font-size: 22px; }
.root-center-tr { font-family: var(--font-mono); font-size: 10px; opacity: 0.85; }

.root-line {
  position: absolute;
  height: 1px;
  background: var(--line);
  transform-origin: left center;
  pointer-events: none;
  z-index: 1;
}

.root-node {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  z-index: 2;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.root-node:hover { transform: translate(-50%, -50%) scale(1.06); }
.root-node.active { border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18); }
.root-node-ar { font-family: var(--font-ar); font-size: 17px; }

.root-detail-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: var(--shadow-sm);
  padding: 20px 24px;
}
.root-detail-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.root-detail-ar { font-family: var(--font-ar); font-size: 26px; }
.root-detail-tr { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.root-detail-translation { font-size: 15px; color: var(--ink-soft); margin-bottom: 8px; }
.root-detail-pos {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
}
.root-detail-example {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  text-align: left;
}
.root-detail-example-ar { font-family: var(--font-ar); font-size: 17px; margin-bottom: 4px; }
.root-detail-example-tr { font-size: 13px; color: var(--ink-faint); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .topbar { display: flex; }
  .layout { position: relative; }
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 0.28s ease;
    box-shadow: var(--shadow-md);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-resizer { display: none; }
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.25);
    z-index: 30;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
  }
  .sidebar-backdrop.open { opacity: 1; pointer-events: auto; }
  .main-content { padding: 24px 20px 50px; }
  .breadcrumbs { padding: 16px 20px 0; }
  .wc-ar { font-size: 34px; }
  .wc-verb-past { font-size: 44px; }
  .wc-verb-present { font-size: 22px; }
  .root-layout { flex-direction: column; }
  .root-stage { max-width: 320px; }
  .root-detail { position: static; width: 100%; }
}

/* ---------- Welcome screen + UGC feed ---------- */
.search-box {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.search-input {
  width: 100%;
  border: none;
  background: none;
  outline: none;
  padding: 16px 20px;
  font-size: 17px;
  font-family: var(--font-ui);
  color: var(--ink);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-input::placeholder { color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; }
.search-results { border-top: 1px solid var(--line); }
.search-results:empty { border-top: none; }

/* Search lives in one DOM node (#sidebar-search) that visually travels
   between two states: "hero" — big, centered over the content area, shown
   only on the welcome screen — and the compact pinned form under the brand,
   shown everywhere else. app.js FLIP-animates the move between them. */
.sidebar-search { position: relative; margin-bottom: 18px; }

.sidebar-search:not(.is-hero) .search-box { box-shadow: none; }
.sidebar-search:not(.is-hero) .search-input { padding: 9px 14px; font-size: 13px; text-align: left; }
.sidebar-search:not(.is-hero) .search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  border-top: none;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 30;
}
.sidebar-search:not(.is-hero) .search-results:empty { display: none; }
.sidebar-search:not(.is-hero) .search-result { padding: 9px 14px; }
.sidebar-search:not(.is-hero) .search-result-ar { font-size: 15px; }
.sidebar-search:not(.is-hero) .search-empty { padding: 10px 14px; }

.sidebar-search.is-hero {
  position: fixed;
  z-index: 50;
  margin-bottom: 0;
}
/* results float over the page instead of pushing it down — a long match
   list must never shove the welcome text further away or overlap it more */
.sidebar-search.is-hero .search-results {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  border-top: none;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.sidebar-search.is-hero .search-results:empty { display: none; border: none; box-shadow: none; }
.dictionary-list { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; max-width: 480px; }
.search-result {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 20px;
  border: none;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.search-result:last-child { border-bottom: none; }
.search-result:hover { background: var(--hover); }
.search-result-ar { font-family: var(--font-ar); font-size: 18px; }
.search-result-tr { font-size: 13px; color: var(--ink-soft); flex-shrink: 0; }
.search-empty { padding: 14px 20px; color: var(--ink-faint); font-size: 13px; text-align: center; }

.welcome-intro { margin: 0; }
/* on desktop the hero search floats fixed over the top of .main-content —
   push the intro text down so the input never sits on top of it */
@media (min-width: 861px) {
  .welcome-intro { margin-top: 96px; }
}

/* ---------- Лента: card-based practice feed ---------- */
.feed-shell {
  --feed-accent: #8b5cf6;
  --feed-accent-soft: rgba(139, 92, 246, 0.16);
  --feed-bad: #ac6f61;
  --feed-bad-soft: rgba(172, 111, 97, 0.14);
  max-width: 560px;
  min-height: calc(100vh - 160px);
  margin: 0 auto;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
}

.feed-progress {
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 32px;
  flex-shrink: 0;
}
.feed-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--feed-accent);
  transition: width 0.5s ease;
}

.feed-card {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  padding: 48px 56px;
  background-color: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: background-image 0.5s ease;
}

.fc-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin-bottom: 28px;
}
.fc-card-head .fc-kind { margin-bottom: 0; }

.fc-status-actions {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
}
.fc-status-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.fc-status-btn:hover { border-color: var(--feed-accent); color: var(--ink); }
.fc-status-btn.active { background: var(--feed-accent); color: #fff; border-color: var(--feed-accent); }
.feed-card.fc-enter > div { animation: fc-in 0.42s ease both; }

/* A handful of subtly tinted backdrops the feed rotates between per card —
   just enough variety that each new card reads as a fresh "slide", never
   loud enough to fight the Arabic text sitting on top of it. */
/* each variant also re-tints --feed-accent to match its own hue, so the
   "далее" line, option borders and match-lines shift color together with
   the backdrop instead of staying a fixed purple on every card */
.feed-card.bg-1 {
  --feed-accent: #8b5cf6;
  --feed-accent-soft: rgba(139, 92, 246, 0.16);
  background-image: radial-gradient(circle at 85% 12%, rgba(139, 92, 246, 0.16), transparent 60%);
}
.feed-card.bg-2 {
  --feed-accent: #2db0a8;
  --feed-accent-soft: rgba(45, 176, 168, 0.16);
  background-image: radial-gradient(circle at 12% 88%, rgba(45, 176, 168, 0.16), transparent 60%);
}
.feed-card.bg-3 {
  --feed-accent: #d6943e;
  --feed-accent-soft: rgba(214, 148, 62, 0.16);
  background-image: radial-gradient(circle at 15% 12%, rgba(214, 148, 62, 0.16), transparent 60%);
}
.feed-card.bg-4 {
  --feed-accent: #d65c7a;
  --feed-accent-soft: rgba(214, 92, 122, 0.16);
  background-image: radial-gradient(circle at 88% 88%, rgba(214, 92, 122, 0.16), transparent 60%);
}
.feed-card.bg-5 {
  --feed-accent: #467adc;
  --feed-accent-soft: rgba(70, 122, 220, 0.16);
  background-image: radial-gradient(circle at 50% 8%, rgba(70, 122, 220, 0.16), transparent 60%);
}
.feed-card.bg-6 {
  --feed-accent: #5ea86e;
  --feed-accent-soft: rgba(94, 168, 110, 0.16);
  background-image: radial-gradient(circle at 50% 92%, rgba(94, 168, 110, 0.16), transparent 60%);
}
@keyframes fc-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.fc-kind {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-bottom: 28px;
}

.fc-ar-hero {
  font-family: var(--font-ar);
  font-size: clamp(38px, 7vw, 64px);
  line-height: 1.5;
  color: var(--ink);
}
.fc-blank { color: var(--ink-soft); }

/* слово/конструкция/глагол: перевод спрятан за наведением/тапом на само
   арабское слово — угадай сам, прежде чем подсмотреть, а не перевод сразу
   под словом. .revealed — фолбэк для тача (наведения там нет), см.
   attachTranslationReveal() в feedCardRenderers.js. */
.fc-ar-hero.has-hidden-tr, .fc-verb-forms.has-hidden-tr { cursor: pointer; }
.fc-ar-hero.has-hidden-tr ~ .fc-tr, .fc-verb-forms.has-hidden-tr ~ .fc-tr {
  opacity: 0;
  filter: blur(6px);
  transition: opacity 0.35s ease, filter 0.35s ease;
}
.fc-ar-hero.has-hidden-tr:hover ~ .fc-tr, .fc-verb-forms.has-hidden-tr:hover ~ .fc-tr,
.fc-ar-hero.has-hidden-tr ~ .fc-tr.revealed, .fc-verb-forms.has-hidden-tr ~ .fc-tr.revealed {
  opacity: 1;
  filter: none;
}

/* Определение: a full monolingual-Arabic sentence, not a single word/phrase
   — needs real line-height/max-width instead of fc-ar-hero's single-line
   giant clamp() sizing. */
.fc-ar-prose {
  font-family: var(--font-ar);
  font-size: clamp(19px, 3vw, 24px);
  line-height: 1.9;
  color: var(--ink);
  max-width: 460px;
  direction: rtl;
}

.fc-picture {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin: 0 auto;
}
.fc-picture img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fc-tr { font-size: 16px; color: var(--ink-soft); margin-top: 10px; }

.fc-ru-prompt {
  font-size: 20px;
  color: var(--ink);
  max-width: 420px;
  line-height: 1.5;
}

.fc-example {
  margin-top: 28px;
  padding: 18px 24px;
  background: var(--bg-panel);
  border-radius: var(--radius-sm);
  max-width: 480px;
}
.fc-example-ar { font-family: var(--font-ar); font-size: 24px; line-height: 1.7; color: var(--ink); cursor: pointer; }
.fc-example-tr {
  font-size: 16px;
  color: var(--ink-faint);
  margin-top: 10px;
  opacity: 0;
  filter: blur(5px);
  transition: opacity 0.35s ease, filter 0.35s ease;
}
.fc-example-ar:hover ~ .fc-example-tr, .fc-example-tr.revealed { opacity: 1; filter: none; }

.fc-verb-forms { display: flex; align-items: baseline; gap: 18px; }
.fc-verb-form { font-family: var(--font-ar); font-size: clamp(28px, 5vw, 42px); color: var(--ink); }
.fc-verb-arrow { color: var(--ink-faint); font-size: 18px; }

.fc-next, .fc-reveal {
  position: relative;
  margin-top: 40px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--feed-accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 4px;
  transition: color 0.4s ease;
}
.fc-next:hover, .fc-reveal:hover { opacity: 0.75; }

/* a thin tinted line hovering above the button, matching the card's own
   accent hue — it breathes gently so the call-to-action stays alive even
   before you notice the text under it */
.fc-next::before, .fc-reveal::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 50%;
  height: 1px;
  width: 36px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--feed-accent), transparent);
  animation: fc-cta-line 2.6s ease-in-out infinite;
}
@keyframes fc-cta-line {
  0%, 100% { opacity: 0.4; width: 28px; }
  50% { opacity: 1; width: 48px; }
}

.fc-reveal-in { animation: fc-in 0.4s ease both; }

.fc-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
  max-width: 560px;
}
.fc-option {
  font-family: var(--font-ar);
  font-size: clamp(19px, 3.2vw, 24px);
  color: var(--ink);
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 12px 26px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.fc-option:hover:not(:disabled) { border-color: var(--feed-accent); }
.fc-option:disabled { cursor: default; }
.fc-option.is-correct { border-color: var(--feed-accent); background: var(--feed-accent-soft); color: var(--ink); }
.fc-option.is-wrong { border-color: var(--feed-bad); background: var(--feed-bad-soft); color: var(--ink-soft); }

.fc-result-line {
  margin-top: 20px;
  font-size: 14px;
  color: var(--ink-soft);
  animation: fc-in 0.4s ease both;
}

.fc-grid-4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 32px;
  width: 100%;
  max-width: 380px;
}
.fc-tile {
  font-family: var(--font-ar);
  font-size: 19px;
  color: var(--ink);
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 18px 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.fc-tile:hover:not(:disabled) { border-color: var(--feed-accent); }
.fc-tile:disabled { cursor: default; }
.fc-tile.is-correct { border-color: var(--feed-accent); background: var(--feed-accent-soft); }
.fc-tile.is-wrong { border-color: var(--feed-bad); background: var(--feed-bad-soft); color: var(--ink-soft); }

.fc-arith { font-size: clamp(26px, 4.6vw, 38px); direction: ltr; }

.fc-color-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 32px;
  width: 100%;
  max-width: 320px;
}
.fc-color-swatch {
  aspect-ratio: 1;
  border-radius: 999px;
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 3px var(--bg-panel);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fc-color-swatch:hover:not(:disabled) { transform: scale(1.08); }
.fc-color-swatch:disabled { cursor: default; }
.fc-color-swatch.is-correct { box-shadow: inset 0 0 0 3px var(--bg-panel), 0 0 0 3px var(--feed-accent); }
.fc-color-swatch.is-wrong { opacity: 0.35; }

/* speaker attribution on a Живой диалог card's result line */
.fc-dlg-speaker {
  margin-top: 6px;
  font-family: var(--font-ar);
  font-size: 13px;
  color: var(--ink-faint);
}

/* ---------- Лента: live session stats, старт/recap screens ---------- */
.feed-live-stats {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  text-align: right;
  margin: -22px 0 22px;
}

/* старт/recap share the "framed panel" look of .feed-card without the
   per-card bg-N tinting or enter-transition on background-image — they're
   punctuation between sessions, not a card in the queue. */
.feed-intro, .feed-recap {
  position: relative;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  padding: 48px 56px;
  background-color: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.feed-intro .fc-ru-prompt { margin-top: 6px; font-size: 24px; }

/* a slow-drifting soft blob behind the content — same idea as the Живой
   диалог widget's glow, dialed down to fit a light-mode panel too */
.feed-intro-glow {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 30% 20%, var(--feed-accent-soft), transparent 55%),
              radial-gradient(circle at 75% 80%, var(--feed-accent-soft), transparent 50%);
  opacity: 0.9;
  animation: fc-glow-drift 14s ease-in-out infinite alternate;
}
@keyframes fc-glow-drift {
  0% { transform: translate(-2%, -2%) scale(1); }
  100% { transform: translate(2%, 3%) scale(1.08); }
}

.fc-intro-rule {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 1px;
  margin-bottom: 22px;
  background: linear-gradient(90deg, transparent, var(--feed-accent), transparent);
  animation: fc-cta-line 2.6s ease-in-out infinite;
}
.feed-intro .fc-kind, .feed-intro .fc-ru-prompt, .feed-intro .fc-options-length { position: relative; z-index: 1; }

.fc-options-length {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 340px;
  margin-top: 32px;
}
.fc-option-length {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg);
  color: inherit;
  font-family: var(--font-ui);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.fc-option-length:hover {
  border-color: var(--feed-accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.fc-option-length-icon { flex-shrink: 0; color: var(--ink-faint); transition: color 0.18s ease; }
.fc-option-length:hover .fc-option-length-icon, .fc-option-length.is-suggested .fc-option-length-icon { color: var(--feed-accent); }
.fc-option-length-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.fc-option-length-label { font-size: 16px; color: var(--ink); }
.fc-option-length-hint { font-size: 12px; color: var(--ink-faint); }
.fc-option-length-arrow {
  flex-shrink: 0;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.fc-option-length:hover .fc-option-length-arrow { opacity: 1; transform: translateX(0); color: var(--feed-accent); }
.fc-option-length.is-suggested {
  border-color: var(--feed-accent);
  background: var(--feed-accent-soft);
  box-shadow: 0 0 0 1px var(--feed-accent), 0 8px 24px -12px var(--feed-accent);
}
.fc-option-length.is-suggested .fc-option-length-hint { color: var(--feed-accent); }

/* Vocabulary-coverage readout — sits on the start screen, not just the
   recap, so it's the first thing seen on every visit rather than an
   end-of-session stat that's easy to miss. */
.feed-vocab-progress { position: relative; z-index: 1; width: 100%; max-width: 340px; margin-top: 20px; }
.feed-vocab-progress-track { height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; }
.feed-vocab-progress-fill { height: 100%; border-radius: 999px; background: var(--feed-accent); transition: width 0.3s ease; }
.feed-vocab-progress-label { margin-top: 8px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); text-align: center; }

.feed-recap .dict-stats { justify-content: center; margin: 28px 0 0; }

.feed-recap-proverb {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  max-width: 380px;
}
.feed-recap-proverb-ar { font-family: var(--font-ar); font-size: 19px; color: var(--ink-soft); line-height: 1.6; }
.feed-recap-proverb-tr { font-size: 12.5px; color: var(--ink-faint); margin-top: 6px; }

.feed-recap-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 36px;
}
.feed-recap-actions .fc-next { margin-top: 18px; }

/* Gear button opening Лента's card-type settings — corner of the intro
   panel, same small-circle-icon language as .theme-toggle. */
.fc-settings-btn {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.2s ease;
}
.fc-settings-btn:hover { color: var(--feed-accent); border-color: var(--feed-accent); transform: rotate(24deg); }

/* ---------- Лента: настройки типов карточек ---------- */
.feed-settings {
  position: relative;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 40px 44px;
  background-color: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.fc-settings-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.fc-settings-head .fc-kind { margin-bottom: 0; }
.fc-settings-back {
  background: none;
  border: none;
  color: var(--ink-faint);
  font-family: var(--font-ui);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.15s ease;
}
.fc-settings-back:hover { color: var(--feed-accent); }

.fc-settings-suggestion[hidden] { display: none; }
.fc-settings-suggestion {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--feed-accent);
  background: var(--feed-accent-soft);
  font-size: 13px;
  color: var(--ink-soft);
}
.fc-settings-suggestion-actions { display: flex; gap: 10px; }
.fc-settings-suggestion-actions button {
  font-family: var(--font-ui);
  font-size: 12.5px;
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.fc-settings-suggestion-apply {
  border: 1px solid var(--feed-accent);
  background: var(--feed-accent);
  color: #fff;
}
.fc-settings-suggestion-apply:hover { opacity: 0.9; }
.fc-settings-suggestion-dismiss {
  border: 1px solid var(--line);
  background: none;
  color: var(--ink-faint);
}
.fc-settings-suggestion-dismiss:hover { color: var(--ink); border-color: var(--ink-faint); }

.fc-settings-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 52vh;
  overflow-y: auto;
}
.fc-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
}
.fc-settings-row:last-child { border-bottom: none; }
.fc-settings-row-label { font-size: 14.5px; color: var(--ink); }
.fc-settings-row-control { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.fc-settings-row-state {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  min-width: 82px;
  text-align: right;
}

/* A tiny on/off switch — no framework here, so this is a plain <button
   role="switch"> with a sliding thumb, styled to match the pill language
   used elsewhere (fc-status-btn, theme-toggle) rather than a native
   checkbox. */
.fc-type-switch {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.fc-type-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ink-faint);
  transition: transform 0.18s ease, background 0.18s ease;
}
.fc-type-switch.is-on { background: var(--feed-accent); border-color: var(--feed-accent); }
.fc-type-switch.is-on .fc-type-switch-thumb { transform: translateX(16px); background: #fff; }

.fc-settings-warning {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--feed-bad);
  background: var(--feed-bad-soft);
  color: var(--ink-soft);
  font-size: 12.5px;
  text-align: center;
}

.fc-settings-footer { margin-top: 24px; display: flex; justify-content: center; }
.fc-settings-reset {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-faint);
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.fc-settings-reset:hover { color: var(--ink); border-color: var(--ink-faint); }

/* ---------- Чтение: adapted texts, click-a-word popover ---------- */
.rd-wrap { max-width: 640px; }
.rd-subtitle { font-size: 15px; font-weight: 400; color: var(--ink-faint); }
.rd-title-ar { font-family: var(--font-ar); font-size: 26px; color: var(--ink-soft); margin-top: 4px; }
.rd-hint { font-size: 12.5px; color: var(--ink-faint); margin-top: 10px; min-height: 1em; }
.rd-mode-row { margin-top: 14px; padding-left: 0; padding-right: 0; }
.rd-lines { display: flex; flex-direction: column; gap: 20px; margin-top: 26px; }
.rd-line {
  padding: 18px 22px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.rd-speaker { font-family: var(--font-ar); font-size: 13px; color: var(--accent); margin-bottom: 8px; }
.rd-ar { font-family: var(--font-ar); font-size: 22px; line-height: 2.1; color: var(--ink); direction: rtl; unicode-bidi: plaintext; }
.rd-word {
  position: relative;
  border-radius: 4px;
  padding: 0 1px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.rd-word:hover { background: var(--accent-soft); }
.rd-tr {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 14px;
  color: var(--ink-soft);
}
.rd-popover {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--bg);
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  z-index: 5;
  text-align: center;
}
.rd-popover.rd-popover-below { bottom: auto; top: calc(100% + 6px); }
.rd-popover-lemma { font-family: var(--font-ar); font-size: 14px; }
.rd-popover-tr { font-family: var(--font-mono); font-size: 10.5px; opacity: 0.75; margin-top: 2px; }

/* ---------- Соедини: drag-a-line matching ---------- */
.match-wrap { position: relative; width: 100%; min-height: 220px; }
.match-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.match-line-solid { stroke: var(--feed-accent); stroke-width: 1.4; }
.match-line-live { stroke: var(--feed-accent); stroke-width: 1.4; stroke-dasharray: 3 4; }

.match-cols {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 48px;
}
.match-col { flex: 1; display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.match-item {
  font-family: var(--font-ar);
  font-size: 18px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  cursor: grab;
  touch-action: none;
  transition: border-color 0.15s ease, background 0.15s ease, opacity 0.2s ease;
}
.match-item.selected { border-color: var(--feed-accent); }
.match-item.matched { border-color: transparent; background: var(--feed-accent-soft); cursor: default; opacity: 0.7; }
.match-item.wrong { border-color: var(--feed-bad); background: var(--feed-bad-soft); }

@media (max-width: 860px) {
  .match-cols { gap: 24px; }
}

/* ---------- shared section header ---------- */
.section-title-row { margin-bottom: 22px; }

/* ---------- Мой словарь: progress readout ---------- */
.dict-stats { display: flex; gap: 28px; margin: -6px 0 24px; flex-wrap: wrap; }
.dict-stat { display: flex; flex-direction: column; gap: 2px; }
.dict-stat-num { font-size: 24px; font-weight: 600; color: var(--accent); line-height: 1; }
.dict-stat-label { font-size: 12.5px; color: var(--ink-faint); }

/* ---------- Конструкционные существительные ---------- */
.cn-wrap { max-width: 700px; }
.cn-list { display: flex; flex-direction: column; gap: 8px; }

.cn-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
}
.cn-item.open { box-shadow: var(--shadow-sm); }

.cn-head {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 18px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  flex-wrap: wrap;
}
.cn-head-word { font-family: var(--font-ar); font-size: 24px; color: var(--ink); flex-shrink: 0; }
.cn-head-arrow { color: var(--ink-faint); flex-shrink: 0; }
.cn-head-construction { font-family: var(--font-ar); font-size: 18px; color: var(--ink-soft); }

.cn-hl, .fc-hl {
  color: var(--accent);
  font-weight: 600;
  background: var(--accent-soft);
  border-radius: 5px;
  padding: 0 3px;
}

.cn-body { padding: 0 18px 20px; border-top: 1px solid var(--line); padding-top: 18px; }
.cn-meaning { display: flex; align-items: baseline; gap: 8px; font-size: 14px; color: var(--ink-soft); margin-bottom: 10px; flex-wrap: wrap; }
.cn-tr { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.cn-dash { color: var(--ink-faint); }
.cn-level { margin-left: auto; }
.cn-construction-line { font-size: 13px; color: var(--ink-faint); margin-bottom: 16px; }

.cn-collocations { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.cn-colloc {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  background: var(--bg-panel);
  border-radius: var(--radius-sm);
}
.cn-colloc-ar { font-family: var(--font-ar); font-size: 16px; direction: rtl; }
.cn-colloc-tr { font-size: 12.5px; color: var(--ink-soft); flex-shrink: 0; }

/* ---------- Устойчивые именные конструкции ---------- */
.fc-wrap { max-width: 760px; }

.fc-progress {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.fc-progress-label { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.fc-progress-count { font-family: var(--font-mono); font-size: 16px; color: var(--accent); }

.fc-filters { margin-bottom: 26px; }

.fc-category { margin-bottom: 28px; }
.fc-category-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.fc-category-label { font-size: 13px; color: var(--ink-faint); font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.fc-category-count { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }

.fc-list { display: flex; flex-direction: column; gap: 8px; }

.fc-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
}
.fc-item.open { box-shadow: var(--shadow-sm); }

.fc-head {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.fc-head-phrase { font-family: var(--font-ar); font-size: 19px; color: var(--ink); }
.fc-head-translation { font-size: 13px; color: var(--ink-soft); }
.fc-learned-dot {
  margin-left: auto;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  align-self: center;
}

.fc-body { padding: 0 18px 20px; border-top: 1px solid var(--line); padding-top: 18px; }
.fc-detail-head { margin-bottom: 4px; }

.fc-scheme {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-panel);
  border-radius: var(--radius-sm);
  margin: 4px 0 20px;
}
.fc-scheme-label { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.fc-scheme-ar { font-family: var(--font-ar); font-size: 17px; direction: rtl; }

.fc-learn-btn {
  margin-top: 20px;
  font-size: 13px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
}
.fc-learn-btn:hover { box-shadow: var(--shadow-sm); }
.fc-learn-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ==================================================================
   Живой диалог — floating premium chat widget, top-right, OUTSIDE the
   .layout flex flow (position:fixed) so it never competes with the
   sidebar/main for width. Deliberately its own permanently-dark glass
   aesthetic — independent of the site's day/night toggle, on purpose:
   it's meant to read as a distinct little "app within the app", not a
   themed panel of the main site. Two states, both always in the DOM:
   .ld-launcher (collapsed pill) and .ld-panel (expanded card) — visibility
   toggled by a `collapsed` class on the wrapper, not by add/remove, so the
   transition between them can animate.
   ================================================================== */
.live-dialogue {
  position: fixed;
  top: 72px; /* default position — overridden by an inline left/top once the
                user drags the widget, see js/components/liveDialogue.js */
  right: 20px;
  z-index: 60;
  font-family: var(--font-ui);
}
/* both drag handles get a grab cursor; dragging itself is pointer-events
   driven in JS (makeDraggable), not a native HTML5 drag */
.ld-launcher, .ld-panel-head { touch-action: none; cursor: grab; }
.ld-launcher:active, .ld-panel-head:active { cursor: grabbing; }

.live-dialogue.closed .ld-launcher,
.live-dialogue.closed .ld-panel { display: none; }

/* the only thing visible once closed — same avatar pair as the launcher,
   shrunk to a bare minimum so a "closed" widget still barely nudges the
   page, but a single click brings the whole thing back exactly where it
   was left (position is preserved on .live-dialogue regardless of state). */
.ld-reopen-nub {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(20, 17, 30, 0.82);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.18), 0 10px 30px rgba(0, 0, 0, 0.35);
  cursor: grab;
  touch-action: none;
}
.ld-reopen-nub:active { cursor: grabbing; }
.live-dialogue.closed .ld-reopen-nub { display: flex; }
.ld-reopen-nub .ld-launcher-avatars { transform: scale(0.82); }
@media (max-width: 1180px) {
  .live-dialogue { display: none; }
}

/* ---------- collapsed launcher ---------- */
.ld-launcher {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(20, 17, 30, 0.82);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.18), 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 22px rgba(139, 92, 246, 0.22);
  cursor: pointer;
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
  animation: ld-launcher-breathe 4.5s ease-in-out infinite;
}
.ld-launcher:hover {
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.32), 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 32px rgba(139, 92, 246, 0.36);
}
@keyframes ld-launcher-breathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.18), 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 22px rgba(139, 92, 246, 0.22); }
  50% { box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.3), 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 34px rgba(139, 92, 246, 0.34); }
}
.ld-launcher-avatars {
  position: relative;
  width: 34px;
  height: 30px;
  flex-shrink: 0;
}
.ld-avatar {
  position: absolute;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ar);
  font-size: 13px;
  color: #fff;
  border: 2px solid rgba(20, 17, 30, 0.9);
}
.ld-avatar.ld-av-a { left: 0; background: linear-gradient(135deg, #6d7cf5, #4f6df5); z-index: 1; }
.ld-avatar.ld-av-b { left: 14px; background: linear-gradient(135deg, #a78bfa, #8b5cf6); z-index: 2; }
.ld-launcher-text { display: flex; flex-direction: column; gap: 1px; }
.ld-launcher-label { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.92); }
.ld-launcher-status { display: flex; align-items: center; gap: 4px; font-size: 10px; color: rgba(255, 255, 255, 0.5); }
.ld-online-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 6px #34d399;
  animation: ld-online-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes ld-online-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.8); }
}
.ld-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f472b6, #ef4444);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.55);
  animation: ld-badge-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes ld-badge-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* ---------- expanded panel ---------- */
.ld-panel {
  position: relative;
  width: 320px;
  height: 460px;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(18, 16, 28, 0.8);
  backdrop-filter: blur(26px) saturate(170%);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.16), 0 24px 70px rgba(0, 0, 0, 0.5), 0 0 46px rgba(139, 92, 246, 0.22);
  overflow: hidden;
  transform-origin: top right;
}

/* slow drifting purple glow behind the glass, pure CSS, no assets */
.ld-panel::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.35), transparent 70%);
  filter: blur(10px);
  animation: ld-glow-drift 9s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes ld-glow-drift {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
  50% { transform: translate(-30px, 30px) scale(1.25); opacity: 1; }
}

/* the collapse/expand crossfade — both nodes always present */
.ld-launcher, .ld-panel { transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1), transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
.live-dialogue.collapsed .ld-panel { opacity: 0; transform: scale(0.85) translateY(-8px); pointer-events: none; position: absolute; top: 0; right: 0; }
.live-dialogue:not(.collapsed) .ld-launcher { opacity: 0; transform: scale(0.85); pointer-events: none; position: absolute; top: 0; right: 0; }

.ld-panel-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.ld-panel-head-text { flex: 1; min-width: 0; }
.ld-panel-title { font-size: 13px; font-weight: 600; color: #fff; }
.ld-panel-subtitle {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-ar);
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 2px;
}
.ld-collapse-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.ld-collapse-btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

.ld-feed {
  position: relative;
  z-index: 1;
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  mask-image: linear-gradient(to bottom, transparent, black 20px, black calc(100% - 6px), transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 20px, black calc(100% - 6px), transparent);
}
.ld-feed::-webkit-scrollbar { width: 5px; }
.ld-feed::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 999px; }

.ld-bubble {
  max-width: 84%;
  padding: 8px 12px;
  border-radius: 15px;
  cursor: pointer;
  animation: ld-bubble-in 0.5s cubic-bezier(0.22, 1.15, 0.4, 1) both;
}
@keyframes ld-bubble-in {
  from { opacity: 0; transform: translateY(14px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.ld-bubble.ld-left {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom-left-radius: 4px;
}
.ld-bubble.ld-right {
  align-self: flex-end;
  background: linear-gradient(135deg, #8b5cf6, #7c4de0);
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.35);
  border-bottom-right-radius: 4px;
}
.ld-meta {
  font-family: var(--font-mono);
  font-size: 9px;
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ld-bubble.ld-left .ld-meta { color: rgba(255, 255, 255, 0.4); }
.ld-bubble.ld-right .ld-meta { color: rgba(255, 255, 255, 0.75); }
.ld-text.ld-ar, .ld-ar {
  font-family: var(--font-ar);
  font-size: 15px;
  line-height: 1.7;
  direction: rtl;
  display: block;
  color: rgba(255, 255, 255, 0.94);
}
.ld-word {
  position: relative;
  border-radius: 4px;
  transition: background 0.15s ease;
}
.ld-word:hover { background: rgba(255, 255, 255, 0.14); }

.ld-tr {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.15);
  font-size: 12px;
  line-height: 1.5;
}
.ld-bubble.ld-left .ld-tr { color: rgba(255, 255, 255, 0.6); }
.ld-bubble.ld-right .ld-tr { color: rgba(255, 255, 255, 0.85); }

.ld-popover {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #0e0c16;
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
  z-index: 20;
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.3), 0 8px 20px rgba(0, 0, 0, 0.5);
  text-align: center;
  animation: ld-badge-pop 0.18s ease both;
}
.ld-popover-lemma { font-family: var(--font-ar); font-size: 14px; }
.ld-popover-tr { font-family: var(--font-mono); font-size: 10.5px; opacity: 0.75; }

/* ---------- "печатает…" indicator ---------- */
.ld-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 11px 14px;
  border-radius: 15px;
  width: fit-content;
}
.ld-typing.ld-left { align-self: flex-start; background: rgba(255, 255, 255, 0.07); border-bottom-left-radius: 4px; }
.ld-typing.ld-right { align-self: flex-end; background: rgba(139, 92, 246, 0.28); border-bottom-right-radius: 4px; }
.ld-typing-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  animation: ld-dot-bounce 1.1s ease-in-out infinite;
}
.ld-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.ld-typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes ld-dot-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}