*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--sys-background-primary);
  color: var(--sys-text-primary);
  font-family: var(--const-typography-family-text), sans-serif;
  font-size: var(--sys-typography-size-paragraph-p3);
  line-height: var(--sys-typography-lineHeight-paragraph-p3);
  -webkit-font-smoothing: antialiased;
}

.c1 { font-size: var(--sys-typography-size-caption-c1); line-height: var(--sys-typography-lineHeight-caption-c1); }
.p4 { font-size: var(--sys-typography-size-paragraph-p4); line-height: var(--sys-typography-lineHeight-paragraph-p4); }
.muted { color: var(--sys-text-secondary); }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--sys-background-bar);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sys-background-stroke);
}
.topbar-inner {
  max-width: 1440px; margin: 0 auto;
  display: flex; align-items: center; gap: var(--const-spacing-09);
  padding: var(--const-spacing-05) var(--const-spacing-08);
}
.brand { display: flex; align-items: center; gap: var(--const-spacing-05); text-decoration: none; color: inherit; }
.brand-logo { display: flex; }
.brand-text { display: flex; flex-direction: column; }
.brand-name {
  font-family: var(--const-typography-family-wide), sans-serif;
  font-weight: 500; font-size: var(--sys-typography-size-header-h4);
  line-height: 1.1;
  background: var(--sys-ecosystemText-AI);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-sub { color: var(--sys-text-tertiary); }

.nav { display: flex; gap: var(--const-spacing-03); }
.nav-link {
  padding: var(--const-spacing-04) var(--const-spacing-06);
  border-radius: var(--const-radius-02);
  text-decoration: none; color: var(--sys-text-secondary);
  font-weight: 500;
}
.nav-link:hover { background: var(--sys-controls-hoverAlternative); color: var(--sys-text-primary); }
.nav-link.active { color: var(--sys-text-primary); background: var(--sys-controls-tertiaryActive); }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--const-spacing-04); }
.search {
  height: 40px; width: 260px;
  padding: 0 var(--const-spacing-06);
  border-radius: var(--const-radius-02);
  border: 1px solid var(--sys-background-stroke);
  background: var(--sys-background-secondary);
  color: var(--sys-text-primary);
  font-family: inherit; font-size: var(--sys-typography-size-paragraph-p4);
  outline: none;
}
.search:focus { border-color: var(--sys-accent-active); }
.icon-btn {
  height: 40px; width: 40px;
  border-radius: var(--const-radius-02);
  border: 1px solid var(--sys-background-stroke);
  background: transparent; color: var(--sys-text-primary);
  cursor: pointer; font-size: 18px;
}
.icon-btn:hover { background: var(--sys-controls-hoverAlternative); }

/* ---------- Layout ---------- */
.page { max-width: 1440px; margin: 0 auto; padding: var(--const-spacing-08); }
.view { display: flex; gap: var(--const-spacing-08); }
.view[hidden] { display: none; }

.sidebar { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: var(--const-spacing-08); }
.side-block { display: flex; flex-direction: column; gap: var(--const-spacing-05); }
.side-title { color: var(--sys-text-tertiary); letter-spacing: .06em; }

