:root {
  --news-ink: #17243a;
  --news-muted: #68758a;
  --news-line: #dce3ec;
  --news-blue: #275db6;
  --news-red: #c8394a;
  --news-green: #18715d;
  --news-gold: #9a6518;
}

.news-center-page {
  min-height: calc(100vh - 76px);
  padding: 24px 28px 38px;
  color: var(--news-ink);
  background: #eef3f7;
}

.news-command,
.news-filter-panel,
.news-feature-zone,
.news-workspace {
  width: min(1480px, 100%);
  margin-right: auto;
  margin-left: auto;
}

.news-command {
  min-height: 132px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding: 26px 30px;
  color: #fff;
  background: #112b58;
  border-left: 5px solid #46b8d7;
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(25, 48, 82, .13);
}

.news-command-copy p,
.news-radar header p,
.news-feed-panel > header p,
.news-side-column section > header p {
  margin: 0 0 5px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
}

.news-command-copy p { color: #66d5ec; }
.news-command-copy h1 { margin: 0; font-size: 30px; }
.news-command-copy span { display: block; max-width: 780px; margin-top: 10px; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.75; }

.news-command-metrics { display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr)); gap: 10px; }
.news-command-metrics > div { min-height: 72px; padding: 14px 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.13); border-radius: 6px; }
.news-command-metrics small, .news-command-metrics strong { display: block; }
.news-command-metrics small { color: rgba(255,255,255,.58); font-size: 10px; }
.news-command-metrics strong { margin-top: 8px; font-size: 16px; }
.news-command-metrics strong i { width: 7px; height: 7px; display: inline-block; margin-right: 6px; background: #4bd6aa; border-radius: 50%; box-shadow: 0 0 0 4px rgba(75,214,170,.13); }

.news-filter-panel { margin-top: 16px; padding: 17px 18px; background: #fff; border: 1px solid var(--news-line); border-radius: 8px; }
.news-category-tabs { display: grid; grid-template-columns: repeat(6, minmax(100px, 1fr)); gap: 8px; }
.news-category-tabs button { min-height: 38px; padding: 0 11px; color: #617086; font-size: 12px; font-weight: 800; background: #f4f6f9; border: 1px solid #e0e5ec; border-radius: 5px; }
.news-category-tabs button:hover { color: var(--news-blue); border-color: #b9ccec; }
.news-category-tabs button.active { color: #fff; background: var(--news-blue); border-color: var(--news-blue); }
.news-category-tabs button small { margin-left: 5px; color: inherit; font-size: 9px; opacity: .72; }


.news-feature-zone { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .7fr); gap: 16px; margin-top: 16px; }
.news-featured, .news-radar { min-height: 280px; background: #fff; border: 1px solid var(--news-line); border-radius: 8px; overflow: hidden; }
.news-featured > a { min-height: 280px; display: grid; grid-template-columns: minmax(0, 1fr) 220px; color: inherit; text-decoration: none; }
.news-feature-copy { display: flex; align-items: flex-start; flex-direction: column; justify-content: center; padding: 32px; }
.news-feature-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.news-category-label, .news-lottery-label { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; font-size: 10px; font-weight: 900; border-radius: 4px; }
.news-category-label { color: #fff; background: var(--news-blue); }
.news-category-label.draw { background: var(--news-red); }
.news-category-label.analysis { background: var(--news-green); }
.news-category-label.guide { background: var(--news-gold); }
.news-category-label.notice { background: #76569d; }
.news-lottery-label { color: #51647d; background: #edf1f6; }
.news-feature-copy h2 { max-width: 820px; margin: 18px 0 0; font-size: 25px; line-height: 1.45; }
.news-feature-copy > p { max-width: 820px; margin: 13px 0 0; color: var(--news-muted); font-size: 14px; line-height: 1.8; }
.news-feature-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 23px; color: #7b8798; font-size: 11px; }
.news-feature-meta span { display: inline-flex; align-items: center; gap: 5px; }
.news-feature-meta svg { width: 14px; height: 14px; }
.news-feature-signal { display: grid; place-items: center; align-content: center; padding: 24px; color: #fff; text-align: center; background: #1c6e68; }
.news-feature-signal svg { width: 46px; height: 46px; margin-bottom: 18px; opacity: .86; }
.news-feature-signal strong { font-size: 38px; }
.news-feature-signal span { margin-top: 5px; color: rgba(255,255,255,.7); font-size: 11px; }
.news-featured > a:hover h2 { color: var(--news-blue); }

.news-radar { padding: 22px; }
.news-radar > header, .news-side-column section > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 15px; border-bottom: 1px solid #e8ecf1; }
.news-radar header p, .news-feed-panel > header p, .news-side-column section > header p { color: #8a96a7; }
.news-radar header h2, .news-feed-panel > header h2, .news-side-column section > header h2 { margin: 0; font-size: 17px; }
.news-radar header > svg { width: 25px; height: 25px; color: var(--news-red); }
#newsRadarList { display: grid; gap: 0; margin-top: 4px; }
.news-radar-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 62px; border-bottom: 1px solid #edf0f4; }
.news-radar-item:last-child { border-bottom: 0; }
.news-radar-item b { width: 28px; height: 28px; display: grid; place-items: center; color: #fff; font-size: 11px; background: #486887; border-radius: 50%; }
.news-radar-item strong, .news-radar-item small { display: block; }
.news-radar-item strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.news-radar-item small { margin-top: 4px; color: #8994a4; font-size: 9px; }
.news-radar-item em { color: var(--news-red); font-size: 11px; font-style: normal; font-weight: 900; }

.news-workspace { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(310px, .65fr); align-items: start; gap: 16px; margin-top: 16px; }
.news-feed-panel, .news-side-column > section { background: #fff; border: 1px solid var(--news-line); border-radius: 8px; }
.news-feed-panel { padding: 22px; }
.news-feed-panel > header { padding-bottom: 17px; border-bottom: 1px solid #e8ecf1; }
.news-feed-panel > header span { display: block; margin-top: 6px; color: #7c8899; font-size: 11px; }
.news-feed { display: grid; }
.news-feed-item { display: grid; grid-template-columns: 72px minmax(0, 1fr) 34px; align-items: center; gap: 18px; min-height: 142px; padding: 21px 4px; border-bottom: 1px solid #e9edf2; }
.news-feed-item:last-child { border-bottom: 0; }
.news-feed-date { text-align: center; }
.news-feed-date strong, .news-feed-date small { display: block; }
.news-feed-date strong { color: #32465f; font-size: 22px; }
.news-feed-date small { margin-top: 4px; color: #8995a6; font-size: 10px; }
.news-feed-copy { min-width: 0; color: inherit; text-decoration: none; }
.news-feed-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.news-feed-copy h3 { margin: 10px 0 0; font-size: 17px; line-height: 1.5; }
.news-feed-copy p { display: -webkit-box; margin: 8px 0 0; overflow: hidden; color: var(--news-muted); font-size: 12px; line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.news-feed-copy footer { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; margin-top: 10px; color: #8994a4; font-size: 10px; }
.news-feed-item > svg { width: 20px; height: 20px; color: #93a0b0; }
.news-feed-item:hover .news-feed-copy h3 { color: var(--news-blue); }
.news-feed-item:hover > svg { color: var(--news-blue); transform: translateX(2px); }
.news-feed-loading, .news-empty-state { min-height: 220px; display: grid; place-items: center; color: #7e8a9c; font-size: 13px; }
.news-load-more { width: 100%; min-height: 42px; margin-top: 14px; color: #405570; font-size: 12px; font-weight: 800; background: #f4f6f9; border: 1px solid #dce2ea; border-radius: 5px; }
.news-load-more:hover { color: var(--news-blue); border-color: #afc3e6; }

.news-side-column { display: grid; gap: 16px; }
.news-side-column > section { padding: 19px; }
.news-side-column section > header a { display: inline-flex; align-items: center; gap: 3px; color: #5d77a0; font-size: 10px; font-weight: 800; }
.news-side-column section > header a svg { width: 14px; height: 14px; }
#newsLatestDraws, #newsIndicatorList { display: grid; gap: 10px; margin-top: 14px; }
.news-latest-item { padding: 12px; background: #f7f9fb; border-left: 3px solid #b93649; }
.news-latest-item.blue { border-left-color: #2e6bb9; }
.news-latest-item header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.news-latest-item strong { font-size: 12px; }
.news-latest-item header span { color: #8190a4; font-size: 9px; }
.news-number-row { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.news-number-ball { min-width: 25px; height: 25px; display: grid; place-items: center; padding: 0 5px; color: #fff; font-size: 10px; font-weight: 900; background: #c63d4c; border-radius: 50%; }
.news-number-ball.back { background: #2f70bd; }
.news-latest-item.blue .news-number-ball { background: #2f70bd; }
.news-latest-item.blue .news-number-ball.back { background: #cf7e22; }
.news-indicator-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 12px 13px; background: #f7f9fb; border: 1px solid #e7ebf0; }
.news-indicator-item strong, .news-indicator-item small { display: block; }
.news-indicator-item strong { font-size: 11px; }
.news-indicator-item small { margin-top: 5px; color: #8793a4; font-size: 9px; }
.news-indicator-item em { align-self: center; color: var(--news-green); font-size: 15px; font-style: normal; font-weight: 900; }
.news-reference-note { display: flex; align-items: flex-start; gap: 12px; background: #fffaf0 !important; border-color: #eadbbd !important; }
.news-reference-note > svg { width: 24px; height: 24px; flex: 0 0 auto; color: var(--news-gold); }
.news-reference-note strong { font-size: 12px; }
.news-reference-note p { margin: 7px 0 0; color: #75684f; font-size: 10px; line-height: 1.7; }

.news-skeleton { min-height: 54px; background: #edf1f5; border-radius: 5px; animation: news-pulse 1.2s ease-in-out infinite alternate; }
.news-skeleton.large { min-height: 280px; border-radius: 0; }

@keyframes news-pulse { to { opacity: .48; } }

@media (max-width: 1180px) {
  .news-command { grid-template-columns: 1fr; }
  .news-command-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .news-category-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .news-feature-zone, .news-workspace { grid-template-columns: 1fr; }
  .news-side-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-reference-note { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .news-center-page { padding: 14px 12px 28px; }
  .news-command { min-height: 0; gap: 15px; padding: 19px 16px; }
  .news-command-copy h1 { font-size: 25px; }
  .news-command-copy span { margin-top: 7px; font-size: 12px; line-height: 1.6; }
  .news-command-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .news-command-metrics > div { min-width: 0; min-height: 62px; padding: 10px 8px; }
  .news-command-metrics small { font-size: 8px; }
  .news-command-metrics strong { margin-top: 7px; overflow-wrap: anywhere; font-size: 12px; }
  .news-category-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-refresh-button { width: 100%; }
  .news-featured > a { grid-template-columns: 1fr; }
  .news-feature-copy { padding: 24px 20px; }
  .news-feature-copy h2 { font-size: 21px; }
  .news-feature-signal { min-height: 150px; }
  .news-feed-panel { padding: 18px 15px; }
  .news-feed-item { grid-template-columns: 50px minmax(0, 1fr); gap: 12px; padding: 18px 0; }
  .news-feed-item > svg { display: none; }
  .news-feed-date strong { font-size: 18px; }
  .news-feed-copy h3 { font-size: 15px; }
  .news-side-column { grid-template-columns: 1fr; }
  .news-reference-note { grid-column: auto; }
}

@media (max-width: 380px) {
  .news-command { padding: 17px 14px; }
  .news-command-metrics strong { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .news-skeleton, .news-refresh-button.loading svg { animation: none; }
}