:root {
  --bg: #06141b;
  --bg-2: #0a1822;
  --surface: rgba(12, 27, 36, .72);
  --surface-strong: rgba(16, 36, 47, .9);
  --surface-muted: rgba(190, 215, 214, .07);
  --surface-soft: rgba(255, 255, 255, .045);
  --line: rgba(194, 220, 219, .13);
  --line-strong: rgba(211, 236, 232, .24);
  --text: #edf7f3;
  --muted: #9eb1b2;
  --quiet: #6f8387;
  --green: #7fb9a0;
  --green-bright: #3bd6a3;
  --green-soft: rgba(83, 190, 143, .13);
  --orange: #ff8a3d;
  --orange-soft: rgba(255, 138, 61, .13);
  --purple: #9a8cff;
  --purple-soft: rgba(154, 140, 255, .14);
  --blue: #6bb7e8;
  --blue-soft: rgba(107, 183, 232, .14);
  --red: #ff6f73;
  --red-soft: rgba(255, 111, 115, .13);
  --shadow: 0 24px 80px rgba(0, 0, 0, .34);
  --shadow-soft: 0 18px 48px rgba(0, 0, 0, .22);
  --glow: 0 0 36px rgba(59, 214, 163, .16);
  --sidebar-width: 268px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 14% 8%, rgba(61, 119, 151, .36), transparent 32%),
    radial-gradient(circle at 86% 4%, rgba(83, 73, 150, .34), transparent 35%),
    radial-gradient(circle at 62% 58%, rgba(22, 84, 70, .2), transparent 38%),
    linear-gradient(145deg, #06141b 0%, #071018 44%, #03080d 100%);
  color: var(--text);
  font-family: "Aptos", "Segoe UI Variable", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  letter-spacing: -.01em;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.65), transparent 68%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .38;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.13) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 40%, rgba(255,255,255,.09) 0 1px, transparent 1px);
  background-size: 17px 17px, 29px 29px;
  mix-blend-mode: screen;
}
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible {
  outline: 2px solid rgba(59, 214, 163, .86);
  outline-offset: 3px;
}

.app-shell { min-height: 100vh; }
.app-shell::before {
  content: "";
  position: fixed;
  inset: auto -14vw -18vw auto;
  width: 45vw;
  height: 45vw;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(95, 92, 255, .22), transparent 62%);
  filter: blur(12px);
}

