/* =========================================================
 * AI-Map · shared styles
 * =======================================================*/

/* FOUC prevention: in EN mode the default HTML text is Chinese (the canonical
 * baseline) and i18n.js swaps it to English on load. A head-inline script adds
 * .lang-en before paint; we then hide every data-i18n-marked node until
 * i18n.js stamps html.i18n-ready. visibility (not display) keeps layout so the
 * page doesn't reflow when translations land. CN mode skips this entirely. */
html.lang-en:not(.i18n-ready) [data-i18n],
html.lang-en:not(.i18n-ready) [data-i18n-html] { visibility: hidden; }

:root {
  --bg: #f7f8fb;
  --bg-2: #ffffff;
  --bg-3: #eef1f6;
  --border: #e2e6ee;
  --border-2: #c8cedd;
  --text: #1a2230;
  --text-dim: #556173;
  --text-faint: #8993a6;
  --accent: #2563eb;
  --accent-2: #ea580c;
  --ok: #059669;
  --warn: #b45309;
  --err: #dc2626;

  color-scheme: light;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 2px 6px rgba(16, 24, 40, 0.06), 0 8px 24px rgba(16, 24, 40, 0.06);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Noto Sans CJK SC",
          "Microsoft Yahei", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, "JetBrains Mono", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

button {
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--border-2);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  box-shadow: var(--shadow-sm);
}
button:hover { background: var(--bg-3); border-color: var(--accent); color: var(--accent); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

input, select, textarea {
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
}

/* ---------- layout ---------- */

.app {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px 60px;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.topbar h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.topbar h1 .dim { color: var(--text-dim); font-weight: 400; }
.topbar .brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
}
.topbar .brand:hover { text-decoration: none; }
.topbar .brand-logo {
  width: 32px;
  height: 32px;
  display: block;
  border-radius: 7px;
}
.topbar nav { display: flex; gap: 16px; margin-left: auto; align-items: center; }
.topbar nav a {
  padding: 6px 10px; border-radius: var(--radius-sm);
  color: var(--text-dim);
}
.topbar nav a.active, .topbar nav a:hover {
  color: var(--accent);
  background: var(--bg-3);
  text-decoration: none;
}

/* ---------- lang toggle (EN / 中) ----------
 * Solid accent pill so it stands out next to the dim nav links and
 * sits visually parallel to the login button. The label always shows
 * the OTHER language (EN in CN mode, 中 in EN mode) — i.e. the action,
 * not the current state — so users see "what will happen if I click". */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.28);
  margin-right: 6px;
  transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}
.lang-toggle::before {
  content: "🌐";
  font-size: 13px;
  filter: grayscale(100%) brightness(2.5);   /* tint the emoji white-ish to fit the solid pill */
}
.lang-toggle:hover {
  background: #1e40af;
  border-color: #1e40af;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.4);
  transform: translateY(-1px);
}
.lang-toggle:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.3);
}

/* ---------- auth widget (nav) ----------
 * min-width holds layout space while auth.js fetches /api/auth/me on first
 * visit (no cache yet) — without it the nav would visibly widen ~100 ms after
 * paint. Sized to cover the "Sign in" pill; signed-in widget is wider but the
 * cache fast-path renders it before paint so there's no visible reflow there. */
.auth-widget { display: inline-flex; align-items: center; margin-left: 4px; position: relative; min-width: 72px; min-height: 30px; }
.auth-widget .auth-login {
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: var(--text);
  color: #fff !important;
  font-weight: 500;
}
.auth-widget .auth-login:hover { background: var(--accent); text-decoration: none; }
.auth-widget .auth-menu { position: relative; }
.auth-widget .auth-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 4px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: 13px;
  box-shadow: none;
}
.auth-widget .auth-btn:hover { background: var(--bg-3); border-color: var(--border-2); color: var(--text); }
.auth-widget .auth-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-3); object-fit: cover;
}
.auth-widget .auth-avatar-fallback { font-size: 14px; }
.auth-widget .auth-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-widget .auth-caret { color: var(--text-faint); font-size: 10px; }
.auth-widget .auth-drop {
  display: none;
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  min-width: 160px;
  padding: 4px 0;
  z-index: 40;
}
.auth-widget .auth-menu.open .auth-drop { display: block; }
.auth-widget .auth-drop a {
  display: block;
  padding: 8px 14px;
  color: var(--text);
  font-size: 13px;
}
.auth-widget .auth-drop a:hover { background: var(--bg-3); text-decoration: none; color: var(--accent); }
.auth-widget .auth-drop .auth-logout { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; color: var(--text-dim); }