.feed-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--const-spacing-06); }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--const-spacing-04); }
.chip {
  display: inline-flex; align-items: center; gap: var(--const-spacing-03);
  height: 32px; padding: 0 var(--const-spacing-05);
  border-radius: var(--const-radius-09);
  border: 0;
  background: var(--comp-chips-background-primary);
  color: var(--sys-text-primary);
  font-family: inherit;
  font-size: var(--sys-typography-size-paragraph-p4);
  line-height: 1; cursor: pointer;
}
.chip:hover { background: var(--sys-controls-hoverPrimary); }
.chip-selected { background: var(--comp-chips-background-selected); color: var(--sys-text-inverted); }
.chip-sm { height: 26px; font-size: var(--sys-typography-size-caption-c1); padding: 0 var(--const-spacing-04); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--const-spacing-04);
  height: 44px; padding: 0 var(--const-spacing-07);
  border-radius: var(--const-radius-02);
  font-family: inherit; font-size: var(--sys-typography-size-paragraph-p3);
  font-weight: 500; cursor: pointer; border: 0;
  transition: background .15s ease;
}
.btn-sm { height: 36px; padding: 0 var(--const-spacing-06); font-size: var(--sys-typography-size-paragraph-p4); }
.btn-primary { background: var(--sys-controls-primaryActive); color: #FFFFFF; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-secondary { background: var(--comp-buttons-background-secondary); color: var(--sys-text-primary); }
.btn-secondary:hover { background: var(--comp-buttons-hover-secondary); }
.btn-ghost { background: transparent; color: var(--sys-text-secondary); }
.btn-ghost:hover { background: var(--sys-controls-hoverAlternative); color: var(--sys-text-primary); }

/* ---------- Cards / feed ---------- */
.card {
  background: var(--sys-background-secondaryElevated);
  border: 1px solid var(--sys-background-stroke);
  border-radius: var(--const-radius-03);
  padding: var(--const-spacing-07);
  box-shadow: var(--const-shadow-01);
}
.card-elevated {
  background: var(--sys-background-primaryElevated);
  border: 1px solid var(--sys-background-stroke);
  border-radius: var(--const-radius-04);
  box-shadow: var(--const-shadow-05);
}

.feed { display: flex; flex-direction: column; gap: var(--const-spacing-06); }
.news-card { cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease; }
.news-card:hover { box-shadow: var(--const-shadow-02); border-color: var(--sys-controls-stroke); }
.news-head { display: flex; align-items: center; gap: var(--const-spacing-04); flex-wrap: wrap; margin-bottom: var(--const-spacing-04); }
.news-title {
  font-family: var(--const-typography-family-wide), sans-serif;
  font-size: var(--sys-typography-size-header-h4);
  line-height: var(--sys-typography-lineHeight-header-h4);
  font-weight: 500;
  margin: 0 0 var(--const-spacing-04);
}
.news-text {
  margin: 0 0 var(--const-spacing-05);
  color: var(--sys-text-secondary);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  white-space: pre-line;
}
.news-foot { display: flex; align-items: center; gap: var(--const-spacing-04); flex-wrap: wrap; }

.badge {
  display: inline-flex; align-items: center; gap: var(--const-spacing-03);
  padding: 2px var(--const-spacing-05);
  border-radius: var(--const-radius-09);
  font-size: var(--sys-typography-size-caption-c1);
  line-height: var(--sys-typography-lineHeight-caption-c1);
  font-weight: 500;
}
.badge-tg { background: var(--sys-background-activeSoft); color: var(--sys-text-activeStrong); }
.badge-arxiv { background: var(--sys-background-highlightSoft); color: var(--sys-text-highlightStrong); }
.badge-verified { background: var(--sys-background-positiveSoft); color: var(--sys-text-positiveStrong); }
.badge-single { background: var(--sys-background-secondary); color: var(--sys-text-tertiary); }
.status { display: inline-flex; align-items: center; padding: 2px var(--const-spacing-05); border-radius: var(--const-radius-09); font-size: var(--sys-typography-size-caption-c1); }
.status-positive { background: var(--sys-background-positiveSoft); color: var(--sys-text-positiveStrong); }
.status-negative { background: var(--sys-background-negativeSoft); color: var(--sys-text-negativeStrong); }
.status-neutral  { background: var(--sys-background-secondary); color: var(--sys-text-secondary); }
.news-date { color: var(--sys-text-tertiary); font-size: var(--sys-typography-size-caption-c1); }
.link { color: var(--sys-text-primaryLink); text-decoration: none; }
.link:hover { text-decoration: underline; }

.active-filters { display: flex; gap: var(--const-spacing-04); flex-wrap: wrap; }
.active-filters:empty { display: none; }
.feed-more { display: flex; justify-content: center; padding: var(--const-spacing-06) 0 var(--const-spacing-10); }
.feed-empty { text-align: center; color: var(--sys-text-tertiary); padding: var(--const-spacing-12); }

.entity-list { display: flex; flex-direction: column; gap: 0; }
.entity-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--const-spacing-03) var(--const-spacing-04);
  border-radius: var(--const-radius-01);
  cursor: pointer; color: var(--sys-text-primary);
  font-size: var(--sys-typography-size-paragraph-p4);
}
.entity-row:hover { background: var(--sys-controls-hoverAlternative); }
.entity-row .cnt { color: var(--sys-text-tertiary); font-size: var(--sys-typography-size-caption-c1); }

.stats-box { display: flex; flex-direction: column; gap: var(--const-spacing-03); }

