/* ============ Animei «Periwinkle» — тёмная тема по умолчанию ============ */
:root {
  --paper: #0a0a0f;        /* фон */
  --paper-2: #1a1a26;      /* поверхность карточек */
  --surface: #13131a;
  --ink: #e2e8f0;
  --ink-soft: #94a3b8;
  --ink-dim: #64748b;
  --line: #2a2a3a;
  --accent: #7c8cf8;       /* барвинок (periwinkle) */
  --accent-deep: #4f46e5;  /* индиго */
  --accent-hover: #b4bcfb;
  --accent-soft: #1c1e3a;  /* мягкая подложка акцента на тёмном */
  --accent-grad: linear-gradient(120deg, #7c8cf8, #4f46e5);
  --indigo: #7c8cf8;       /* второй акцент — тот же барвинок */
  --indigo-soft: #1c1e3a;
  --gold: #f59e0b;         /* warning/золото */
  --success: #10b981;
  --danger: #f43f5e;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  --shadow-lift: 0 12px 30px rgba(0, 0, 0, 0.55);
  --radius: 12px;
  --radius-sm: 8px;
  /* мягкое «сияние» фона — барвинок сверху, индиго снизу */
  --glow-a: rgba(124, 140, 248, 0.10);
  --glow-b: rgba(79, 70, 229, 0.08);
  --jp-font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
  --ui-font: "Inter", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-family: var(--ui-font);
  -webkit-tap-highlight-color: transparent;
}

/* Живой фон: два мягких цветных пятна + тёплая бумага. Фиксирован при прокрутке. */
body {
  /* Шапка теперь в потоке (position:static) — компенсировать её фиксированную
     высоту отступом больше не нужно. */
  padding-top: 0;
  min-height: 100vh;
  background:
    radial-gradient(1100px 620px at 100% -8%, var(--glow-a), transparent 62%),
    radial-gradient(1000px 720px at -12% 108%, var(--glow-b), transparent 58%),
    var(--paper);
  background-attachment: fixed;
}

/* Тонкая сетчатая текстура поверх фона — еле заметная, для глубины.
   Тёмная тема по умолчанию — светлые штрихи с малой непрозрачностью. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='.6' stroke-opacity='.05'%3E%3Cpath d='M20 0v40M0 20h40M0 0l40 40M40 0L0 40'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 34px 34px;
}
[data-theme="light"] body::before {
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%237c8cf8' stroke-width='.6' stroke-opacity='.16'%3E%3Cpath d='M20 0v40M0 20h40M0 0l40 40M40 0L0 40'/%3E%3C/g%3E%3C/svg%3E");
}

.hidden { display: none !important; }

/* ---------- Верхняя панель ---------- */
.topbar {
  /* Фиксированная шапка: липнет к верху экрана при прокрутке. sticky (а не fixed)
     — остаётся в потоке, поэтому компенсировать высоту паддингом у body не нужно. */
  position: sticky;
  top: 0;
  height: 58px;
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: #fff;
  z-index: 50;
  box-shadow: 0 2px 14px rgba(79, 70, 229, 0.35);
  padding-top: env(safe-area-inset-top);
}
.topbar-inner {
  max-width: 760px;
  margin: 0 auto;
  height: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;   /* тот же горизонтальный отступ, что и у тела (.view) */
}
.brand { display: flex; flex-direction: row; align-items: center; gap: 9px; line-height: 1.1; cursor: pointer; margin-right: auto; }
.brand-logo { width: 34px; height: 34px; flex-shrink: 0; display: block; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25)); }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-jp { font-family: var(--jp-font); font-size: 20px; font-weight: 700; letter-spacing: .5px; }
.brand-ru { font-size: 11px; opacity: .85; }
.topbar-actions { display: flex; align-items: center; gap: 6px; }

.icon-btn {
  background: rgba(255,255,255,.14);
  border: none;
  color: #fff;
  width: 38px; height: 38px;
  border-radius: 10px;
  font-size: 19px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s;
}
.icon-btn:hover { background: rgba(255,255,255,.28); }
/* Ссылка-иконка (напр. «На Animei») в шапке — те же размеры, что у .icon-btn. */
a.icon-btn { text-decoration: none; }

/* Переключатель языка в шапке — свой выпадающий список (не нативный <select>),
   чтобы и раскрытое меню было в фирменных цветах, а не системным чёрно-белым. */
.lang-switch { position: relative; }
.lang-btn {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  height: 38px;
  border-radius: 10px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color .15s;
}
.lang-btn:hover { background: rgba(255,255,255,.28); }
.lang-chev { transition: transform .15s; }
.lang-switch.open .lang-chev { transform: rotate(180deg); }
/* Раскрытое меню — в стиле поверхностей приложения (реагирует на тему). */
.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: 4px;
  min-width: 132px;
  z-index: 60;
  display: none;
}
.lang-switch.open .lang-menu { display: block; }
.lang-opt {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--ink);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font: inherit;
  cursor: pointer;
}
.lang-opt:hover { background: var(--accent-soft); color: var(--accent); }
.lang-opt.is-active { background: var(--accent-soft); color: var(--accent); }