/* ---------- today page ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(circle at 90% -20%, rgba(37, 99, 235, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 10% 120%, rgba(234, 88, 12, 0.10) 0%, transparent 50%),
    linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
/* Subtle dotted grid behind the hero text — nods to a "radar" aesthetic. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(37, 99, 235, 0.12) 1px, transparent 1.5px);
  background-size: 18px 18px;
  opacity: 0.35;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at right center, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse at right center, #000 0%, transparent 75%);
}
.hero > * { position: relative; z-index: 1; }
.hero-meta {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px;
  font-size: 12.5px; color: var(--text-faint);
}
.hero-date { font-weight: 600; font-size: 13.5px; color: var(--text); letter-spacing: -0.01em; }
.hero-gen { }
.hero-body p {
  margin: 8px 0; font-size: 14.5px; line-height: 1.75; color: var(--text);
}
.hero-body p:first-child { margin-top: 0; }
.hero-body p:last-child { margin-bottom: 0; }
.hero-body .err { color: var(--err); }

.top-items { display: flex; flex-direction: column; gap: 4px; }
.top-item {
  display: grid;
  /* Source column widened from 80px to 110px so "One Useful Thing" /
     "Interconnects" / "The Sequence" fit without overflow; anything still
     too long gets ellipsized via .top-src.
     Category column: minmax(56px, max-content) so CN labels (e.g. "🏆 榜单")
     don't get a stretched chip while EN labels (e.g. "🏆 Leaderboard",
     "💬 Discussion", "✍️ Commentary") still fit inside the shaded chip. */
  grid-template-columns: 28px minmax(56px, max-content) 1fr 110px;
  column-gap: 8px;
  row-gap: 2px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: inherit;
  border: 1px solid transparent;
}
.top-item:hover {
  background: var(--bg-2);
  border-color: var(--border);
  text-decoration: none;
}
.top-rank { font-family: var(--mono); color: var(--text-faint); font-size: 12px; }
.top-cat {
  font-size: 12px;
  color: var(--text-dim);
  background: var(--bg-3);
  border-radius: 4px;
  padding: 2px 6px;
  text-align: center;
  white-space: nowrap;
}
.top-body { min-width: 0; }
.top-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-line { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.top-src {
  font-size: 11.5px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;        /* grid item needs this for ellipsis to kick in */
}

/* feed rows (blogs, repos, hn) */
.feed-list { display: flex; flex-direction: column; gap: 2px; }
.feed-row {
  display: grid;
  grid-template-columns: 130px 1fr 180px;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  color: inherit;
  border-radius: var(--radius-sm);
}
.feed-row:hover { background: var(--bg-2); text-decoration: none; }
.feed-src {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feed-src.mono { font-family: var(--mono); font-size: 11.5px; color: var(--text); }
.feed-title {
  color: var(--text);
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feed-time, .feed-meta {
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
  color: var(--text-faint);
}
.feed-gain { color: var(--ok); font-weight: 600; margin-left: 4px; }

/* Rank number used in place of a uniform avatar on single-platform feed
   panels (HN / Reddit / HF Daily Papers / GitHub Releases / YouTube).
   The row gets `.ranked` so column 1 collapses from 22px → auto, hugging
   the rank text instead of leaving an 8px gutter on its left. */
.feed-rank {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-faint);
  line-height: 22px;
  letter-spacing: 0.02em;
  user-select: none;
  white-space: nowrap;
}
.feed-row.ranked              { grid-template-columns: auto 1fr 120px; column-gap: 10px; }
.dual-grid .feed-row.ranked   { grid-template-columns: auto 1fr; }

/* Source-tag variant for the blogs panel (lab/writer/news). Fixed-width
   first column so every title starts at the same horizontal position; the
   tag itself inside that column is a kind-coloured pill that truncates if
   the source name is too long (hover for the full name). */
.feed-row.tagged              { grid-template-columns: 130px 1fr auto; column-gap: 10px; }
.dual-grid .feed-row.tagged   { grid-template-columns: 130px 1fr; }
.feed-src-tag {
  display: inline-block;
  max-width: 100%;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 3px;
  border-left: 3px solid var(--text-faint);
  background: var(--bg-2);
  color: var(--text-dim);
  white-space: nowrap;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  box-sizing: border-box;
}
.feed-src-tag.k-lab    { border-left-color: #16a34a; background: #f0fdf4; color: #166534; }
.feed-src-tag.k-writer { border-left-color: #d97706; background: #fffbeb; color: #92400e; }
.feed-src-tag.k-news   { border-left-color: #dc2626; background: #fef2f2; color: #991b1b; }

/* Chinese one-liner shown under the title on blog/repo/hn/community/release/
   video/paper_digest rows. Rendered via `.feed-row.has-cn` which adds a
   second grid row spanning all columns. */
.feed-row.has-cn {
  grid-template-rows: auto auto;
  row-gap: 2px;
}
.feed-cn {
  grid-column: 2 / -1;
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.45;
  padding-top: 1px;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* HF trending row: when the desc cell is actually the CN one-liner, color it
   like `.feed-cn` instead of faint English. */
.hf-desc-cn { color: var(--text-dim) !important; }

/* Story rows — cross-source event clusters. Three-column grid:
   - story-count: source badge on left (small round block)
   - story-body: title + kind chips (wraps naturally, no nowrap truncation)
   - story-score: impact score on right */
#stories { gap: 4px; }
.story-row {
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  gap: 14px;
  align-items: center;
  padding: 10px 12px;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}
.story-row:hover {
  background: var(--bg-2);
  border-color: var(--border);
  text-decoration: none;
}
.story-count {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  padding: 8px 0;
}
.story-count span {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-faint);
  margin-top: 2px;
}
.story-body { min-width: 0; }
.story-title {
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 4px;
  /* Clamp to 2 lines — cross-source titles can be long */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.story-chips {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.story-kind-chip {
  display: inline-block;
  padding: 1px 7px;
  font-size: 11px;
  background: var(--bg-2);
  color: var(--text-dim);
  border-radius: 10px;
  white-space: nowrap;
}
.story-score {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-faint);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Difficulty chip */
.diff-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 1px 7px;
  margin-left: 6px;
  border-radius: 10px;
  vertical-align: middle;
  white-space: nowrap;    /* keep "进阶"/"硬核" on one line in narrow columns */
  flex-shrink: 0;         /* don't let flex parent squish us sub-character */
}
.diff-e { background: #dcfce7; color: #166534; }   /* 通俗 */
.diff-m { background: #dbeafe; color: #1e40af; }   /* 进阶 */
.diff-h { background: #fee2e2; color: #991b1b; }   /* 硬核 */

/* Chinese one-liner under the title. When placed inside a .paper-row (which
   is a 4-col grid: date | star | title | auto), span from col 3 to end so
   it doesn't get squashed into the narrow auto column. */
.cn-summary {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.55;
  margin-top: 2px;
}
.paper-row .cn-summary {
  grid-column: 3 / -1;
  padding: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .top-item { grid-template-columns: 24px minmax(48px, max-content) 1fr; }
  .top-item .top-src { display: none; }
  .feed-row { grid-template-columns: 100px 1fr; }
  .feed-row .feed-time, .feed-row .feed-meta { display: none; }
}

/* ---------- Sparkline under each stat ---------- */
.spark-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.spark-svg { display: block; flex-shrink: 0; }

/* ---------- Top-10 window tabs (今日 / 两日 / 本周) ---------- */
.window-tabs { display: inline-flex; gap: 2px; }
.window-tabs .win-tab {
  font-size: 12.5px;
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.window-tabs .win-tab:hover { background: var(--bg-3); color: var(--text); }
.window-tabs .win-tab.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ---------- HF trending list ---------- */
.hf-trending-list { display: flex; flex-direction: column; gap: 2px; }
.hf-row {
  display: grid;
  /* Tighter: avatar hugs the kind chip; kind chip hugs the repo name. */
  grid-template-columns: 22px 56px minmax(110px, 180px) 1fr auto;
  column-gap: 6px;
  align-items: center;
  padding: 8px 12px;
  color: inherit;
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.hf-row:hover { background: var(--bg-2); text-decoration: none; }
.hf-kind {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  text-align: center;
  white-space: nowrap;
  color: #222;
}
.hf-kind[data-k="model"]   { background: #fde68a; color: #78350f; }
.hf-kind[data-k="dataset"] { background: #dbeafe; color: #1e40af; }
.hf-kind[data-k="space"]   { background: #fce7f3; color: #9d174d; }
.hf-name { color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hf-desc { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hf-meta { font-size: 12px; color: var(--text-faint); white-space: nowrap; text-align: right; }
.hf-tags { grid-column: 3 / -1; font-size: 11px; display: flex; flex-wrap: wrap; gap: 4px; }
.hf-tag  { background: var(--bg-3); border-radius: 8px; padding: 1px 7px; }
@media (max-width: 900px) {
  .hf-row { grid-template-columns: 22px 60px 1fr auto; }
  .hf-row .hf-desc { display: none; }
}

/* ---------- Source avatar (blogs / github / HN feed rows) ---------- */
.src-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  overflow: hidden;
  object-fit: cover;
}
/* Feed rows reclaim the source-avatar column from the old 110px text src.
   Column gap is tight (was 8px → felt like an indent between avatar & title);
   row gap stays small so the CN one-liner hugs the title. */
.feed-row { grid-template-columns: 22px 1fr 120px; column-gap: 6px; row-gap: 3px; }
.dual-grid .feed-row { grid-template-columns: 22px 1fr; }

/* ---------- Leaderboard score bar ---------- */
.lb-bar-bg {
  height: 4px;
  background: var(--bg-3);
  border-radius: 2px;
  margin: 4px 0 2px;
  overflow: hidden;
}
.lb-bar {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* ---------- Breakout ratio bar (under title) ---------- */
.br-bar-bg {
  height: 3px;
  background: var(--bg-3);
  border-radius: 2px;
  margin: 4px 0 2px;
  overflow: hidden;
}
.br-bar {
  height: 100%;
  background: linear-gradient(90deg, #ea580c 0%, #fbbf24 100%);
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* ---------- Domain delta row + bar ---------- */
.delta-row {
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name meta"
    "bar  bar";
  gap: 2px 8px;
}
.delta-row .delta-name { grid-area: name; }
.delta-row .delta-meta { grid-area: meta; }
.delta-row .delta-bar-bg { grid-area: bar; }
.delta-bar-bg {
  display: block;
  height: 3px;
  background: var(--bg-3);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 2px;
}
.delta-bar {
  display: block;
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* ---------- Two-column layout for paired feed sections ---------- */
.dual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.dual-grid > .section { margin-top: 0; }
/* Each "原始动态" pair locks to a fixed visible height — the inner list
   scrolls when there are more rows than fit, and short panels still hold
   their pair to the same shell height. Without this, a panel with 3 items
   was ~150px while its neighbour with 10 items was ~520px → the page felt
   lumpy. Mobile collapses to single column and we drop the cap so nested
   scroll doesn't fight the page scroll. */
@media (min-width: 901px) {
  .dual-grid > .section { min-height: 520px; }
  .dual-grid .feed-list,
  .dual-grid .paper-list {
    max-height: 440px;
    overflow-y: auto;
    /* Thin, subtle scrollbar so it isn't visually loud. */
    scrollbar-width: thin;
    scrollbar-color: var(--border-2) transparent;
  }
  .dual-grid .feed-list::-webkit-scrollbar,
  .dual-grid .paper-list::-webkit-scrollbar { width: 6px; }
  .dual-grid .feed-list::-webkit-scrollbar-thumb,
  .dual-grid .paper-list::-webkit-scrollbar-thumb {
    background: var(--border-2); border-radius: 3px;
  }
  .dual-grid .feed-list::-webkit-scrollbar-track,
  .dual-grid .paper-list::-webkit-scrollbar-track { background: transparent; }
}
/* In narrow columns, drop the right-side meta so rows stay one-line. */
.dual-grid .feed-row { grid-template-columns: 110px 1fr; }
.dual-grid .feed-row .feed-time,
.dual-grid .feed-row .feed-meta { display: none; }
.dual-grid .paper-row { grid-template-columns: 44px 22px 1fr auto; gap: 8px; }
.dual-grid .paper-row .authors { display: none; }   /* too much noise in a narrow col */
/* Force single-line title in narrow columns so citation badge + diff chip
   don't spill to a second row. Title truncates with ellipsis instead. */
.dual-grid .paper-row .title-wrap { flex-wrap: nowrap; }
.dual-grid .paper-row .title-wrap .title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 900px) {
  .dual-grid { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Phase 2 section dividers ---------- */
.phase2-header {
  margin: 28px 0 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}

/* ---------- Weekly Picks ---------- */
.weekly-list { display: flex; flex-direction: column; gap: 14px; }
.weekly-card {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.weekly-card .weekly-num {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.2;
}
.weekly-title-row {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-bottom: 2px;
}
.weekly-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.weekly-origin {
  font-size: 11.5px; line-height: 1.3;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.weekly-facets {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}
.weekly-facets dt {
  color: var(--text-dim);
  font-weight: 500;
  white-space: nowrap;
}
.weekly-facets dd {
  margin: 0;
  color: var(--text);
}

/* ---------- Breakout Papers ---------- */
.breakout-list { display: flex; flex-direction: column; gap: 2px; }
.breakout-row {
  display: grid;
  grid-template-columns: 32px 60px 1fr 120px;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: inherit;
}
.breakout-row:hover { background: var(--bg-2); text-decoration: none; }
.br-rank { font-family: var(--mono); font-size: 12px; color: var(--text-faint); }
.br-ratio {
  font-weight: 700;
  font-size: 14px;
  color: #ea580c;
  font-family: var(--mono);
  text-align: center;
}
.br-body { min-width: 0; }
.br-title {
  font-size: 13.5px; color: var(--text); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.br-cn { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.br-meta { font-size: 11.5px; text-align: right; white-space: nowrap; }

/* ---------- Leaderboard ---------- */
.leaderboard-list { display: flex; flex-direction: column; }
.lb-row {
  display: grid;
  grid-template-columns: 32px 1fr 70px;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px dashed var(--border);
  color: inherit;
  border-radius: var(--radius-sm);
}
.lb-row:hover {
  background: var(--bg-2);
  text-decoration: none;
}
.lb-row:hover .lb-name { color: var(--accent); }
.lb-row:last-child { border-bottom: none; }
.lb-rank { font-family: var(--mono); font-size: 12px; color: var(--text-faint); }
.lb-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lb-name { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-score { font-family: var(--mono); font-weight: 600; color: var(--accent); text-align: right; }
.lb-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.lb-tag {
  padding: 1px 6px;
  font-size: 10.5px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-dim);
  white-space: nowrap;
}

/* ---------- Rising / Cooling grid ---------- */
.delta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.delta-col { min-width: 0; }
.delta-h {
  font-size: 12.5px; margin: 0 0 8px;
  color: var(--text-dim);
  text-transform: none;
  letter-spacing: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.delta-h-rise { color: var(--ok); }
.delta-h-fall { color: var(--err); }
.delta-h-new  { color: var(--accent); }
.delta-list { display: flex; flex-direction: column; }
.delta-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 6px 4px;
  border-bottom: 1px dashed var(--border);
  color: inherit;
  align-items: baseline;
}
.delta-row:last-child { border-bottom: none; }
.delta-row:hover { background: var(--bg-2); text-decoration: none; }
.delta-name {
  font-size: 12.5px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.delta-meta { font-size: 11.5px; color: var(--text-dim); text-align: right; white-space: nowrap; }
.delta-meta .delta { margin-left: 4px; }

/* ---------- Conferences ---------- */
.conf-list { display: flex; flex-direction: column; }
.conf-row {
  display: grid;
  grid-template-columns: 120px 44px 150px 85px 140px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px dashed var(--border);
  color: inherit;
}
.conf-dates {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.conf-row:last-child { border-bottom: none; }
.conf-row:hover { background: var(--bg-2); text-decoration: none; }
.conf-name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conf-sub { font-size: 11.5px; }
.conf-deadline { font-family: var(--mono); font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.conf-when { font-size: 12px; font-weight: 500; color: var(--text-dim); white-space: nowrap; }
.conf-when.conf-soon { color: var(--warn); }
.conf-when.conf-urgent { color: var(--err); font-weight: 700; }
.conf-place { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conf-past { opacity: 0.55; }
.conf-past:hover { opacity: 0.85; }
.conf-warn {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #92400e;
  padding: 10px 14px;
  margin-bottom: 10px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}

@media (max-width: 900px) {
  .delta-grid { grid-template-columns: 1fr; }
  .weekly-facets { grid-template-columns: 1fr; }
  .weekly-facets dt { margin-top: 6px; }
  .breakout-row { grid-template-columns: 28px 48px 1fr; }
  .breakout-row .br-meta { display: none; }
  .lb-row { grid-template-columns: 28px 1fr 60px; }
  .lb-row .lb-tags { display: none; }
  .conf-row { grid-template-columns: 1fr auto; gap: 4px 8px; }
  .conf-row .conf-sub,
  .conf-row .conf-place { display: none; }
  .conf-row .conf-deadline,
  .conf-row .conf-dates { grid-column: 1 / -1; font-size: 11.5px; }
}

/* ---------- site footer ---------- */
.site-footer {
  margin: 36px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 12px;
}
.site-footer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
  justify-content: center;
  text-align: center;
  line-height: 1.7;
}
.site-footer-row a { color: var(--text-dim); }
.site-footer-sep { opacity: 0.5; }
@media (max-width: 700px) {
  .site-footer-sep { display: none; }
  .site-footer-row { flex-direction: column; }
}

/* ---------- my page empty state ---------- */
.my-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-dim);
  background: var(--bg-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.my-empty p { margin: 8px 0; }
.my-empty .btn-primary {
  display: inline-block;
  background: var(--text);
  color: #fff !important;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  font-weight: 500;
}
.my-empty .btn-primary:hover { background: var(--accent); text-decoration: none; }

h2 { font-size: 16px; margin: 24px 0 12px; font-weight: 600; letter-spacing: -0.01em; }
h3 { font-size: 14px; margin: 16px 0 8px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

.section {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 18px 0;
  box-shadow: var(--shadow-sm);
}
.section-title-row {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px;
}
.section-title-row h2 { margin: 0; }
.section-title-row .small { color: var(--text-faint); font-size: 12px; }

.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.stat {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.stat .v { font-size: 28px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.stat .k { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }

.heatmap-wrap { height: 520px; width: 100%; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  box-shadow: var(--shadow-sm);
}
.card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.card a.title {
  display: block;
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 4px;
}
.card .meta { color: var(--text-dim); font-size: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.card .cn { color: var(--text); font-size: 13px; line-height: 1.55; margin: 6px 0 0; max-height: 4.6em; overflow: hidden; }

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-3);
  color: var(--text-dim);
  font-size: 11px;
  border: 1px solid var(--border);
}
.tag.featured { background: #e0edff; color: #1d4ed8; border-color: #bfdbfe; }
.tag.ok { color: #065f46; border-color: #a7f3d0; background: #d1fae5; }
.tag.warn { color: #92400e; border-color: #fde68a; background: #fef3c7; }
.tag.err { color: #991b1b; border-color: #fecaca; background: #fee2e2; }

.paper-list { display: flex; flex-direction: column; gap: 6px; }
.paper-row {
  display: grid;
  /* Date is MM-DD (5 chars mono ≈ 40px) — keep 52px for breathing room. */
  grid-template-columns: 52px 28px 1fr auto;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  align-items: baseline;
}
.paper-row:hover { background: var(--bg-3); border-color: var(--border-2); }
.paper-row .date { color: var(--text-faint); font-size: 12px; font-family: var(--mono); }
.paper-row .star-host { grid-column: 2; text-align: center; }
.paper-row a.title { color: var(--text); font-weight: 500; }

/* Title + inline citation badge share one grid cell; baseline-aligned so
   the badge sits flush with the title text. Shared across every variant
   that has a .title-wrap (domain /d/:slug, global /papers). */
.paper-row .title-wrap {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  grid-column: 3;
}
.paper-row .title-wrap .title {
  flex: 1 1 auto;
  min-width: 0;
}
.paper-row .title-wrap .cite-badge { flex-shrink: 0; }

/* Authors line: always compact + single-line ellipsis + optional cat chip
   prefix. Old dual-row-height style is gone. */
.paper-row .authors {
  color: var(--text-dim);
  font-size: 11.5px;
  line-height: 1.35;
  grid-column: 3 / -1;
  margin-top: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.paper-row .cat-chip {
  display: inline-block;
  padding: 0 6px;
  margin-right: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--text-dim);
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  vertical-align: 1px;
}

.log-list { font-family: var(--mono); font-size: 12px; }
.log-row { padding: 6px 0; border-bottom: 1px dashed var(--border); color: var(--text-dim); }
.log-row:last-child { border-bottom: none; }
.log-row .status-ok { color: var(--ok); font-weight: 600; }
.log-row .status-partial { color: var(--warn); font-weight: 600; }
.log-row .status-error { color: var(--err); font-weight: 600; }

.muted { color: var(--text-dim); }
.faint { color: var(--text-faint); font-size: 12px; }

.loader { color: var(--text-dim); padding: 20px; text-align: center; }

.breadcrumb { color: var(--text-dim); font-size: 13px; margin-bottom: 12px; }
.breadcrumb a { color: var(--text-dim); }

.direction-list { display: flex; flex-direction: column; gap: 6px; }
.direction-item {
  border-left: 3px solid var(--border-2);
  padding: 6px 12px 6px 10px;
  background: var(--bg-3);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.direction-item.kind-explored { border-color: var(--ok); }
.direction-item.kind-active { border-color: var(--accent); }
.direction-item.kind-open { border-color: var(--accent-2); }
.direction-item .t { font-weight: 600; }
.direction-item .d { color: var(--text-dim); font-size: 13px; }

/* ---------- search ---------- */

.search-wrap {
  position: relative;
  flex: 1;
  max-width: 380px;
  margin-left: 24px;
}
.search-wrap input {
  width: 100%;
  padding: 8px 14px 8px 32px;
  font-size: 13px;
  border-radius: 999px;
  background: var(--bg-3) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23556173' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>") no-repeat 10px center;
  background-size: 14px;
  border: 1px solid transparent;
  transition: border-color .15s, background-color .15s;
}
.search-wrap input:focus {
  background-color: var(--bg-2);
  border-color: var(--accent);
  outline: none;
}
.search-panel {
  position: absolute;
  top: 100%; left: 0; right: 0;
  margin-top: 6px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  max-height: 480px;
  overflow-y: auto;
  display: none;
  z-index: 20;
}
.sr-group-hdr {
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 12px 4px;
  border-top: 1px solid var(--border);
}
.sr-group:first-child .sr-group-hdr { border-top: none; }
.sr-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 12px; color: var(--text) !important;
  text-decoration: none !important;
  border-top: 1px solid transparent;
}
.sr-item:hover { background: var(--bg-3); }
.sr-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.sr-meta { font-size: 11px; color: var(--text-dim); flex-shrink: 0; font-family: var(--mono); }
.sr-empty { padding: 14px; color: var(--text-dim); text-align: center; font-size: 13px; }
.sr-more {
  display: block;
  padding: 6px 12px 10px;
  color: var(--accent) !important;
  font-size: 12px;
  text-decoration: none !important;
  text-align: right;
  border-top: 1px dashed var(--border);
  margin-top: 4px;
}
.sr-more:hover { background: var(--bg-3); }

/* ---------- trending (this week) ---------- */

.trending-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.trending-row {
  display: grid;
  grid-template-columns: 28px 1fr auto 60px;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  transition: all .15s;
  text-decoration: none !important;
  color: inherit !important;
}
.trending-row:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.trending-row .rank { color: var(--text-faint); font-family: var(--mono); font-size: 12px; text-align: right; }
.trending-row .name { color: var(--text); font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trending-row .delta { font-size: 12px; font-family: var(--mono); font-weight: 600; }
.trending-row .delta.up { color: var(--ok); }
.trending-row .delta.down { color: var(--err); }
.trending-row .delta.new { color: var(--accent); }
.trending-row .spark { height: 18px; }

/* ---------- landscape (home page) ---------- */

.ls-insight {
  padding: 12px 14px;
  background: linear-gradient(135deg, #fefcea 0%, #ffffff 60%);
  border: 1px solid #f3e9bf;
  border-radius: var(--radius);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text);
  margin: 0 0 14px;
}
.ls-insight:empty { display: none; }

.landscape-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.ls-col { display: flex; flex-direction: column; min-width: 0; }
.ls-h {
  font-size: 13px;
  margin: 0 0 10px;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-block;
  align-self: flex-start;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}
.ls-h-top    { background: #fff1e6; color: #b45309; border: 1px solid #fcd9b7; }
.ls-h-rising { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.ls-h-gap    { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }

.ls-list { display: flex; flex-direction: column; gap: 6px; }
.ls-row {
  display: grid;
  grid-template-columns: 22px 1fr auto 60px;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  text-decoration: none !important;
  color: inherit !important;
  transition: all .15s;
}
.ls-row:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.ls-row .rank { color: var(--text-faint); font-family: var(--mono); font-size: 11px; text-align: right; }
.ls-row .name { font-size: 13px; font-weight: 500; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-row .metric { font-family: var(--mono); font-size: 12px; color: var(--text-dim); display: flex; align-items: baseline; gap: 4px; }
.ls-row .metric b { color: var(--text); font-weight: 600; font-size: 13px; }
.ls-row .delta { font-family: var(--mono); font-size: 11px; font-weight: 600; }
.ls-row .delta.up   { color: var(--ok); }
.ls-row .delta.down { color: var(--err); }
.ls-row .delta.new  { color: var(--accent); }
.ls-row .spark { height: 18px; }
.ls-empty { padding: 18px 12px; color: var(--text-dim); font-size: 13px; text-align: center; background: var(--bg-3); border-radius: var(--radius-sm); }

.section-title-row button {
  font-size: 12px;
  padding: 3px 10px;
  color: var(--text-dim);
}
.section-title-row button.active {
  color: var(--accent);
  border-color: var(--accent);
  background: #e0edff;
}
.heatmap-controls input[type="date"] {
  padding: 3px 6px;
  font-size: 12px;
}
.hm-presets button { font-size: 11px; padding: 3px 8px; }

/* ---------- all-domain compact grid ---------- */

.all-domain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 4px 16px;
}
.all-dom {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  text-decoration: none !important;
  color: var(--text) !important;
  border: 1px solid transparent;
  font-size: 13px;
}
.all-dom:hover { background: var(--bg-3); border-color: var(--border); }
.all-dom .n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.all-dom .c { font-family: var(--mono); color: var(--text-faint); font-size: 11px; }
.all-dom.featured .n { font-weight: 600; }
.all-dom.featured::before { content: "★"; color: #eab308; font-size: 11px; }
.all-dom.zero .c { color: var(--text-faint); opacity: 0.5; }

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

/* ---------- domain detail: body (cn + en stacked in one card) ---------- */

.domain-body { padding: 16px 20px; }
.domain-body-cn p {
  margin: 0; font-size: 15px; line-height: 1.85; color: var(--text);
}
.domain-body-en p {
  margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--text-dim);
}
.domain-body-en {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.domain-body-cn:empty + .domain-body-en { border-top: none; margin-top: 0; padding-top: 0; }
.domain-body-en:empty { display: none; }

/* ---------- domain detail: landscape report ---------- */

.landscape-body { padding: 4px 4px 0; }
.landscape-md {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--text);
}
.landscape-md h2 {
  font-size: 17px; font-weight: 700; margin: 22px 0 10px;
  color: var(--text); border-bottom: 1px solid var(--border); padding-bottom: 6px;
}
.landscape-md h2:first-child { margin-top: 6px; }
.landscape-md h3 {
  font-size: 15px; font-weight: 600; margin: 16px 0 6px;
  color: var(--accent); text-transform: none; letter-spacing: 0;
}
/* Sonnet writes "主要分支" etc. as **bold-only lines** — renderMarkdown
   promotes those to <h4>. Style them as an editorial numbered list:
   monospace 01/02 counter, aligned description underneath. */
.landscape-md { counter-reset: branch; }
.landscape-md h2 { counter-reset: branch; }
.landscape-md h4 {
  counter-increment: branch;
  margin: 18px 0 4px;
  font-size: 14.5px; font-weight: 600;
  color: var(--text);
}
.landscape-md h4::before {
  content: counter(branch, decimal-leading-zero);
  display: inline-block;
  min-width: 26px;
  margin-right: 10px;
  font-family: var(--mono);
  font-size: 11.5px; font-weight: 500;
  color: var(--text-faint);
  letter-spacing: 0.08em;
  vertical-align: 1px;
}
.landscape-md h4 + p {
  margin: 2px 0 0;
  padding-left: 36px;   /* align under the title text, skipping the counter */
  color: var(--text-dim);
}
.landscape-md p { margin: 8px 0; }
.landscape-md strong { color: var(--text); font-weight: 600; }
.landscape-md em { color: var(--text-dim); font-style: italic; }
.landscape-md code {
  background: var(--bg-3); padding: 1px 5px; border-radius: 4px;
  font-family: var(--mono); font-size: 12.5px; color: var(--text);
}
.landscape-md ul { padding-left: 22px; margin: 8px 0; }
.landscape-md li { margin: 4px 0; line-height: 1.7; }

/* ---------- domain detail: timeline ---------- */

.timeline-body { padding: 6px 0 0; }
.timeline-list {
  position: relative;
  padding-left: 18px;
}
.timeline-list::before {
  content: "";
  position: absolute;
  /* Align center (left + width/2) with .tl-dot center: dot is at
     list-padding(18) + item-left(-14) + dot-width/2(6) = 10px. */
  top: 6px; bottom: 6px; left: 9px;
  width: 2px;
  background: linear-gradient(180deg, #bfdbfe, #e5e7eb);
  border-radius: 2px;
}
.tl-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 14px;
  padding: 8px 0 8px 18px;
  position: relative;
}
.tl-dot {
  position: absolute;
  top: 14px; left: -14px;
  width: 12px; height: 12px;
  background: var(--accent);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--accent-2, #bfdbfe);
}
.tl-date {
  color: var(--accent); font-family: var(--mono); font-size: 13px; font-weight: 600;
  padding-top: 2px;
}
.tl-content .tl-title {
  font-weight: 600; font-size: 14px; color: var(--text); margin-bottom: 2px;
}
.tl-content .tl-desc {
  color: var(--text-dim); font-size: 13px; line-height: 1.65;
}

/* ---------- directions grid (3-column) ---------- */

.directions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}
.dir-col {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.dir-col-head {
  padding: 10px 14px;
  color: #fff;
  border-bottom: 1px solid var(--border);
}
.dir-col-head.kind-explored { background: linear-gradient(135deg, #059669, #047857); }
.dir-col-head.kind-active   { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.dir-col-head.kind-open     { background: linear-gradient(135deg, #ea580c, #c2410c); }
.dir-col-title { font-weight: 700; font-size: 14px; }
.dir-col-sub   { font-size: 11.5px; opacity: 0.88; margin-top: 2px; }

.dir-col-items { display: flex; flex-direction: column; }
.dir-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.dir-item:last-child { border-bottom: none; }
.dir-item .dir-t { font-weight: 600; font-size: 13.5px; color: var(--text); margin-bottom: 4px; }
.dir-item .dir-d { color: var(--text-dim); font-size: 12.5px; line-height: 1.65; }

/* ---------- domain detail: new feature blocks ---------- */

.digest-body { font-size: 14px; line-height: 1.85; color: var(--text); }
.digest-text { margin: 0; }

.starter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}
.starter-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all .15s;
  min-width: 0;
}
.starter-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.starter-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.starter-rank {
  flex-shrink: 0;
  min-width: 30px;
  padding: 2px 6px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #92400e;
  border-radius: 6px;
  font-family: var(--mono); font-weight: 700; font-size: 12px;
  text-align: center;
  line-height: 1.4;
}
.starter-title {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
}
.starter-header .cite-badge { flex-shrink: 0; }
.starter-meta {
  color: var(--text-faint);
  font-size: 11px;
  display: flex;
  gap: 8px;
  margin: 2px 0 4px;
  padding-left: 40px;            /* align under title, skipping rank */
  font-family: var(--mono);
}
.starter-reason {
  margin: 0;
  padding-left: 40px;            /* same indent as meta */
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.55;
}

/* Subtopic proportion strip (compact "map" bar) */
.proportion-strip {
  display: flex;
  height: 36px;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
  background: var(--bg-3);
}
.proportion-strip:empty { display: none; }
.strip-seg {
  display: flex; align-items: center; justify-content: center;
  min-width: 0;
  color: #fff !important;
  text-decoration: none !important;
  transition: filter .15s, transform .15s;
  border-right: 2px solid #ffffff;
}
.strip-seg:last-child { border-right: none; }
.strip-seg:hover { filter: brightness(1.15); }
.strip-label {
  font-size: 11px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0 8px;
  max-width: 100%;
}

/* Subtopic card grid */
.subtopic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}
.subtopic-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 0 12px 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s, transform .15s, border-color .15s;
  scroll-margin-top: 80px;    /* when link to #sub-N, don't hide behind topbar */
}
.subtopic-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: var(--border-2); }
.subtopic-card:target { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.subtopic-stripe { height: 4px; }
.subtopic-head {
  padding: 12px 14px 4px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.subtopic-name {
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis;
}
.subtopic-name-cn { color: var(--text-dim); font-size: 12px; font-weight: 500; margin-left: 6px; }
.subtopic-desc-en {
  color: var(--text-dim); font-size: 12.5px; line-height: 1.65;
  border-top: 1px dashed var(--border); padding-top: 8px !important;
  margin-top: 4px !important;
}
.subtopic-count { color: var(--text-dim); font-size: 12px; font-family: var(--mono); flex-shrink: 0; }
.subtopic-count b { color: var(--text); font-size: 13px; }
.subtopic-desc {
  margin: 4px 14px 8px;
  color: var(--text); font-size: 13px; line-height: 1.65;
}
.subtopic-papers-label {
  margin: 4px 14px 4px;
  font-size: 10px; color: var(--text-faint); text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 600;
}
.subtopic-papers { display: flex; flex-direction: column; gap: 2px; padding: 0 8px; }
.subtopic-paper {
  display: grid;
  grid-template-columns: 62px 1fr auto;   /* date (MM-DD or YY-MM-DD) | title (flex) | cite */
  gap: 8px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  color: var(--text) !important;
  text-decoration: none !important;
  font-size: 12.5px;
  align-items: center;
}
.subtopic-paper:hover { background: var(--bg-3); color: var(--accent) !important; }
.subtopic-paper .date { color: var(--text-faint); font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.subtopic-paper .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.subtopic-detail {
  margin-top: 14px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.sub-detail-head { margin-bottom: 12px; }
.sub-detail-name { font-weight: 600; font-size: 16px; color: var(--text); }
.sub-detail-meta { color: var(--text-dim); font-size: 12px; font-family: var(--mono); margin-top: 4px; }
.sub-detail-desc { margin: 10px 0 0; color: var(--text); font-size: 13.5px; line-height: 1.75; }
.sub-detail-papers-label {
  font-size: 11px; color: var(--text-faint); text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: 6px; font-weight: 600;
}
.sub-detail-papers { display: flex; flex-direction: column; gap: 4px; }
.sub-detail-paper {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 10px; padding: 6px 8px;
  color: var(--text) !important;
  text-decoration: none !important;
  border-radius: var(--radius-sm);
}
.sub-detail-paper:hover { background: var(--bg-2); }
.sub-detail-paper .date { color: var(--text-faint); font-size: 11px; font-family: var(--mono); }
.sub-detail-paper .t { color: var(--text); font-size: 13px; }

.related-split {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 20px;
}
.related-list {
  display: flex; flex-direction: column; gap: 6px;
}
.related-item {
  display: grid;
  grid-template-columns: 28px 1fr 1fr 48px;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  color: inherit !important;
  text-decoration: none !important;
  transition: all .15s;
}
.related-item:hover { border-color: var(--accent); transform: translateX(2px); }
.related-item .rank { color: var(--text-faint); font-family: var(--mono); font-size: 11px; text-align: right; }
.related-item .name { color: var(--text); font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.related-item .overlap-bar {
  position: relative;
  height: 6px;
  background: var(--bg-3);
  border-radius: 999px;
  overflow: hidden;
}
.related-item .overlap-bar .fill {
  position: absolute; top: 0; left: 0; height: 100%;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
  border-radius: 999px;
  transition: width .3s;
}
.related-item .ov {
  color: var(--text-dim); font-family: var(--mono); font-size: 11px; text-align: right;
}

/* ---------- paper row expand ---------- */

/* Domain detail variant: adds an AI 速读 button column and the expand
 * summary panel spanning all columns below. */
.paper-row.expandable {
  grid-template-columns: 52px 28px 1fr auto;
  grid-template-rows: auto auto auto;
  row-gap: 2px;
}
.paper-row.expandable .paper-summary { grid-column: 1 / -1; }

/* Global /papers variant: no button, no expand panel. Just date / star /
   title-wrap and the authors row below. */
.paper-row.with-cite {
  grid-template-columns: 52px 28px 1fr;
  row-gap: 2px;
}

/* ---------- citation badge ---------- */
.cite-badge {
  display: inline-flex; align-items: baseline; gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.4;
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-dim);
  white-space: nowrap;
  user-select: none;
}
.cite-badge .cite-n { font-weight: 700; color: var(--text); }
.cite-badge .cite-u { font-size: 9.5px; letter-spacing: .04em; color: var(--text-faint); text-transform: uppercase; }
.cite-badge.cite-zero { opacity: .55; }
.cite-badge.cite-zero .cite-n { color: var(--text-dim); font-weight: 500; }
.cite-badge.cite-low  { border-color: #dbeafe; background: #eff6ff; }
.cite-badge.cite-low  .cite-n { color: #1d4ed8; }
.cite-badge.cite-mid  { border-color: #bfdbfe; background: #dbeafe; }
.cite-badge.cite-mid  .cite-n { color: #1e40af; }
.cite-badge.cite-high { border-color: #fcd9b7; background: #fff1e6; }
.cite-badge.cite-high .cite-n { color: #b45309; }
.cite-badge.cite-hot  { border-color: #fecaca; background: #fee2e2; color: #991b1b; }
.cite-badge.cite-hot  .cite-n { color: #991b1b; }
.cite-badge.cite-hot::before { content: "🔥"; font-size: 10px; margin-right: -2px; }
.cite-badge.cite-unknown {
  min-width: 36px; justify-content: center;
  color: var(--text-faint);
  opacity: .55;
  border-style: dashed;
}
.cite-badge.cite-unknown::before { content: "—"; font-family: var(--mono); }

/* Compact sizing when badge appears inside tight card-style rows */
.ps-similar-paper .cite-badge,
.subtopic-paper .cite-badge {
  padding: 1px 6px;
  font-size: 10.5px;
}
.ps-similar-paper .cite-badge .cite-u,
.subtopic-paper .cite-badge .cite-u { display: none; }

.paper-row.skeleton { grid-template-columns: 52px 28px 1fr auto; }

.ai-read-btn {
  grid-column: 4; grid-row: 1;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px 4px 8px;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  color: var(--accent);
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  box-shadow: 0 1px 2px rgba(37,99,235,0.08);
}
.ai-read-btn:hover {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(37,99,235,0.15);
}
.ai-read-btn.open {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #92400e;
  border-color: #fcd9b7;
}
.ai-read-icon { font-size: 13px; }
.ai-read-label { font-size: 12px; letter-spacing: 0; }

.paper-summary {
  grid-column: 1 / -1;
  max-height: 0; overflow: hidden;
  transition: max-height .3s ease-out;
  padding: 0 6px;
  color: var(--text);
  font-size: 13px;
}
.paper-summary.open {
  max-height: 2200px;
  padding: 12px 14px 8px;
  margin-top: 10px;
  background: linear-gradient(180deg, #fafcff 0%, #ffffff 100%);
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-sm);
}
.paper-summary .ps-block { margin-bottom: 10px; }
.paper-summary .ps-block:last-child { margin-bottom: 0; }
.paper-summary .ps-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-faint); font-weight: 600; margin-bottom: 5px;
}
.paper-summary .ps-content p { margin: 3px 0; line-height: 1.7; }
.paper-summary .ps-content ul { margin: 3px 0; padding-left: 20px; }
.paper-summary .ps-content li { margin: 2px 0; line-height: 1.6; }
.paper-summary .ps-content strong { color: var(--accent); }
.paper-summary .ps-similar {
  border-top: 1px dashed var(--border); padding-top: 10px;
}
.paper-summary .ps-ratelimit {
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border: 1px solid #fed7aa;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  color: #9a3412;
}
.paper-summary .ps-ratelimit .ps-label { color: #9a3412; }
.paper-summary .ps-ratelimit p { margin: 0; color: #7c2d12; }
.paper-summary .ps-ratelimit b { color: #c2410c; font-family: var(--mono); }

/* ---------- domain detail: paper toolbar + numbered pager ---------- */

.papers-section { scroll-margin-top: 80px; }

.papers-toolbar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px 18px;
  padding: 10px 14px;
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
}
.papers-toolbar .tbl {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-faint);
  text-transform: none; letter-spacing: 0;
}
.papers-toolbar .tbl select {
  font-size: 13px;
  padding: 4px 22px 4px 8px;
  background-color: var(--bg-2);
}
.papers-toolbar .papers-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-dim);
  padding: 3px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.papers-pager {
  display: flex; flex-wrap: wrap;
  gap: 4px; align-items: center; justify-content: center;
  margin-top: 18px;
  padding: 10px 6px 2px;
  border-top: 1px dashed var(--border);
}
.pager-btn {
  min-width: 34px;
  padding: 5px 10px;
  font-size: 12.5px;
  font-family: var(--mono);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  box-shadow: none;
  transition: all .12s;
}
.pager-btn:hover:not(:disabled):not(.active) {
  border-color: var(--accent);
  color: var(--accent);
  background: #eff6ff;
}
.pager-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
  cursor: default;
}
.pager-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.pager-gap {
  font-family: var(--mono);
  color: var(--text-faint);
  padding: 0 4px;
  user-select: none;
}
.pager-jump {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 10px;
  font-size: 12px;
  color: var(--text-dim);
  font-family: var(--mono);
}
.pager-jump input {
  width: 68px;
  padding: 3px 6px;
  font-family: var(--mono);
  font-size: 12.5px;
  text-align: center;
}

/* skeleton rows while loading */
.paper-row.skeleton {
  grid-template-columns: 52px 28px 1fr auto;
  cursor: default;
}
.paper-row.skeleton:hover { background: transparent; border-color: transparent; }
.paper-row.skeleton .sk {
  display: block;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, #eef1f6 0%, #f7f8fb 50%, #eef1f6 100%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.2s ease-in-out infinite;
}
.paper-row.skeleton .sk-date { width: 72px; }
.paper-row.skeleton .sk-star { width: 16px; margin: 0 auto; }
.paper-row.skeleton .sk-title { width: 78%; }
.paper-row.skeleton .sk-btn { width: 72px; height: 22px; border-radius: 999px; }
@keyframes sk-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.paper-summary .ps-similar-list { display: flex; flex-direction: column; gap: 3px; }
.ps-similar-paper {
  display: grid;
  grid-template-columns: 46px 84px 1fr auto;   /* sim | date | title | cite */
  gap: 10px; align-items: center;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  color: var(--text) !important;
  text-decoration: none !important;
  font-size: 12.5px;
}
.ps-similar-paper:hover { background: var(--bg-3); color: var(--accent) !important; }
.ps-similar-paper .sim {
  font-family: var(--mono); font-size: 11px; color: var(--accent); font-weight: 600;
}
.ps-similar-paper .date { color: var(--text-faint); font-family: var(--mono); font-size: 11px; }
.ps-similar-paper .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

@media (max-width: 900px) {
  .related-split { grid-template-columns: 1fr; }
}

/* ---------- star ---------- */

.star {
  display: inline-block;
  font-size: 16px;
  color: var(--text-faint);
  user-select: none;
  padding: 0 4px;
  line-height: 1;
  transition: color .1s;
}
.star:hover { color: var(--accent-2); }
.star.on { color: #eab308; }

.paper-row { position: relative; }
.paper-row .star-host { grid-column: 4; }

/* ---------- mobile: tablets & small laptops (≤ 820px) ----------
 * Old rule only wrapped the nav to a 2nd row — it kept the full-size logo
 * and "· 今日 AI"-style subtitle, which left almost no room for the search
 * box on the brand row. Now: shrink the brand chrome, let search share the
 * row, and drop nav to its own row with proper wrapping. */
@media (max-width: 820px) {
  .heatmap-wrap { height: 420px; }
  .app { padding: 0 12px 40px; }

  .topbar {
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 14px 0 10px;
    margin-bottom: 16px;
    align-items: center;
  }
  .topbar h1 { font-size: 18px; min-width: 0; flex-shrink: 1; }
  .topbar h1 .dim { font-size: 13px; }
  .topbar .brand-logo { width: 28px; height: 28px; }

  .topbar .search-wrap {
    flex: 1 1 180px;
    max-width: 100%;
    margin-left: 8px;
  }

  .topbar nav {
    width: 100%;
    order: 3;
    margin-left: 0;
    flex-wrap: wrap;
    gap: 4px 8px;
    row-gap: 6px;
  }
  .topbar nav a { padding: 5px 9px; font-size: 13px; }

  /* Section title rows wrap their controls onto a 2nd line instead of
     overflowing — affects heatmap controls, landscape window tabs, "查看全部"
     etc. which used inline `margin-left:auto` to right-align on desktop. */
  .section-title-row { flex-wrap: wrap; row-gap: 8px; }
}

/* ---------- mobile: phones (≤ 560px) ---------- */
@media (max-width: 560px) {
  /* Drop the page-context subtitle ("· 今日 AI"). The active nav link
     conveys the same info and the px are better spent on search + nav. */
  .topbar h1 .dim { display: none; }

  /* Search drops to its own full-width row above the nav. */
  .topbar .search-wrap {
    order: 2;
    flex: 1 1 100%;
    margin-left: 0;
  }

  /* Nav becomes a horizontally-scrollable strip — wrapping 6 links + lang
     toggle + auth widget across 2–3 cramped lines looked worse than a single
     scrollable row. Negative margins bleed the strip past .app padding so
     first/last items don't hug the scroll boundary. */
  .topbar nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a { white-space: nowrap; }
  .topbar nav a,
  .topbar .lang-toggle,
  .topbar .auth-widget { flex-shrink: 0; }

  /* Tighter stats grid on phones — 160px minmax was producing a single
     awkwardly-wide card per row at 360px viewports. */
  .stats-row { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
  .stat { padding: 12px 14px; }
  .stat .v { font-size: 22px; }

  /* Section + hero padding eat less of the viewport. */
  .section { padding: 14px 12px; }
  .hero { padding: 18px 16px 16px; }

  /* Shorter heatmap so it doesn't dominate the scroll on phones. */
  .heatmap-wrap { height: 320px; }
}

/* ---------- first-visit language picker modal ---------- */
.lang-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(16, 24, 40, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: lang-modal-fade .18s ease-out;
}
.lang-modal[hidden] { display: none; }
@keyframes lang-modal-fade { from { opacity: 0; } to { opacity: 1; } }
.lang-modal-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(16, 24, 40, .28);
  padding: 36px 40px 28px;
  max-width: 460px;
  width: calc(100% - 32px);
  text-align: center;
  animation: lang-modal-pop .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes lang-modal-pop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lang-modal-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}
.lang-modal-buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-bottom: 22px;
}
.lang-modal-btn {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 14px;
  background: #f4f6fb;
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all .12s ease;
  font: inherit;
  color: var(--text);
}
.lang-modal-btn:hover {
  background: #eef2ff;
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, .15);
}
.lang-modal-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  color: var(--accent);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 1px rgba(37,99,235,.18);
}
.lang-modal-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.lang-modal-hint {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.55;
}