.sidebar {
  width: var(--sidebar-width);
  position: fixed;
  inset: 14px auto 14px 14px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 20px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(13, 28, 38, .82), rgba(5, 13, 20, .78));
  box-shadow: 0 20px 90px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(22px) saturate(1.22);
  scrollbar-width: thin;
  scrollbar-color: rgba(190, 215, 214, .26) transparent;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 6px 30px;
  color: var(--text);
  text-decoration: none;
}
.brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid rgba(154, 255, 219, .26);
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.34), transparent 20%),
    linear-gradient(145deg, #113b34, #1b735a 58%, #0d2028);
  box-shadow: 0 12px 30px rgba(0,0,0,.32), 0 0 28px rgba(59,214,163,.16);
  transform: rotate(-4deg);
}
.brand-mark::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(230,255,248,.2);
  border-radius: 10px;
}
.brand-mark span { position: absolute; bottom: 11px; width: 4px; border-radius: 999px; background: #d6fff0; }
.brand-mark span:nth-child(1) { height: 10px; left: 12px; }
.brand-mark span:nth-child(2) { height: 18px; left: 19px; }
.brand-mark span:nth-child(3) { height: 13px; left: 26px; }
.brand strong {
  display: block;
  font-family: "Songti SC", "SimSun", Georgia, serif;
  font-size: 21px;
  letter-spacing: 2px;
}
.brand small {
  display: block;
  margin-top: 2px;
  color: var(--quiet);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 2.6px;
}
.side-section { margin-bottom: 24px; }
.side-label {
  margin: 0 10px 9px;
  color: var(--quiet);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.9px;
  text-transform: uppercase;
}
.nav-list { display: grid; gap: 5px; }
.nav-item {
  position: relative;
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: #94a5a7;
  cursor: pointer;
  text-align: left;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.nav-item:hover {
  color: var(--text);
  border-color: rgba(210, 236, 232, .1);
  background: rgba(255,255,255,.045);
  transform: translateX(2px);
}
.nav-item.active {
  color: #e9fff7;
  border-color: rgba(116, 235, 188, .22);
  background: linear-gradient(135deg, rgba(59,214,163,.16), rgba(107,183,232,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.nav-item.active::before {
  content: "";
  position: absolute;
  left: -15px;
  width: 3px;
  height: 24px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(var(--green-bright), var(--blue));
  box-shadow: 0 0 16px rgba(59,214,163,.45);
}
.icon {
  display: block;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-count {
  min-width: 24px;
  margin-left: auto;
  padding: 3px 7px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}
.nav-count.orange { background: var(--orange-soft); color: #ffb37a; }
.live-dot {
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--green-bright);
  box-shadow: 0 0 0 5px rgba(59,214,163,.12), 0 0 20px rgba(59,214,163,.5);
}
.sidebar-footer { margin-top: auto; }
.system-status {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px;
  border: 1px solid rgba(215, 238, 234, .12);
  border-radius: 16px;
  background: rgba(255,255,255,.045);
}
.status-orb {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--green-bright);
  box-shadow: 0 0 0 6px rgba(59,214,163,.12), 0 0 22px rgba(59,214,163,.5);
}
.system-status strong, .system-status small { display: block; }
.system-status strong { font-size: 12px; }
.system-status small { margin-top: 4px; color: var(--quiet); font-size: 9px; line-height: 1.5; }
.sidebar-footer > p { margin: 10px 12px 0; color: var(--quiet); font-size: 10px; line-height: 1.6; }
.legal-links {
  display: grid;
  gap: 4px;
}
.legal-links a,
.site-legal a {
  color: var(--quiet);
  text-decoration: none;
  transition: color .18s ease;
}
.legal-links a:hover,
.site-legal a:hover {
  color: var(--text);
}

main { min-height: 100vh; margin-left: calc(var(--sidebar-width) + 14px); }
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 74px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 38px;
  border-bottom: 1px solid rgba(214, 238, 235, .08);
  background: linear-gradient(180deg, rgba(6, 15, 22, .86), rgba(6, 15, 22, .62));
  backdrop-filter: blur(22px) saturate(1.2);
}
.mobile-menu { display: none; }
.search-wrap { position: relative; width: min(560px, 54vw); min-width: 0; }
.search-wrap > .icon { position: absolute; left: 15px; top: 13px; color: var(--quiet); }
.search-wrap input {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 58px 0 43px;
  border: 1px solid rgba(218, 242, 238, .13);
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.search-wrap input:focus {
  border-color: rgba(59,214,163,.5);
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 0 5px rgba(59,214,163,.08), inset 0 1px 0 rgba(255,255,255,.05);
}
.search-wrap input::placeholder { color: #6f8085; }
.search-wrap kbd {
  position: absolute;
  right: 12px;
  top: 11px;
  padding: 3px 8px;
  border: 1px solid rgba(218, 242, 238, .1);
  border-radius: 999px;
  background: rgba(0,0,0,.2);
  color: var(--quiet);
  font-size: 9px;
}
.top-actions { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.icon-button, .mobile-menu {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(218, 242, 238, .13);
  border-radius: 13px;
  background: rgba(255,255,255,.06);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.icon-button:hover, .mobile-menu:hover {
  transform: translateY(-1px);
  border-color: rgba(59,214,163,.28);
  background: rgba(255,255,255,.09);
}
.brief-button, .primary-button, .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 750;
  letter-spacing: -.01em;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.brief-button, .primary-button {
  border: 1px solid rgba(87, 234, 176, .42);
  background: linear-gradient(135deg, #28c991, #3a8ed6);
  color: #041211;
  box-shadow: 0 12px 34px rgba(59,214,163,.16);
}
.brief-button:hover, .primary-button:hover { transform: translateY(-1px); box-shadow: 0 16px 40px rgba(59,214,163,.24); }
.secondary-button {
  border: 1px solid rgba(218, 242, 238, .13);
  background: rgba(255,255,255,.055);
  color: var(--muted);
}
.brief-button .icon, .primary-button .icon, .secondary-button .icon { width: 15px; height: 15px; }

.content {
  max-width: 1320px;
  margin: 0 auto;
  padding: 44px 38px 82px;
}
.page-heading {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 30px;
  min-height: 210px;
  margin-bottom: 22px;
  padding: 34px 34px 30px;
  overflow: hidden;
  border: 1px solid rgba(218, 242, 238, .12);
  border-radius: 30px;
  background:
    radial-gradient(circle at 72% 12%, rgba(126, 103, 255, .22), transparent 33%),
    radial-gradient(circle at 10% 80%, rgba(59, 214, 163, .18), transparent 35%),
    linear-gradient(140deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.05);
}
.page-heading::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(120deg, rgba(0,0,0,.48), transparent 66%);
}
.eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: #8fe7c2;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 1.9px;
  text-transform: uppercase;
}
.pulse {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-bright);
  box-shadow: 0 0 18px rgba(59,214,163,.65);
}
.pulse::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(59,214,163,.75);
  border-radius: 50%;
  animation: pulse 1.8s infinite;
}
@keyframes pulse { 0% { opacity: .8; transform: scale(.68); } 70%,100% { opacity: 0; transform: scale(1.8); } }
.page-heading h1 {
  position: relative;
  max-width: 820px;
  margin: 0;
  font-family: "Songti SC", "SimSun", Georgia, serif;
  font-size: clamp(38px, 5vw, 76px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -3px;
}
.page-heading p {
  position: relative;
  max-width: 620px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}
.heading-actions { position: relative; display: flex; gap: 9px; flex: 0 0 auto; }

.stats-grid {
  display: grid;
  grid-template-columns: 1.24fr 1fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 22px;
}
.stat-card {
  min-width: 0;
  min-height: 126px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.078), rgba(255,255,255,.03)),
    rgba(8, 19, 28, .58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(18px);
}
.stat-card:first-child {
  background:
    radial-gradient(circle at 85% 40%, rgba(59,214,163,.18), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
}
.stat-card[data-stat-view] {
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.stat-card[data-stat-view]:hover,
.stat-card[data-stat-view]:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(59,214,163,.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 18px 42px rgba(0,0,0,.18);
  outline: none;
}
.stat-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
}
.stat-icon .icon { width: 18px; height: 18px; }
.stat-icon.green { color: #9dffd9; background: var(--green-soft); }
.stat-icon.purple { color: #c5bdff; background: var(--purple-soft); }
.stat-icon.orange { color: #ffc095; background: var(--orange-soft); }
.stat-icon.blue { color: #b2dfff; background: var(--blue-soft); }
.stat-card span, .stat-card small { display: block; color: var(--quiet); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.stat-card strong {
  display: inline-block;
  margin-top: 8px;
  font-family: "Bahnschrift", "DIN Alternate", "Segoe UI", sans-serif;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -1.2px;
}
.stat-card strong em { color: var(--quiet); font-size: 13px; font-style: normal; }
.stat-card small { margin-top: 5px; text-transform: none; letter-spacing: 0; }
.stat-card small.up { color: var(--green-bright); }
.sparkline { height: 42px; display: flex; align-items: flex-end; gap: 3px; margin-left: auto; }
.sparkline i { width: 4px; border-radius: 999px; background: rgba(143, 231, 194, .38); }
.sparkline i:nth-child(1){height:30%}.sparkline i:nth-child(2){height:48%}.sparkline i:nth-child(3){height:38%}.sparkline i:nth-child(4){height:70%}.sparkline i:nth-child(5){height:58%}.sparkline i:nth-child(6){height:80%}.sparkline i:nth-child(7){height:100%;background:var(--green-bright);box-shadow:0 0 16px rgba(59,214,163,.4)}

.toolbar {
  position: sticky;
  top: 74px;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(6, 16, 24, .72);
  backdrop-filter: blur(18px) saturate(1.15);
}
.filter-tabs { display: flex; align-items: center; gap: 4px; }
.filter-tabs button, .tool-button {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.filter-tabs button {
  padding: 8px 13px;
  border-radius: 999px;
  font-size: 12px;
}
.filter-tabs button:hover, .filter-tabs button.active {
  color: #eafff7;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.tool-actions { display: flex; gap: 6px; }
.tool-button {
  min-width: 33px;
  height: 33px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 11px;
  font-size: 11px;
}
.tool-button:hover, .tool-button.active {
  border-color: rgba(218, 242, 238, .12);
  background: rgba(255,255,255,.06);
  color: var(--text);
}
.tool-button .icon { width: 14px; height: 14px; }

.feed { display: grid; gap: 14px; }
.story-card {
  position: relative;
  display: grid;
  grid-template-columns: 76px 58px minmax(0, 1fr) 138px;
  gap: 18px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.028)),
    rgba(8, 19, 28, .66);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  cursor: pointer;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
  animation: revealUp .42s ease both;
}
.story-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 85% 0%, rgba(107,183,232,.12), transparent 30%);
  opacity: 0;
  transition: opacity .22s ease;
}
.story-card:hover {
  transform: translateY(-3px);
  border-color: rgba(105, 226, 184, .27);
  box-shadow: var(--shadow), var(--glow);
  background:
    linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.035)),
    rgba(10, 23, 34, .78);
}
.story-card:hover::before { opacity: 1; }
.story-time {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 4px 20px 0 0;
  color: var(--quiet);
}
.story-time::after {
  content: "";
  position: absolute;
  right: 4px;
  top: -24px;
  bottom: -24px;
  width: 1px;
  background: linear-gradient(transparent, rgba(143,231,194,.34), transparent);
}
.story-time time {
  color: var(--text);
  font-family: "Bahnschrift", "DIN Alternate", sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.4px;
}
.story-time small { margin-top: 5px; font-size: 9px; }
.time-dot {
  position: absolute;
  z-index: 1;
  top: 11px;
  right: 0;
  width: 9px;
  height: 9px;
  border: 2px solid #06141b;
  border-radius: 50%;
  background: var(--green-bright);
  box-shadow: 0 0 0 4px rgba(59,214,163,.11), 0 0 18px rgba(59,214,163,.52);
}
.story-content { min-width: 0; position: relative; }
.score-ring {
  --score-color: var(--green-bright);
  position: relative;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--score-color) calc(var(--score) * 1%), rgba(255,255,255,.08) 0);
  box-shadow: 0 0 18px rgba(59,214,163,.12);
}
.score-ring::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #0b1922;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.score-ring strong {
  position: relative;
  font-family: "Bahnschrift", "DIN Alternate", sans-serif;
  font-size: 16px;
  font-weight: 700;
}
.story-card[data-score="medium"] .score-ring { --score-color: var(--orange); }
.story-card[data-score="low"] .score-ring { --score-color: var(--red); }
.story-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  color: var(--quiet);
  font-size: 10px;
}
.source-tier, .story-tag {
  padding: 3px 7px;
  border: 1px solid rgba(218, 242, 238, .12);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}
.source-tier.t0 { border-color: rgba(59,214,163,.25); background: var(--green-soft); color: #a9ffdc; }
.story-tag.rise { border-color: rgba(255,138,61,.22); background: var(--orange-soft); color: #ffc095; }
.story-tag.warn { border-color: rgba(255,111,115,.22); background: var(--red-soft); color: #ffb8ba; }
.story-tag.pick { border-color: rgba(154,140,255,.25); background: var(--purple-soft); color: #cac3ff; }
.story-title {
  margin: 0;
  font-family: "Songti SC", "SimSun", Georgia, serif;
  font-size: 20px;
  line-height: 1.42;
  font-weight: 700;
  letter-spacing: -.45px;
}
.story-summary {
  max-width: 780px;
  display: -webkit-box;
  overflow: hidden;
  margin: 9px 0 13px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.85;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.story-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 11px; }
.story-tag.topic { background: rgba(136, 166, 158, .1); border-color: rgba(200, 224, 218, .12); color: #a9bbb8; }
.story-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  color: var(--quiet);
  font-size: 10px;
}
.story-foot span { display: inline-flex; align-items: center; gap: 5px; }
.story-foot .icon { width: 12px; height: 12px; }
.story-trend { position: relative; align-self: center; }
.trend-label { display: flex; justify-content: space-between; margin-bottom: 9px; color: var(--quiet); font-size: 9px; }
.trend-label strong { color: #ffb37a; font-size: 10px; }
.trend-bars { height: 30px; display: flex; align-items: flex-end; gap: 4px; }
.trend-bars i { flex: 1; min-width: 4px; border-radius: 999px 999px 0 0; background: rgba(255,255,255,.09); }
.trend-bars i:nth-child(1){height:18%}.trend-bars i:nth-child(2){height:25%}.trend-bars i:nth-child(3){height:32%}.trend-bars i:nth-child(4){height:31%}.trend-bars i:nth-child(5){height:48%}.trend-bars i:nth-child(6){height:67%;background:rgba(255,178,122,.45)}.trend-bars i:nth-child(7){height:100%;background:var(--orange);box-shadow:0 0 18px rgba(255,138,61,.42)}
.trend-bars.level-1 i:nth-child(n+2),
.trend-bars.level-2 i:nth-child(n+3),
.trend-bars.level-3 i:nth-child(n+5),
.trend-bars.level-4 i:nth-child(n+6) { background: rgba(255,255,255,.09); box-shadow: none; }
.trend-bars.level-1 i:first-child { height: 26%; background: #78908b; }
.trend-bars.level-2 i:nth-child(-n+2) { background: #b9966d; }
.trend-bars.level-3 i:nth-child(-n+4) { background: #df9c61; }
.trend-bars.level-4 i:nth-child(-n+5) { background: #f08a45; }
.trend-bars.level-5 i { background: #ff5d38; }

.empty-state {
  padding: 88px 24px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed rgba(218, 242, 238, .15);
  border-radius: 24px;
  background: rgba(255,255,255,.035);
}
.empty-state .empty-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  border: 1px solid rgba(218, 242, 238, .13);
  border-radius: 50%;
  background: rgba(255,255,255,.055);
}
.empty-state .empty-icon .icon { color: var(--green-bright); }
.empty-state strong { color: var(--text); font-size: 16px; }
.empty-state p { margin: 10px 0 0; }

.site-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 32px 0 10px;
  color: var(--quiet);
  font-size: 11px;
  letter-spacing: .02em;
}
.site-legal span {
  color: color-mix(in srgb, var(--quiet) 55%, transparent);
}

.platform-hot-layout { display: grid; gap: 18px; }
.platform-hot-section, .cluster-card, .daily-section, .source-panel, .method-panel, .daily-subnav, .guide-card {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(16px);
}
.platform-hot-section { overflow: hidden; border-radius: 24px; }
.platform-hot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
}
.platform-hot-head small { color: #8fe7c2; font-size: 9px; font-weight: 850; letter-spacing: .18em; }
.platform-hot-head h2 { margin: 5px 0 0; font-family: "Songti SC", Georgia, serif; font-size: 22px; }
.platform-hot-head > span { color: var(--muted); font-size: 11px; }
.platform-hot-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.platform-hot-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 22px;
  gap: 13px;
  padding: 18px 20px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: background .18s ease, transform .18s ease;
}
.platform-hot-card:nth-child(odd) { border-right: 1px solid var(--line); }
.platform-hot-card:hover { background: rgba(255,255,255,.055); }
.platform-rank {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #ffc095;
  background: var(--orange-soft);
  font-size: 14px;
}
.platform-hot-meta { display: flex; gap: 6px; color: var(--quiet); font-size: 9px; }
.platform-hot-content h3 { margin: 6px 0 0; font-size: 14px; line-height: 1.55; }
.platform-hot-content p { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.75; }
.platform-open { color: var(--quiet); }
.platform-open .icon { width: 14px; height: 14px; }

.cluster-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.cluster-card {
  padding: 22px;
  border-radius: 22px;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cluster-card:hover { transform: translateY(-3px); border-color: rgba(59,214,163,.22); box-shadow: var(--shadow-soft); }
.cluster-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cluster-badge {
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--green-soft);
  color: #a9ffdc;
  font-size: 9px;
  font-weight: 800;
}
.cluster-card h3 { margin: 0 0 9px; font-family: "Songti SC", Georgia, serif; font-size: 18px; line-height: 1.48; }
.cluster-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.source-bubble {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  margin-right: -9px;
  border: 2px solid rgba(10,20,28,.9);
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: var(--green-bright);
  font-size: 8px;
  font-weight: 800;
}

.daily-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: start; }
.daily-subnav {
  position: sticky;
  top: 94px;
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 22px;
}
.daily-subnav > strong { padding: 8px 9px 12px; font-family: "Songti SC", Georgia, serif; font-size: 16px; }
.daily-subnav button {
  display: grid;
  gap: 4px;
  padding: 11px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}
.daily-subnav button.active, .daily-subnav button:hover { background: rgba(255,255,255,.06); color: var(--text); }
.daily-subnav small { color: var(--quiet); font-size: 9px; }
.daily-main { min-width: 0; }
.daily-cover, .guide-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 78% 18%, rgba(154,140,255,.26), transparent 35%),
    radial-gradient(circle at 20% 90%, rgba(59,214,163,.18), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
  color: white;
}
.daily-cover::after, .guide-hero::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  right: -110px;
  top: -125px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  box-shadow: 0 0 0 46px rgba(255,255,255,.025), 0 0 0 92px rgba(255,255,255,.015);
}
.daily-cover small, .guide-hero small { color: #8fe7c2; font-size: 9px; letter-spacing: 1.8px; text-transform: uppercase; }
.daily-cover h2, .guide-hero h2 {
  max-width: 720px;
  margin: 14px 0 9px;
  font-family: "Songti SC", Georgia, serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.25;
}
.daily-cover p, .guide-hero p { max-width: 680px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.daily-list { display: grid; gap: 14px; }
.daily-section {
  padding: 22px;
  border-radius: 22px;
}
.daily-section-title { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.daily-section-title strong { color: var(--green-bright); font-family: "Bahnschrift", sans-serif; font-size: 31px; }
.daily-section-title h3 { margin: 0; font-size: 19px; }
.daily-section-title span { margin-left: auto; color: var(--quiet); font-size: 10px; }
.daily-detail { padding: 17px 0; border-top: 1px solid var(--line); cursor: pointer; }
.daily-detail > div { display: flex; justify-content: space-between; gap: 12px; }
.daily-detail > div > strong { font-size: 13px; line-height: 1.65; }
.daily-detail small { flex: 0 0 auto; color: var(--quiet); font-size: 9px; }
.daily-detail p { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.8; }

.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.guide-card {
  padding: 20px;
  border-radius: 20px;
}
.guide-card > span { color: var(--green-bright); font-family: "Bahnschrift", sans-serif; font-size: 21px; }
.guide-card h3 { margin: 8px 0 7px; font-size: 14px; }
.guide-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.8; }

.source-panel { overflow: hidden; border-radius: 22px; }
.source-head { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid var(--line); }
.source-head h2 { margin: 0; font-family: "Songti SC", Georgia, serif; font-size: 20px; }
.source-head span { color: var(--quiet); font-size: 11px; }
.source-note {
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,138,61,.09);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.75;
}
.source-row {
  display: grid;
  grid-template-columns: 1.6fr .6fr .9fr .7fr .8fr .5fr;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
}
.source-row:last-child { border-bottom: 0; }
.source-row.header { background: rgba(255,255,255,.035); color: var(--quiet); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.source-name { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.source-logo {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--green-soft);
  color: #a9ffdc;
  font-size: 9px;
  font-weight: 800;
}
.source-status { display: flex; align-items: center; gap: 6px; }
.source-status small { display: none; }
.source-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green-bright); box-shadow: 0 0 12px rgba(59,214,163,.45); }
.source-status.delay::before { background: var(--orange); box-shadow: 0 0 12px rgba(255,138,61,.36); }
.verify-note { margin-left: auto; padding: 2px 6px; border-radius: 999px; background: var(--orange-soft); color: #ffc095; font-size: 8px; font-style: normal; white-space: nowrap; }

.method-panel { padding: 28px; border-radius: 22px; }
.method-panel > h2 { margin: 0 0 8px; font-family: "Songti SC", Georgia, serif; font-size: 26px; }
.method-panel > p { max-width: 760px; margin: 0 0 26px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.method-flow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 26px; }
.flow-step {
  position: relative;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.045);
}
.flow-step strong { display: block; margin-bottom: 5px; color: var(--green-bright); font-family: "Bahnschrift", sans-serif; font-size: 22px; }
.flow-step span { font-size: 11px; font-weight: 800; }
.flow-step p { margin: 7px 0 0; color: var(--quiet); font-size: 9px; line-height: 1.6; }
.formula {
  padding: 21px;
  border: 1px solid rgba(154,140,255,.16);
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 0, rgba(154,140,255,.18), transparent 40%),
    rgba(8, 12, 28, .58);
  color: white;
}
.formula + .formula { margin-top: 10px; }
.formula small { display: block; margin-bottom: 10px; color: #bdb7ff; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; }
.formula code { font-family: "Cascadia Mono", Consolas, monospace; font-size: 11px; line-height: 2; white-space: normal; }
.editorial-formula { background: radial-gradient(circle at 95% 0, rgba(255,138,61,.2), transparent 40%), rgba(35, 19, 20, .62); border-color: rgba(255,138,61,.17); }

.detail-drawer {
  position: fixed;
  z-index: 42;
  top: 14px;
  right: 14px;
  width: min(590px, calc(100% - 28px));
  height: calc(100vh - 28px);
  padding: 38px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: rgba(9, 21, 30, .88);
  box-shadow: -20px 0 90px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(24px) saturate(1.2);
  transform: translateX(calc(100% + 30px));
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.detail-drawer.open { transform: translateX(0); }
.scrim { position: fixed; z-index: 40; inset: 0; pointer-events: none; background: rgba(0,0,0,.42); opacity: 0; transition: opacity .2s ease; backdrop-filter: blur(2px); }
.scrim.open { pointer-events: auto; opacity: 1; }
.drawer-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255,255,255,.055);
  cursor: pointer;
}
.drawer-score { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.drawer-score .score-ring::before { background: #0b1922; }
.drawer-score span { display: block; color: var(--muted); font-size: 10px; }
.drawer-score strong { display: block; margin-top: 4px; font-family: "Songti SC", Georgia, serif; font-size: 18px; }
.detail-drawer h2 { margin: 0 0 12px; font-family: "Songti SC", Georgia, serif; font-size: 28px; line-height: 1.42; }
.drawer-summary { margin: 0 0 22px; color: var(--muted); font-size: 13px; line-height: 1.9; }
.metric-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin: 22px 0; }
.metric { padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.045); }
.metric span { display: block; color: var(--quiet); font-size: 9px; }
.metric strong { display: block; margin-top: 7px; font-family: "Bahnschrift", sans-serif; font-size: 20px; }
.drawer-section { margin-top: 26px; }
.drawer-section h3 { margin: 0 0 12px; color: var(--quiet); font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase; }
.timeline-item { position: relative; padding: 0 0 18px 20px; border-left: 1px solid var(--line); }
.timeline-item::before { content: ""; position: absolute; left: -4px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--green-bright); }
.timeline-item strong, .timeline-item span { display: block; }
.timeline-item strong { font-size: 12px; }
.timeline-item span { margin-top: 4px; color: var(--quiet); font-size: 9px; }
.drawer-actions { display: flex; gap: 9px; margin-top: 24px; }

.toast {
  position: fixed;
  z-index: 80;
  left: 50%;
  bottom: 26px;
  padding: 12px 17px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  background: rgba(5, 10, 16, .88);
  color: white;
  font-size: 12px;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translate(-50%, 20px);
  pointer-events: none;
  transition: .22s ease;
  backdrop-filter: blur(16px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.focus-exit {
  position: fixed;
  z-index: 70;
  right: 22px;
  top: 18px;
  display: none;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(8, 18, 27, .82);
  color: var(--text);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.focus-exit .icon { width: 14px; height: 14px; }
.refreshing .icon { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes revealUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

body.light {
  --bg: #f2f4f2;
  --bg-2: #eef2f1;
  --surface: rgba(255,255,255,.86);
  --surface-strong: rgba(255,255,255,.94);
  --surface-muted: #f7f8f5;
  --surface-soft: #f8faf7;
  --line: #dde4df;
  --line-strong: #cdd8d2;
  --text: #172022;
  --muted: #667477;
  --quiet: #94a0a2;
  --green: #416850;
  --green-bright: #2f9d73;
  --green-soft: #e5f2eb;
  --orange-soft: #fff0e5;
  --purple-soft: #efecfb;
  --blue-soft: #e7f2f8;
  --red-soft: #fbe9ea;
  color-scheme: light;
  background:
    radial-gradient(circle at 12% 7%, rgba(141, 160, 168, .22), transparent 32%),
    radial-gradient(circle at 88% 4%, rgba(201, 209, 200, .45), transparent 32%),
    linear-gradient(145deg, #f3f4f2, #eef2f1);
}
body.light::before { opacity: .28; filter: invert(1); }
body.light::after { opacity: .16; }
body.light .sidebar,
body.light .topbar,
body.light .toolbar,
body.light .detail-drawer {
  background: rgba(248, 250, 248, .82);
  color: var(--text);
}
body.light .page-heading,
body.light .story-card,
body.light .stat-card,
body.light .platform-hot-section,
body.light .cluster-card,
body.light .daily-section,
body.light .source-panel,
body.light .method-panel,
body.light .daily-subnav,
body.light .guide-card {
  background: rgba(255,255,255,.72);
}
body.light .score-ring::before { background: #f5f7f5; }
body.light .source-bubble { border-color: #fff; }
body.light .time-dot { border-color: #f2f4f2; }
body.light .story-tag.topic { background: #edf4f0; border-color: #d3e3da; color: #426b56; }
body.light .brief-button,
body.light .primary-button { color: white; }

body.focus .sidebar, body.focus .stats-grid, body.focus .page-heading p, body.focus .heading-actions, body.focus .top-actions, body.focus .category-section { display: none; }
body.focus main { margin-left: 0; }
body.focus .content { max-width: 980px; }
body.focus .page-heading { min-height: 150px; }
body.focus .focus-exit { display: inline-flex; }

.compact .story-card { grid-template-columns: 70px 46px minmax(0,1fr) 112px; padding-top: 16px; padding-bottom: 16px; }
.compact .score-ring { width: 42px; height: 42px; }
.compact .score-ring strong { font-size: 12px; }
.compact .story-summary { display: none; }
.compact .story-title { font-size: 16px; }

@media (max-width: 1180px) {
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .method-flow { grid-template-columns: repeat(3,1fr); }
  .story-card { grid-template-columns: 70px 52px minmax(0,1fr); }
  .story-trend { display: none; }
}
@media (max-width: 900px) {
  .sidebar { inset: 10px auto 10px 10px; transform: translateX(calc(-100% - 18px)); transition: transform .24s ease; }
  .sidebar.open { transform: translateX(0); box-shadow: 20px 0 70px rgba(0,0,0,.42); }
  main { margin-left: 0; }
  .mobile-menu { display: grid; }
  .topbar { padding: 0 16px; }
  .search-wrap { flex: 1; width: auto; }
  .content { padding: 26px 16px 56px; }
  .page-heading { grid-template-columns: 1fr; align-items: start; min-height: 190px; padding: 26px; }
  .heading-actions { display: none; }
  .cluster-grid, .platform-hot-list, .guide-grid { grid-template-columns: 1fr; }
  .platform-hot-card:nth-child(odd) { border-right: 0; }
  .daily-layout { grid-template-columns: 1fr; }
  .daily-subnav { position: static; display: flex; overflow-x: auto; }
  .daily-subnav > strong { display: none; }
  .daily-subnav button { flex: 0 0 auto; }
  .source-panel { overflow-x: auto; }
  .source-row { min-width: 780px; }
}
@media (max-width: 660px) {
  .brief-button { display: none; }
  .top-actions { display: none; }
  .search-wrap kbd { display: none; }
  .search-wrap input { padding-right: 14px; }
  .page-heading h1 { font-size: 38px; letter-spacing: -1.8px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat-card { min-height: 98px; padding: 14px; }
  .stat-card .stat-icon, .sparkline { display: none; }
  .stat-card strong { font-size: 26px; }
  .toolbar { align-items: flex-start; overflow-x: auto; }
  .filter-tabs { max-width: calc(100vw - 32px); overflow-x: auto; }
  .filter-tabs button { flex: 0 0 auto; }
  .tool-actions { display: none; }
  #main-content, .feed { width: 100%; min-width: 0; max-width: 100%; overflow: hidden; }
  .story-card, .compact .story-card { width: 100%; grid-template-columns: 42px minmax(0,1fr); gap: 13px; padding: 18px; overflow: hidden; }
  .story-time { display: none; }
  .story-trend { display: none; }
  .score-ring, .compact .score-ring { width: 40px; height: 40px; }
  .score-ring strong { font-size: 12px; }
  .story-title, .compact .story-title { font-size: 16px; }
  .story-content { width: 100%; max-width: 100%; overflow: hidden; }
  .story-title, .story-summary { max-width: 100%; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
  .story-summary { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 11px; }
  .method-flow { grid-template-columns: 1fr; }
  .detail-drawer { top: 0; right: 0; width: 100%; height: 100vh; padding: 50px 20px 30px; border-radius: 0; }
  .platform-hot-card { grid-template-columns: 38px minmax(0, 1fr) 18px; padding: 15px 13px; }
  .daily-detail > div { display: block; }
  .daily-detail small { display: block; margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}