/* ---------- Общие ---------- */
.view { max-width: 760px; margin: 0 auto; padding: 14px 14px 60px; }
.loader { padding: 40px 0; text-align: center; color: var(--ink-soft); }
.section-h { font-size: 20px; margin: 8px 4px 16px; }

.ai-banner {
  background: var(--accent-soft);
  border: 1px solid #3a3d66;
  color: #b4bcfb;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  margin-bottom: 12px;
}

/* ---------- Фильтр категорий ---------- */
.cat-filter {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 12px;
  -webkit-overflow-scrolling: touch;
}
.cat-pill {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink-soft);
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.cat-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---------- Список новостей ---------- */
.news-list { display: flex; flex-direction: column; gap: 12px; }
.news-card {
  display: flex;              /* карточка <a>: колонка, чтобы полоску сложности прижать вниз */
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 16px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .12s, box-shadow .12s;
}
.news-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--accent); }
.news-card-media {
  position: relative;
  margin: -15px -16px 12px;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  background: var(--line);
  /* 3:2 вместо 16:9 — кадр компактнее, картинки не выглядят «растянутыми». */
  aspect-ratio: 3 / 2;
}
/* мерцание, пока фото грузится */
.news-card-media.img-loading::after {
  content: "";
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  animation: shimmer 1.3s infinite;
}
[data-theme="light"] .news-card-media.img-loading::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
}
.news-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.news-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.tag {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent-hover);
  font-weight: 600;
  letter-spacing: .2px;
}
.tag.src { background: #1a2231; color: #7fb0e0; }

/* Метка сложности на карточке новости */
.diff-chip {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 7px;
  font-weight: 600;
  letter-spacing: .2px;
  white-space: nowrap;
}
/* Тёмная тема по умолчанию */
.diff-chip.easy { background: #14261d; color: #34d399; }
.diff-chip.mid { background: #2a2410; color: #fbbf24; }
.diff-chip.hard { background: #2e1620; color: #fb7185; }
[data-theme="light"] .diff-chip.easy { background: #d1fae5; color: #047857; }
[data-theme="light"] .diff-chip.mid { background: #fef3c7; color: #b45309; }
[data-theme="light"] .diff-chip.hard { background: #ffe4e6; color: #be123c; }

/* Пометка «Вам по уровню» */
.level-badge {
  font-size: 10.5px;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 1px 7px;
  border-radius: 6px;
  font-weight: 600;
  white-space: nowrap;
}
/* «вы знаете N%» — доля слов новости, уже сохранённых в личный словарь */
.know-badge {
  font-size: 10.5px;
  color: #34d399;
  background: #14261d;
  padding: 1px 7px;
  border-radius: 6px;
  font-weight: 600;
  white-space: nowrap;
}
[data-theme="light"] .know-badge { background: #d1fae5; color: #047857; }
/* Плашка «для новичков» (🎓) — гарантированно лёгкие тексты N5/N4 (Watanoc) */
.begin-badge {
  font-size: 11px;
  color: #a5b4fc;
  background: #1e1b3a;
  border: 1px solid #4f46e5;
  padding: 2px 8px;
  border-radius: 7px;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
}
[data-theme="light"] .begin-badge { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }
.news-card-title {
  font-family: var(--jp-font);
  font-size: 19px;
  line-height: 1.5;
  font-weight: 600;
  margin: 0 0 6px;
}
.news-card-summary {
  font-family: var(--jp-font);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Чтение статьи ---------- */
.article-meta { display: flex; gap: 8px; align-items: center; margin: 4px 0 10px; flex-wrap: wrap; }
.article-hero {
  width: 100%;
  /* 2:1 — родной формат генерируемых обложек (см. lib/genimage.js): картинка
     показывается целиком, без уродливого кропа из квадратного кадра */
  aspect-ratio: 2 / 1;
  max-height: 320px;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius);
  display: block;
  margin: 4px 0 16px;
  background: var(--line);
}
.article-title {
  font-family: var(--jp-font);
  font-size: 26px;
  line-height: 1.6;
  margin: 0 0 20px;
  font-weight: 700;
  /* Длинные катаканные слова-токены (напр. サーティーワンアイスクリーム) при
     word-break:normal НЕ переносятся и распирают страницу вбок (горизонтальный
     скролл на телефоне). Разрешаем перенос внутри слова при переполнении. */
  overflow-wrap: anywhere;
}
/* То же для текста статьи и полного перевода — на случай длинных слов/ссылок. */
.sentence-text,
.translation-body { overflow-wrap: anywhere; }
/* Переведённый заголовок — обычный текст без фуриганы: интерфейсный шрифт,
   плотнее межстрочный (нет строки ruby). */
.article-title.translated {
  font-family: var(--ui-font);
  line-height: 1.3;
}

/* Заголовок в процессе перевода: пригашен и пульсирует, как скелетон — видно,
   что название тоже переводится (текст не убираем, чтобы строка не прыгала). */
.article-title.translating {
  opacity: .45;
  animation: title-translating 1.1s ease-in-out infinite alternate;
}

@keyframes title-translating {
  from { opacity: .45; }
  to { opacity: .2; }
}
.article-body { display: flex; flex-direction: column; gap: 18px; }

.sentence-block {
  border-left: 3px solid var(--line);
  padding: 4px 8px 4px 14px;
  transition: border-color .2s, background .2s;
}
.sentence-text {
  font-family: var(--jp-font);
  font-size: 21px;
  line-height: 2.1;
}
.explain-btn {
  margin-top: 8px;
  background: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.explain-btn:hover { background: var(--accent); color: #fff; }
.reader-hint {
  margin-top: 26px;
  font-size: 12.5px;
  color: var(--ink-soft);
  background: var(--paper-2);
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}

/* ---------- Полоска сложности JLPT ---------- */
.jlpt { margin-top: 10px; }
.jlpt-bar {
  display: flex;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--line);
}
.jlpt-seg { height: 100%; }
.jlpt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-soft);
}
.jlpt-li { display: inline-flex; align-items: center; gap: 5px; }
.jlpt-li i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.jlpt-article { width: 100%; margin-top: 12px; }
.jlpt-article .jlpt-bar { height: 11px; }

/* ---------- Токены и фуригана ---------- */
.tok {
  cursor: pointer;
  border-radius: 4px;
  padding: 0 1px;
  transition: background .12s;
}
/* Ненавязчивая подсветка сложности слова: лёгкий фон цветом уровня JLPT
   (те же цвета, что в полоске сложности статьи: N5 изумруд … N1 роза). */
.tok.jl5 { background: rgba(16, 185, 129, .10); }
.tok.jl4 { background: rgba(52, 211, 153, .10); }
.tok.jl3 { background: rgba(124, 140, 248, .13); }
.tok.jl2 { background: rgba(245, 158, 11, .13); }
.tok.jl1 { background: rgba(244, 63, 94, .13); }
[data-theme="light"] .tok.jl5 { background: rgba(16, 185, 129, .14); }
[data-theme="light"] .tok.jl4 { background: rgba(52, 211, 153, .14); }
[data-theme="light"] .tok.jl3 { background: rgba(99, 102, 241, .13); }
[data-theme="light"] .tok.jl2 { background: rgba(245, 158, 11, .16); }
[data-theme="light"] .tok.jl1 { background: rgba(244, 63, 94, .13); }
.tok.lookup:hover { background: var(--accent-soft); }
.tok.punct, .tok.kana-only { cursor: default; }
/* Слово уже в личном словаре — знакомое: мягкая зелёная подчёркивающая черта */
.tok.known { box-shadow: inset 0 -2px 0 #10b981; }
[data-theme="light"] .tok.known { box-shadow: inset 0 -2px 0 #059669; }
ruby { ruby-align: center; }
rt {
  font-family: var(--jp-font);
  font-size: .5em;
  color: var(--accent);
  font-weight: 500;
  transition: opacity .15s;
}
body.no-furigana rt { opacity: 0; font-size: .01em; }

/* ---------- Нижние карточки (sheet) ---------- */
.sheet { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(5,5,12,.6); }
.sheet-card {
  position: relative;
  background: var(--paper-2);
  width: 100%;
  max-width: 640px;
  max-height: 82vh;
  overflow-y: auto;
  border-radius: 18px 18px 0 0;
  padding: 22px 20px calc(24px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 24px rgba(0,0,0,.2);
  animation: slideUp .22s ease;
}
@keyframes slideUp { from { transform: translateY(30px); opacity: .4; } to { transform: translateY(0); opacity: 1; } }
.sheet-close {
  position: absolute; top: 12px; right: 14px;
  background: var(--line); border: none; color: var(--ink);
  width: 30px; height: 30px; border-radius: 50%;
  font-size: 20px; cursor: pointer; line-height: 1;
}

/* Карточка слова */
.ws-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; padding-right: 34px; }
.ws-word { font-family: var(--jp-font); font-size: 30px; font-weight: 700; }
.ws-reading { font-family: var(--jp-font); font-size: 17px; color: var(--accent); }
.ws-pos { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 12px; }
.ws-badges { display: flex; gap: 6px; margin: 6px 0 12px; flex-wrap: wrap; }
.ws-badge { font-size: 11px; padding: 2px 8px; border-radius: 6px; background: #14261d; color: #34d399; }
.ws-badge.jlpt { background: #1a2231; color: #7fb0e0; }
/* Бейдж уровня — цветом уровня (как подсветка слов в тексте и полоска статьи) */
.ws-badge.jlpt.jl5 { background: #14261d; color: #34d399; }
.ws-badge.jlpt.jl4 { background: #14261d; color: #6ee7b7; }
.ws-badge.jlpt.jl3 { background: #1c2140; color: #a5b4fc; }
.ws-badge.jlpt.jl2 { background: #2a2410; color: #fbbf24; }
.ws-badge.jlpt.jl1 { background: #2e1620; color: #fb7185; }
.ws-sense { margin: 0 0 10px; padding-left: 4px; }
.ws-sense .num { color: var(--accent); font-weight: 700; margin-right: 6px; }
.ws-sense .ws-en { display: block; font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
.ws-sense .spos { display: block; font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
.ws-skel { padding: 6px 0 14px; }
.ws-skel .ws-skel-title { width: 45%; height: 24px; margin-bottom: 16px; }
.ws-empty { color: var(--ink-soft); padding: 10px 0; }
.ws-actions { margin-top: 8px; display: flex; gap: 8px; }
.btn {
  border: none; border-radius: 10px; padding: 9px 14px;
  font-size: 14px; cursor: pointer; font-weight: 600;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-ghost { background: var(--line); color: var(--ink); }
.btn-saved { background: var(--gold); color: #fff; }

/* AI-объяснение */
.explain-card { border-radius: 18px 18px 0 0; }
.explain-source {
  font-family: var(--jp-font);
  font-size: 16px;
  background: var(--paper-2);          /* нейтральный фон — контраст в обеих темах */
  color: var(--ink);                   /* обычный цвет текста, а не красный по красному */
  border-left: 3px solid var(--accent);
  padding: 10px 12px;
  border-radius: 10px;
  margin: 4px 34px 14px 0;
  line-height: 1.7;
}
.explain-body { font-size: 15px; line-height: 1.7; min-height: 40px; }

/* Унифицированный разбор */
.exp-loading { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); padding: 20px 0; }
.spin {
  width: 18px; height: 18px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent);
  display: inline-block; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.exp-note { color: var(--ink-soft); padding: 10px 0; }
.exp-err { color: var(--accent); padding: 10px 0; }

.exp-block { margin-bottom: 16px; }
.exp-h {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 7px;
}
.exp-translation { font-size: 17px; line-height: 1.55; font-weight: 500; }

.exp-breakdown {
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: bd;
  display: flex; flex-direction: column; gap: 8px;
}
.bd-item {
  position: relative;
  padding: 11px 13px 11px 44px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
}
.bd-item::before {
  counter-increment: bd;
  content: counter(bd);
  position: absolute; left: 12px; top: 12px;
  width: 23px; height: 23px;
  border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 700;
  display: grid; place-items: center;
}
.bd-jp { display: inline-flex; flex-direction: column; line-height: 1.2; margin-bottom: 5px; }
.bd-read { font-family: var(--jp-font); font-size: 11.5px; color: var(--accent); font-weight: 500; letter-spacing: .3px; }
.bd-part { font-family: var(--jp-font); font-size: 18px; font-weight: 700; }
.bd-jp.sayable { cursor: pointer; transition: opacity .15s; }
.bd-jp.sayable:hover { opacity: .65; }
.bd-jp.sayable .bd-part::after { content: " 🔊"; font-size: 11px; opacity: .45; }
.bd-mean { font-size: 14px; line-height: 1.55; color: var(--ink); }

.exp-grammar { margin: 0; padding-left: 18px; }
.exp-grammar li { margin: 6px 0; font-size: 14px; line-height: 1.55; }
.exp-grammar b { font-family: var(--jp-font); }

.exp-vocab { display: flex; flex-direction: column; gap: 2px; }
.vrow {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.vrow:last-child { border-bottom: none; }
.vword { font-family: var(--jp-font); font-size: 17px; font-weight: 600; }
.vread { font-family: var(--jp-font); font-size: 13px; color: var(--accent); }
.vmean { font-size: 13.5px; color: var(--ink-soft); flex: 1; }
.vsave {
  background: none; border: none; color: var(--line);
  font-size: 19px; cursor: pointer; padding: 0 2px; line-height: 1;
}
.vsave:hover { color: var(--gold); }
.vsave.on { color: var(--gold); }

.explain-btn.ready { background: var(--accent); color: #fff; }

/* Сохранённые слова */
.saved-list { display: flex; flex-direction: column; gap: 8px; }
.saved-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.saved-card .sw { font-family: var(--jp-font); font-size: 20px; font-weight: 600; }
.saved-card .sr { font-family: var(--jp-font); color: var(--accent); font-size: 14px; }
.saved-card .sd { flex: 1; font-size: 13px; color: var(--ink-soft); }
.saved-card .del { background: none; border: none; color: var(--ink-soft); font-size: 18px; cursor: pointer; }
.empty-note { color: var(--ink-soft); text-align: center; padding: 40px 10px; }

/* ============ Светлая тема (Animei light) ============ */
[data-theme="light"] {
  --paper: #f4f5fa;
  --paper-2: #ffffff;
  --surface: #ffffff;
  --ink: #1e293b;
  --ink-soft: #475569;
  --ink-dim: #64748b;
  --line: #e3e7f0;
  --accent: #7c8cf8;
  --accent-deep: #4f46e5;
  --accent-hover: #4f46e5;
  --accent-soft: #eef0fe;
  --indigo: #4f46e5;
  --indigo-soft: #eef0fe;
  --gold: #d97706;
  --shadow: 0 2px 10px rgba(79, 70, 229, 0.08);
  --shadow-lift: 0 10px 28px rgba(79, 70, 229, 0.16);
  --glow-a: rgba(124, 140, 248, 0.10);
  --glow-b: rgba(79, 70, 229, 0.07);
}
[data-theme="light"] .tag { color: var(--accent-deep); }
[data-theme="light"] .tag.src { background: #e8eef6; color: #33608f; }
[data-theme="light"] .ai-banner { border-color: #d4d9fb; color: #4f46e5; }
[data-theme="light"] .ws-badge { background: #d1fae5; color: #047857; }
[data-theme="light"] .ws-badge.jlpt { background: #e8eef6; color: #33608f; }
[data-theme="light"] .ws-badge.jlpt.jl5 { background: #d1fae5; color: #047857; }
[data-theme="light"] .ws-badge.jlpt.jl4 { background: #d1fae5; color: #059669; }
[data-theme="light"] .ws-badge.jlpt.jl3 { background: #e0e7ff; color: #4338ca; }
[data-theme="light"] .ws-badge.jlpt.jl2 { background: #fef3c7; color: #b45309; }
[data-theme="light"] .ws-badge.jlpt.jl1 { background: #ffe4e6; color: #be123c; }
[data-theme="light"] .news-card-img,
[data-theme="light"] .article-hero { opacity: 1; }
.news-card-img, .article-hero { opacity: .95; }
html, body { transition: background .25s, color .25s; }

/* ============ Панель фильтров/поиска ============ */
.controls { margin-bottom: 12px; }
.search-wrap { position: relative; margin-bottom: 10px; }
.search-ico {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ink-soft); font-size: 17px; pointer-events: none;
}
.search-input {
  width: 100%;
  padding: 11px 14px 11px 36px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink);
  border-radius: 12px;
  font-size: 15px;
  font-family: var(--ui-font);
  outline: none;
}
.search-input:focus { border-color: var(--accent); }

.filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: var(--paper-2);
}
.seg-btn {
  border: none; background: none; color: var(--ink-soft);
  padding: 6px 12px; font-size: 13px; cursor: pointer;
}
.seg-btn.active { background: var(--accent); color: #fff; }
.pill-toggle {
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink-soft);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
}
.pill-toggle.on { background: var(--accent-deep); color: #fff; border-color: var(--accent-deep); }

/* ============ Сетка на широком экране ============ */
@media (min-width: 700px) {
  .news-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .view, .topbar-inner { max-width: 900px; }
  /* Десктоп — компактнее: карточки, шрифты и отступы мельче, чем на телефоне,
     чтобы лента не выглядела крупной и «пустой» на широком экране. */
  .news-card { padding: 12px 13px; }
  .news-card-media { margin: -12px -13px 10px; }
  .news-card-title { font-size: 15.5px; line-height: 1.45; margin: 0 0 5px; }
  .news-card-summary { font-size: 12.5px; line-height: 1.5; }
  .news-card-top { gap: 6px; margin-bottom: 7px; }
  .section-h { font-size: 17px; margin: 4px 4px 12px; }
  .view { padding: 12px 14px 50px; }
  .brand-jp { font-size: 18px; }
}
@media (min-width: 1040px) {
  .news-list { grid-template-columns: repeat(3, 1fr); }
  .view, .topbar-inner { max-width: 1000px; }
}
/* Очень широкий экран — 4 колонки, карточки ещё компактнее (лучше используем ширину). */
@media (min-width: 1360px) {
  .news-list { grid-template-columns: repeat(4, 1fr); }
  .view, .topbar-inner { max-width: 1240px; }
}

/* Телефон: текст статьи мельче. 21px с line-height 2.1 на узком экране занимал
   слишком много места и «кричал» — уменьшаем японский текст и полный перевод,
   читается спокойнее и помещается больше. Фуригана (rt = .5em) масштабируется. */
@media (max-width: 640px) {
  .sentence-text { font-size: 16px; line-height: 1.85; }
  .translation-body { font-size: 15px; line-height: 1.65; }

  /* Шапка на телефоне — компактнее: меньше высота, лого, текст и кнопки. */
  .topbar, .topbar-inner { height: 50px; }
  .topbar-inner { gap: 7px; padding: 0 12px; }
  .brand { gap: 7px; }
  .brand-logo { width: 28px; height: 28px; }
  .brand-jp { font-size: 16px; }
  .brand-ru { font-size: 9.5px; }
  .topbar-actions { gap: 4px; }
  .icon-btn { width: 32px; height: 32px; font-size: 16px; border-radius: 9px; }
  .icon-btn svg { width: 17px; height: 17px; }
  .lang-btn { height: 32px; padding: 0 8px; font-size: 12px; }

  /* Страница статьи — компактнее: меньше заголовок, обложка, отступы, кнопки/табы. */
  .view { padding: 10px 12px 48px; }
  .article-title { font-size: 20px; line-height: 1.4; margin: 0 0 12px; }
  .article-title.translated { line-height: 1.25; }
  .article-meta { gap: 6px; margin: 2px 0 8px; }
  .article-hero { max-height: 190px; margin: 2px 0 12px; }
  .article-body { gap: 12px; }
  .sentence-block { padding: 3px 6px 3px 11px; border-left-width: 2px; }
  .explain-btn { margin-top: 6px; padding: 4px 10px; font-size: 12px; }
  .reader-hint { margin-top: 16px; padding: 8px 11px; font-size: 11.5px; }
  .reader-top { margin-bottom: 8px; }
  .reader-back { padding: 5px 12px; font-size: 12.5px; }
  /* Скоуп .reader-top — выше специфичность базового .reading-seg .seg-btn (15px),
     иначе оно (ниже по файлу) перебивало мобильный размер, и переключатель
     оставался крупнее кнопки «К списку». */
  .reader-top .reading-seg .seg-btn { min-width: 36px; padding: 4px 10px; font-size: 12.5px; }
  .reader-tabs { margin: 2px 0 12px; }
  .reader-tabs .seg { font-size: 13px; }
  .reader-tabs .seg-btn { padding: 6px 18px; }
}

/* ============ Скелетоны загрузки ============ */
.skel-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 16px;
  overflow: hidden;
}
.skel { position: relative; background: var(--line); border-radius: 6px; overflow: hidden; }
.skel::after {
  content: ""; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  animation: shimmer 1.3s infinite;
}
[data-theme="light"] .skel::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); }
@keyframes shimmer { 100% { transform: translateX(100%); } }
.skel-img { height: 150px; margin: -15px -16px 12px; border-radius: var(--radius) var(--radius) 0 0; }
.skel-line { height: 13px; margin-bottom: 9px; }
.skel-line.w70 { width: 70%; }
.skel-line.w40 { width: 40%; }

/* ============ Карточки: анимация, прочитано, закладки ============ */
.news-card { position: relative; animation: fadeIn .32s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.news-card.read { opacity: .58; }
.news-card.read:hover { opacity: .82; }
.read-badge {
  font-size: 10.5px; color: var(--ink-soft); border: 1px solid var(--line);
  padding: 1px 6px; border-radius: 6px;
}
.bookmark-btn {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  border: none; cursor: pointer; font-size: 15px;
  background: rgba(0,0,0,.35); color: #fff;
  display: grid; place-items: center;
}
.bookmark-btn.on { background: var(--gold); }

/* ============ Озвучка ============ */
.speak-btn {
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--accent);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.speak-btn:hover { background: var(--accent); color: #fff; }
.speak-btn.speaking { background: var(--accent); color: #fff; }
.sentence-actions { margin-top: 8px; display: flex; gap: 8px; align-items: center; }
.sentence-actions .explain-btn { margin-top: 0; }
.explain-source-row { display: flex; gap: 10px; align-items: flex-start; margin: 4px 34px 14px 0; }
.explain-source-row .explain-source { margin: 0; flex: 1; }
.explain-source-row .speak-btn { flex: 0 0 auto; }
.ws-speak { margin-left: auto; }

/* ============ Тренажёр (SRS) ============ */
.srs-panel {
  background: linear-gradient(120deg, var(--accent), var(--accent-deep));
  color: #fff;
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.srs-stats { display: flex; gap: 18px; margin-bottom: 12px; }
.srs-stat { line-height: 1.1; }
.srs-stat b { font-size: 24px; display: block; }
.srs-stat span { font-size: 11.5px; opacity: .85; }
.srs-train-btn {
  width: 100%;
  border: none;
  background: #fff;
  color: var(--accent);
  font-weight: 700;
  font-size: 15px;
  padding: 12px;
  border-radius: 12px;
  cursor: pointer;
}
.srs-train-btn:disabled { opacity: .6; cursor: default; }

/* Календарь занятий: 12 недель, по колонке на неделю */
.streak-cal-wrap { margin-top: 14px; }
.streak-cal {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 11px);
  gap: 3px;
  justify-content: start;
}
.streak-day { width: 11px; height: 11px; border-radius: 3px; background: rgba(255,255,255,.18); }
.streak-day.on { background: #fff; }
.streak-cap { font-size: 11px; opacity: .8; margin-top: 6px; }

/* Экспорт/импорт слов */
.words-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: -6px 4px 14px;
}
.words-tools-hint { font-size: 11.5px; color: var(--ink-soft); }

.train-area { max-width: 520px; margin: 0 auto; padding-top: 10px; }
.train-progress { text-align: center; color: var(--ink-soft); font-size: 13px; margin-bottom: 14px; }
.train-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 36px 22px;
  text-align: center;
  box-shadow: var(--shadow);
  min-height: 230px;
  display: flex; flex-direction: column; justify-content: center;
  animation: fadeIn .25s ease both;
}
.train-word { font-family: var(--jp-font); font-size: 46px; font-weight: 700; }
.train-reading { font-family: var(--jp-font); font-size: 22px; color: var(--accent); margin-top: 10px; }
.train-mean { font-size: 17px; margin-top: 14px; color: var(--ink); line-height: 1.5; }
.train-speak { margin: 16px auto 0; }
.train-actions { display: flex; gap: 10px; margin-top: 20px; }
.train-actions .btn { flex: 1; padding: 13px 0; font-size: 14px; }
.btn-again { background: #f43f5e; color: #fff; }
.btn-good { background: var(--gold); color: #fff; }
.btn-easy { background: #10b981; color: #fff; }
.train-reveal-btn {
  margin-top: 22px; align-self: center;
  background: var(--accent); color: #fff; border: none;
  padding: 12px 28px; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer;
}
.train-done { text-align: center; padding: 50px 16px; }
.train-done .big { font-size: 40px; margin-bottom: 10px; }

/* переходы между экранами */
.view { animation: viewIn .25s ease both; }
@keyframes viewIn { from { opacity: 0; } to { opacity: 1; } }

/* ============ Обложка-заглушка (новости без фото) ============ */
.news-card-media.placeholder { display: grid; place-items: center; }
.ph-kanji {
  font-family: var(--jp-font);
  font-size: 66px;
  font-weight: 700;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .28);
  letter-spacing: 2px;
  user-select: none;
}

/* ============ Переключатель режимов чтения ============ */
.mode-toggle { display: flex; justify-content: center; margin: 2px 0 18px; }
.mode-toggle .seg { font-size: 14px; }
.mode-toggle .seg-btn { padding: 8px 18px; }

/* Кнопка «Разобрать всю статью» под переключателем режимов */
.explain-all-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: -8px 0 18px;
}
.explain-all-bar .explain-btn { margin-top: 0; }
.explain-all-bar .explain-btn:disabled { pointer-events: none; opacity: .85; }
.explain-all-status { font-size: 12.5px; color: var(--ink-soft); }

/* Заметка «вы без интернета» */
.offline-note {
  font-size: 12.5px;
  color: var(--ink-soft);
  background: var(--paper-2);
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  margin: 0 0 10px;
}

/* Режим «Чтение» — сплошной текст */
.read-toolbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.read-flow {
  font-family: var(--jp-font);
  font-size: 22px;
  line-height: 2.35;
}
.mode-read .article-title { font-size: 24px; margin-bottom: 16px; }
.mode-read .reader-hint { margin-top: 22px; }

/* ============ Полировка: отклик, фокус, акценты ============ */

/* Выделение текста — в цвет темы */
::selection { background: rgba(124,140,248,.28); color: var(--ink); }

/* Единый мягкий «нажим» для кликабельных элементов */
.icon-btn:active, .cat-pill:active,
.pill-toggle:active, .seg-btn:active, .btn:active,
.explain-btn:active, .speak-btn:active, .srs-train-btn:active,
.bookmark-btn:active, .news-card:active {
  transform: scale(.96);
}
.news-card:active { transform: scale(.99); }
.icon-btn, .cat-pill, .pill-toggle,
.seg-btn, .btn, .explain-btn, .speak-btn, .srs-train-btn, .bookmark-btn {
  transition: background .15s, color .15s, border-color .15s, transform .1s, box-shadow .15s;
}

/* Кнопки в шапке — заметнее наведение */
.icon-btn:hover { transform: translateY(-1px); }
.icon-btn.active { background: rgba(255,255,255,.28); }

/* Фокус-кольцо у поиска — мягкое сияние вместо простой рамки */
.search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Активная категория/сегмент — фирменный барвинок */
.cat-pill.active {
  background: linear-gradient(120deg, var(--accent), var(--accent-deep));
  color: #fff; border-color: transparent;
  box-shadow: 0 3px 10px rgba(79, 70, 229, .35);
}
.seg-btn.active { background: linear-gradient(120deg, var(--accent), var(--accent-deep)); color: #fff; }
.pill-toggle.on {
  background: linear-gradient(120deg, var(--accent), var(--accent-deep));
  color: #fff; border-color: transparent;
}

/* Заголовок статьи — акцентная черта слева, «оживляет» страницу чтения */
.article-title {
  border-left: 4px solid var(--accent);
  padding-left: 14px;
}
.mode-read .article-title { padding-left: 12px; }

/* Раздел «Мои слова» — акцентный заголовок */
.section-h {
  border-left: 4px solid var(--accent);
  padding-left: 12px;
  font-weight: 700;
}

/* Предложение при наведении — мягкая подсветка фона */
.sentence-block:hover { border-color: var(--accent); background: rgba(124,140,248,.09); border-radius: 0 10px 10px 0; }
[data-theme="light"] .sentence-block:hover { background: var(--accent-soft); }

/* Плавное появление обложек */
.news-card-img, .article-hero { transition: opacity .3s; }

/* ============ Панель над статьёй: назад + фуригана (задачи 5, 7) ============ */
.reader-top {
  display: flex;
  align-items: center;
  /* «К списку» слева, переключатель чтения справа — на одной строке. */
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.reader-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--paper-2); border: 1px solid var(--line); color: var(--ink);
  padding: 7px 14px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.reader-back:hover { border-color: var(--accent); color: var(--accent); }

/* «К списку» и переключатель чтения — фиксированная высота и вертикальное
   центрирование в одну линию (у них разный внутренний паддинг/шрифт). Переключатель
   делаем чуть НИЖЕ кнопки: сплошная заливка активного сегмента делает его визуально
   тяжелее, и при равной высоте он казался крупнее. Скоуп reader-top — сегменты
   фильтров в списке не трогаем. */
.reader-top .reader-back,
.reader-top .reading-seg {
  box-sizing: border-box;
}
.reader-top .reader-back { height: 34px; padding-top: 0; padding-bottom: 0; }
.reader-top .reading-seg { height: 32px; align-items: stretch; }
.reader-top .reading-seg .seg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;   /* надписи по центру каждого сегмента */
  line-height: 1;
  padding-top: 0;
  padding-bottom: 0;
}
.reader-furigana {
  background: var(--paper-2); border: 1px solid var(--line); color: var(--ink-soft);
  padding: 6px 11px; border-radius: 999px;
  font-family: var(--jp-font); font-size: 14px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 3px;
}
.reader-furigana sub { font-size: 8px; opacity: .8; }
.reader-furigana.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Сегментированный переключатель чтения: кана / A / выкл (аккуратнее одинокой «あ»). */
.reading-seg { flex: 0 0 auto; }
.reading-seg .seg-btn {
  min-width: 38px;
  padding: 6px 10px;
  font-family: var(--jp-font);
  font-size: 15px;
  line-height: 1;
}

/* ============ Вкладки чтения: Разбор / Перевод (задача 6) ============ */
.reader-tabs { display: flex; justify-content: center; margin: 2px 0 18px; }
.reader-tabs .seg { font-size: 14px; }
.reader-tabs .seg-btn { padding: 8px 24px; }

/* Полный перевод статьи */
.translation-body { font-size: 17px; line-height: 1.75; }
.translation-body .tr-p { margin: 0 0 14px; }
.translation-body .tr-p:last-child { margin-bottom: 0; }
.translation-body .exp-loading { padding: 30px 0; }

/* ============ Полоска JLPT на карточке списка (задача 9) ============ */
/* Полоску сложности прижимаем к низу карточки (в ряду карточки одной высоты —
   полоски выравниваются по нижнему краю). Минимальный отступ сверху сохраняем. */
.news-card .jlpt.jlpt-card { margin-top: auto; padding-top: 10px; }
.news-card .jlpt-card .jlpt-bar { height: 6px; }

/* Маячок ленивой подгрузки (растягиваем на всю ширину grid-сетки) */
.list-sentinel { height: 1px; grid-column: 1 / -1; }

/* Приписка «также сохранено в Animei» под кнопкой сохранения слова */
.ws-animei-note {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted, #8b8fa3);
}