/* ---------- Graph ---------- */
#view-graph { position: relative; }
.graph-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--const-spacing-05); }
.graph-controls { padding: var(--const-spacing-05) var(--const-spacing-06); }
.graph-controls-row { display: flex; align-items: center; gap: var(--const-spacing-06); flex-wrap: wrap; }
.graph-search { width: 300px; }
.ctl { display: inline-flex; align-items: center; gap: var(--const-spacing-04); color: var(--sys-text-secondary); }
.ctl input[type=range] { accent-color: var(--sys-accent-highlight); }
.graph-legend { display: flex; gap: var(--const-spacing-06); flex-wrap: wrap; margin-top: var(--const-spacing-04); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; }
.cy {
  height: calc(100vh - 260px); min-height: 480px;
  background: var(--sys-background-secondary);
  border: 1px solid var(--sys-background-stroke);
  border-radius: var(--const-radius-03);
}
.graph-intro { display:grid; grid-template-columns:minmax(280px,1fr) minmax(280px,460px); align-items:end; gap:40px; padding:16px 4px 6px; }
.graph-kicker { display:block; color:#9f7aea; font-size:11px; font-weight:700; letter-spacing:.18em; margin-bottom:10px; }
.graph-title { margin:0; font-family:var(--const-typography-family-wide),sans-serif; font-size:clamp(32px,4vw,58px); font-weight:500; line-height:.96; letter-spacing:-.035em; }
.graph-title em { color:#a879ff; font-style:normal; }
.graph-lead { max-width:440px; margin:0 0 3px; color:var(--sys-text-secondary); font-size:15px; line-height:1.55; }
.graph-controls { position:relative; z-index:2; padding:10px; border:1px solid var(--sys-background-stroke); border-radius:18px; background:var(--sys-background-secondaryElevated); box-shadow:0 16px 45px rgba(0,0,0,.12); }
.graph-search-wrap { display:flex; align-items:center; gap:8px; min-width:250px; height:40px; padding:0 12px; border-radius:12px; background:var(--sys-background-secondary); border:1px solid transparent; }
.graph-search-wrap:focus-within { border-color:#a879ff; box-shadow:0 0 0 3px rgba(168,121,255,.12); }
.graph-search-wrap > span { color:#a879ff; font-size:22px; }
.graph-search { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--sys-text-primary); font:inherit; }
.graph-stage { position:relative; overflow:hidden; border:1px solid var(--sys-background-stroke); border-radius:24px; background:#08090c; isolation:isolate; }
.graph-stage::before { content:''; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at 50% 42%,rgba(119,74,185,.17),transparent 42%),linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px); background-size:auto,40px 40px,40px 40px; }
.graph-stage .cy { height:calc(100vh - 330px); min-height:560px; background:transparent; border:0; border-radius:0; }
.graph-summary { position:absolute; top:18px; left:20px; pointer-events:none; color:rgba(255,255,255,.62); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.graph-summary b { color:#fff; font-size:15px; margin-right:3px; }
.graph-zoom { position:absolute; right:18px; top:18px; display:flex; flex-direction:column; overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:12px; background:rgba(15,16,20,.76); backdrop-filter:blur(12px); }
.graph-zoom button { width:38px; height:36px; border:0; border-bottom:1px solid rgba(255,255,255,.1); background:transparent; color:rgba(255,255,255,.8); cursor:pointer; font-size:17px; }
.graph-zoom button:last-child { border-bottom:0; } .graph-zoom button:hover { color:#fff; background:rgba(168,121,255,.22); }
.graph-hint { position:absolute; left:20px; bottom:18px; color:rgba(255,255,255,.55); font-size:12px; pointer-events:none; }
.graph-hint span { display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:#a879ff; box-shadow:0 0 12px #a879ff; }
@media(max-width:960px){.graph-intro{grid-template-columns:1fr;gap:14px}.graph-search-wrap{width:100%}.graph-stage .cy{min-height:520px;height:68vh}}
.graph-panel {
  position: absolute; right: var(--const-spacing-08); top: 120px;
  width: 380px; max-height: calc(100vh - 300px); overflow-y: auto;
  z-index: 10;
  box-shadow: var(--const-shadow-04);
}
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--const-spacing-04); margin-bottom: var(--const-spacing-05); }
.panel-title { font-family: var(--const-typography-family-wide), sans-serif; font-size: var(--sys-typography-size-header-h4); font-weight: 500; margin: 0; }
.panel-news { display: flex; flex-direction: column; gap: var(--const-spacing-05); }
.panel-news-item {
  padding: var(--const-spacing-05);
  border-radius: var(--const-radius-02);
  background: var(--sys-background-secondary);
  cursor: pointer;
}
.panel-news-item:hover { background: var(--sys-controls-hoverAlternative); }

/* ---------- Verification block ---------- */
.verify-box {
  display: flex; flex-direction: column; gap: var(--const-spacing-03);
  padding: var(--const-spacing-05) var(--const-spacing-06);
  border-radius: var(--const-radius-02);
  background: var(--sys-background-secondary);
}
.verify-line { font-size: var(--sys-typography-size-paragraph-p4); font-weight: 500; margin-bottom: var(--const-spacing-03); }
.verify-ok { color: var(--sys-text-positiveStrong); }
.verify-warn { color: var(--sys-text-warningStrong); }
.verify-row { display: flex; align-items: baseline; gap: var(--const-spacing-05); flex-wrap: wrap; }
.verify-row > .c1 { min-width: 64px; }

.cy-loading { opacity: .5; }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: var(--sys-background-overlay);
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--const-spacing-11) var(--const-spacing-06);
  overflow-y: auto;
}
.modal-overlay[hidden] { display: none; }
.modal { width: 720px; max-width: 100%; padding: var(--const-spacing-09); margin-bottom: var(--const-spacing-11); }
.modal-text { white-space: pre-line; color: var(--sys-text-primary); }
.modal-section-title { color: var(--sys-text-tertiary); letter-spacing: .06em; margin: var(--const-spacing-07) 0 var(--const-spacing-04); }
.related-list { display: flex; flex-direction: column; gap: var(--const-spacing-04); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .view { flex-direction: column; }
  .sidebar { width: 100%; }
  .search { width: 160px; }
  .graph-panel { position: static; width: 100%; max-height: none; }
  .brand-sub { display: none; }
}

/* Translated arXiv items: original English title under the Russian one,
   full original abstract behind a <details> toggle in the modal. */
.news-orig-title {
  font-size: 12px; color: var(--sys-text-tertiary);
  margin: -4px 0 var(--const-spacing-03);
}
.orig-details { margin-top: var(--const-spacing-04); }
.orig-details summary { cursor: pointer; }
.orig-details .modal-text { color: var(--sys-text-secondary); }

/* ---------- Trends ---------- */
.trends-wrap { width: 100%; max-width: 1080px; margin: 0 auto; }
.trends-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--const-spacing-06); margin-bottom: var(--const-spacing-06);
}
.trends-title { margin: 0 0 4px; }
.trends-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--const-spacing-06); margin-bottom: var(--const-spacing-08);
}
.trend-card { display: flex; flex-direction: column; gap: var(--const-spacing-03); }
.trend-global { border: 1px solid var(--const-palette-plum-normal); }
.badge-global { background: var(--const-palette-plum-normal); color: #fff; }
.badge-trend-policy_change { background: var(--const-palette-blueberry-normal); color: #fff; }
.badge-trend-opinion_shift { background: var(--const-palette-cranberry-normal); color: #fff; }
.badge-trend-attention_spike { background: var(--const-palette-mint-normal); color: #fff; }
.trend-evidence summary { cursor: pointer; }
.trend-card { cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease; }
.trend-card:hover { box-shadow: var(--const-shadow-02); border-color: var(--sys-controls-stroke); }
.trend-more {
  margin-top: auto; padding-top: var(--const-spacing-03);
  color: var(--sys-text-primaryLink);
  font-size: var(--sys-typography-size-caption-c1);
}

/* Full trend write-up in the modal */
.trend-detail .modal-text { white-space: normal; }
.trend-detail-h {
  font-family: var(--const-typography-family-wide), sans-serif;
  font-size: var(--sys-typography-size-paragraph-p3);
  font-weight: 600;
  margin: var(--const-spacing-05) 0 var(--const-spacing-03);
}
.trend-detail-h:first-child { margin-top: 0; }
.trend-detail-list {
  margin: 0 0 var(--const-spacing-04);
  padding-left: 20px;
  color: var(--sys-text-secondary);
  display: flex; flex-direction: column; gap: 4px;
}