:root {
  color-scheme: light;
  --bg: #f6f4ef; --card: #fffefb; --raised: #ece9e1; --text: #1b1a17; --muted: #6b675e; --line: #e0dcd2;
  --accent: #b4322a; --accent-fill: #b4322a; --accent-text: #ffffff; --ok: #2e7d32; --bad: #b4322a;
  --wide: 1560px; --head: 72px; --shine: rgb(255 255 255 / .55);
  --heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  color-scheme: dark;
  --shine: rgb(255 255 255 / .07);
  --bg: #151412; --card: #1e1d1a; --raised: #2a2824; --text: #f1eee7; --muted: #a29d91; --line: #322f2a;
  --accent: #e0584e; --accent-fill: #c23d33; --accent-text: #ffffff; --ok: #6cc070; --bad: #ef7a70;
} }
:root[data-theme="dark"] {
  color-scheme: dark;
  --shine: rgb(255 255 255 / .07);
  --bg: #151412; --card: #1e1d1a; --raised: #2a2824; --text: #f1eee7; --muted: #a29d91; --line: #322f2a;
  --accent: #e0584e; --accent-fill: #c23d33; --accent-text: #ffffff; --ok: #6cc070; --bad: #ef7a70;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }   /* страница не сдвигается вбок, когда появляется полоса прокрутки */
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.45 var(--sans); }
[hidden] { display: none !important; }
h1, h2, h3, .brand { letter-spacing: -0.01em; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--muted); }

.top { position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line); }
.top-row { display: flex; align-items: center; gap: 16px; max-width: var(--wide); margin: 0 auto; padding: 12px 16px 8px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 20px/1 var(--heading); white-space: nowrap; }
.search { flex: 0 1 300px; min-width: 160px; }
.search input { width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.info { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 18px; min-width: 0; font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
.info b { color: var(--text); font-weight: 600; }
.i-rates { display: flex; gap: 12px; }
.i-rate { color: var(--text); }
.i-rate i { margin-left: 3px; font-size: 9px; font-style: normal; vertical-align: 1px; }
.i-rate i.up { color: var(--ok); }
.i-rate i.down { color: var(--bad); }
.i-weather { color: var(--text); }
.i-w-icon { font-size: 15px; }
.credit { margin: 0; padding: 0 4px; font-size: 12px; }
.credit a, .credit-foot a { color: inherit; }
.credit-foot { display: none; }
/* Без внешней обводки; чтобы фокус был заметен с клавиатуры, чуть темнеет рамка поля */
.search input:focus, .search input:focus-visible { outline: 0; border-color: var(--muted); }
.icon-btn { flex: none; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); cursor: pointer; }
.icon-btn:hover { background: var(--raised); }
.tabs { display: flex; gap: 4px; max-width: var(--wide); margin: 0 auto; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: none; padding: 8px 12px 10px; border-bottom: 3px solid transparent; color: var(--muted); font-weight: 600; text-decoration: none; }
.tabs a:hover { color: var(--text); }
.tabs a[aria-current="true"] { color: var(--text); border-bottom-color: var(--accent); }

.layout { display: grid; grid-template-columns: 232px minmax(0, 1fr) 320px; gap: 20px; align-items: start; max-width: var(--wide); margin: 0 auto; padding: 16px; }
.center { min-width: 0; }
.page-head { margin-bottom: 12px; }
.page-head h1 { margin: 0 0 2px; font: 700 26px/1.2 var(--heading); }

.page { min-width: 0; }

.side, .rail { position: sticky; top: var(--head); max-height: calc(100vh - var(--head) - 16px); overflow-y: auto; scrollbar-width: none; }
.side::-webkit-scrollbar, .rail::-webkit-scrollbar, .dd-list::-webkit-scrollbar { display: none; }
.side-sections, .side-regions { display: grid; gap: 1px; }
.side a { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 6px; color: var(--text); font-size: 15px; line-height: 1.45; text-decoration: none; }

.side a:hover { background: var(--raised); }
.side a[aria-current="true"] { background: var(--accent-fill); color: var(--accent-text); font-weight: 600; }
.side-sections a { font-weight: 600; font-size: 16px; }
.side .n { color: var(--muted); font-size: 13px; }
.side a[aria-current="true"] .n { color: inherit; }
.side-title { margin: 16px 0 4px; padding: 0 10px; font-size: 13px; font-weight: 700; color: var(--muted); }

.rail { display: grid; gap: 12px; }
.panel { padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.panel h2 { margin: 0 0 10px; font: 700 17px/1.25 var(--heading); }
.panel-picker { margin-top: 10px; }
.panel-picker .dd-button { width: 100%; min-width: 0; height: 36px; font-size: 14px; }
.panel-note { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
.panel-actions { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; font-size: 14px; }
.panel > .link { font-size: 14px; display: block; margin-bottom: 8px; }
.mini-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mini-list li { min-height: 58px; }
/* Две строки заголовка у всех пунктов: высота блока не зависит от длины заголовков, колонка не прыгает */
.mini-list a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-height: 38px; font-size: 14.5px; font-weight: 600; line-height: 1.3; text-decoration: none; overflow-wrap: anywhere; }
.mini-list a:hover { text-decoration: underline; text-underline-offset: 2px; }
.mini-meta { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.field { display: grid; gap: 4px; font-size: 13px; color: var(--muted); min-width: 0; }
.status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-left: auto; min-height: 36px; font-size: 14px; }
.link { padding: 0; border: 0; background: none; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link:disabled { color: var(--muted); cursor: default; }
.new-banner { display: block; width: 100%; margin-bottom: 12px; padding: 10px; border: 0; border-radius: 8px; background: var(--accent-fill); color: var(--accent-text); font-weight: 600; cursor: pointer; }

.list { display: grid; gap: 10px; align-content: start; min-height: 100vh; }
/* Место под блоки, которые заполняет скрипт: при первой отрисовке ничего не сдвигается */
#source-slot, #region-slot { min-height: 38px; min-width: 230px; }
#my-region { min-height: 156px; }
.has-region #my-region { min-height: 468px; }
.story { display: grid; grid-template-columns: minmax(0, 1fr) 168px; gap: 16px; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.story.no-image { grid-template-columns: minmax(0, 1fr); }
.meta { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-bottom: 6px; font-size: 13px; color: var(--muted); }
.meta b { color: var(--accent); font-weight: 600; }
.story h2 { margin: 0 0 6px; font: 700 19px/1.28 var(--heading); overflow-wrap: anywhere; }
.story h2 a { text-decoration: none; }
.story h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.story p { margin: 0; color: var(--muted); font-size: 15px; overflow-wrap: anywhere; }
.also { margin-top: 8px; font-size: 13px; color: var(--muted); }
.also a { margin-left: 6px; color: var(--accent); }
.thumb { display: block; }
.frame { position: relative; display: block; overflow: hidden; border-radius: 6px; background-color: var(--raised); }
.frame-thumb { aspect-ratio: 16 / 10; }
.frame-wide { aspect-ratio: 16 / 9; border-radius: 8px; }
.frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.js .frame img { opacity: 0; transition: opacity .25s; }
.js .frame.loaded img { opacity: 1; }
.frame.contain img { object-fit: contain; }

/* Перелив: и в скелетоне, и в рамке фото */
.shimmer, .sk { background-color: var(--raised); background-image: linear-gradient(100deg, transparent 20%, var(--shine) 50%, transparent 80%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.sk { border-radius: 6px; }
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .shimmer, .sk { animation: none; background-image: none; } .frame img { transition: none; } }

/* Размеры скелетона те же, что у настоящих блоков */
.sk-meta { width: 40%; height: 14px; margin: 3px 0 9px; }
.sk-h { height: 19px; margin: 3px 0 5px; }
.sk-text { margin-top: 12px; }
.sk-p { height: 15px; margin-bottom: 7px; }
.sk-h1 { height: 30px; margin: 4px 0 6px; }
.sk-h1 + .sk-h1 { margin-bottom: 20px; }
.sk-read { height: 18px; margin-bottom: 11px; }
.sk-article { margin-bottom: 14px; }
.sk-mini { height: 14px; margin-bottom: 5px; }
.sk-mini + .sk-mini { margin-bottom: 6px; }
.sk-mini-meta { width: 45%; height: 11px; }
.side-sk { padding: 7px 10px; }
.sk-side { height: 22px; }
.w70 { width: 70%; } .w90 { width: 90%; } .w92 { width: 92%; } .w96 { width: 96%; } .w100 { width: 100%; }

.meta .hot { padding: 0 6px; border-radius: 4px; background: var(--accent-fill); color: var(--accent-text); font-weight: 600; }
.back { display: inline-block; margin-bottom: 14px; font-size: 15px; }
/* Карточка статьи шириной с ленту; на очень широком экране текст идёт ровной колонкой по центру, чтобы строки не были слишком длинными */
.reader { padding: 24px max(24px, calc((100% - 780px) / 2)); background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.reader h1 { margin: 4px 0 16px; font: 700 30px/1.2 var(--heading); overflow-wrap: anywhere; }
.reader h2 { margin: 24px 0 10px; font: 700 21px/1.3 var(--heading); }
.reader p { margin: 0 0 14px; font-size: 18px; line-height: 1.6; overflow-wrap: anywhere; }
.reader p.li { padding-left: 4px; }
.reader p.note { font-size: 15px; }
.reader blockquote { margin: 0 0 14px; padding: 2px 0 2px 14px; border-left: 3px solid var(--accent); font-size: 18px; line-height: 1.6; }
.reader figure { margin: 0 0 16px; }
.reader figcaption { margin-top: 6px; font-size: 13px; color: var(--muted); }
.reader-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.original { display: inline-flex; align-items: center; height: auto; min-height: 40px; padding: 8px 16px; text-decoration: none; }

.reader p.lead { font-size: 17px; color: var(--muted); }
.mentions { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.mention { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.mention:last-child { border-bottom: 0; }
.mention h3 { margin: 0 0 6px; font: 700 18px/1.3 var(--heading); overflow-wrap: anywhere; }
.reader .mention p { margin: 0 0 8px; font-size: 16px; line-height: 1.5; }
.ext { color: var(--accent); font-size: 14px; }
.story-links { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 15.5px; }
.story-links a { font-weight: 600; }
.story-links span { font-size: 13px; white-space: nowrap; }

.empty { padding: 40px 16px; text-align: center; color: var(--muted); background: var(--card); border: 1px dashed var(--line); border-radius: 10px; }
.empty .btn { margin-top: 12px; }
.more { display: flex; justify-content: center; margin: 16px 0; }
.btn { height: 40px; padding: 0 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font-weight: 600; cursor: pointer; }
.btn:hover { background: var(--raised); }
.foot { margin-top: 24px; font-size: 13px; }

.sheet { width: min(620px, calc(100vw - 32px)); max-height: min(80vh, 720px); padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); }
.sheet::backdrop { background: rgb(0 0 0 / .5); }
.sheet-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--card); border-bottom: 1px solid var(--line); }
.sheet-head h2 { margin: 0; font: 700 20px/1.2 var(--heading); }
.src-group { margin: 0; padding: 12px 16px 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.src { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 7px 16px; font-size: 15px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.dot.ok { background: var(--ok); } .dot.bad { background: var(--bad); }
.src small { display: block; color: var(--bad); }
.src span.n { color: var(--muted); font-size: 13px; white-space: nowrap; }

/* Средний экран: без юаня и дня недели в шапке */
@media (max-width: 1199px) {
  .i-cny { display: none; }
  .info { gap: 12px; font-size: 13px; }
  .search { flex-basis: 200px; }
}
/* Очень широкий экран: занимаем его колонками, а не пустыми полями */
@media (min-width: 1700px) {
  :root { --wide: 1840px; }
  .layout { grid-template-columns: 280px minmax(0, 1fr) 400px; gap: 24px; }
}
/* Широкий экран: разделы в левом меню, вкладки и выбор региона над лентой не нужны */
@media (min-width: 1200px) {
  /* Логотип шириной с левую колонку: поиск начинается там же, где средний блок */
  .top-row { gap: 20px; }
  .brand { flex: 0 0 232px; }
  .tabs { display: none; }
  #region-field { display: none; }
}
@media (min-width: 1700px) {
  .top-row { gap: 24px; }
  .brand { flex-basis: 280px; }
}
/* Средний: лента и правая колонка, разделы — вкладками */
@media (max-width: 1199px) {
  :root { --head: 112px; }
  .layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .side { display: none; }
  .has-region #my-region { min-height: 492px; }
}
/* Узкий: одна колонка, «Мой регион» над лентой, в статье колонка не нужна */
@media (max-width: 859px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .rail { position: static; max-height: none; order: -1; }
  #top-panel { display: none; }
  .reading .rail { display: none; }
  .story p, .sk-text { display: none; }
  .has-region #my-region { min-height: 332px; }
  #source-slot, #region-slot { min-width: 0; }
}
/* Узкий экран: блок отдельной строкой, прокручивается вбок без полосы */
@media (max-width: 859px) {
  .top-row { flex-wrap: wrap; gap: 8px 12px; }
  .brand { flex: 1; }
  .search { order: 3; flex: 1 1 100%; }
  .info { order: 4; flex: 1 1 100%; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .info::-webkit-scrollbar { display: none; }
  .i-cny { display: inline; }
}
/* На телефоне подпись источников — внизу страницы, а не над лентой */
@media (max-width: 859px) {
  .credit { display: none; }
  .credit-foot { display: inline; }
}
@media (max-width: 480px) {
  #refresh { display: none; }   /* лента обновляется сама */
  .i-cny { display: none; }
  .info { gap: 10px; font-size: 13px; }
  .i-rates { gap: 8px; }
  .tabs { gap: 0; padding: 0 8px; }
  .tabs a { padding: 8px 8px 10px; font-size: 15px; }
}
@media (max-width: 620px) {
  .sk-story { min-height: 160px; }
  .top-row { flex-wrap: wrap; gap: 10px; }
  .brand { flex: 1; }
  .search { order: 3; flex-basis: 100%; }
  .filters { display: grid; grid-template-columns: minmax(0, 1fr); }
  .field .dd-button { width: 100%; }
  .status { margin-left: 0; }
  .story { grid-template-columns: minmax(0, 1fr) 96px; gap: 12px; padding: 12px; }
  .story h2 { font-size: 17px; }
  .story p, .sk-text { display: none; }
  .reader { padding: 16px; }
  .reader h1 { font-size: 25px; }
  .reader p, .reader blockquote { font-size: 17px; }
}

/* Выпадающие списки */
.dd-button { position: relative; display: block; min-width: 230px; max-width: 100%; height: 38px; padding: 0 34px 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); font-size: 15px; text-align: left; cursor: pointer; transition: border-color .12s, background-color .12s; }
.dd-button:hover { background: var(--raised); }
.dd-button[aria-expanded="true"] { border-color: var(--accent); }
.dd-button::after { content: ""; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .12s, margin-top .12s; }
.dd-button[aria-expanded="true"]::after { margin-top: -2px; transform: rotate(-135deg); }
.dd-text { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dd-pop { position: fixed; z-index: 20; display: flex; flex-direction: column; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgb(0 0 0 / .18); }
.dd-pop[hidden] { display: none; }
.dd-filter { flex: none; height: 34px; margin-bottom: 4px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); font-size: 14px; }
.dd-filter[hidden] { display: none; }
.dd-filter:focus { outline: 0; border-color: var(--accent); }
.dd-list { flex: 1; min-height: 0; margin: 0; padding: 0; overflow-y: auto; list-style: none; scrollbar-width: none; }
.dd-list:focus { outline: 0; }
.dd-list [role=option] { position: relative; padding: 7px 28px 7px 10px; border-radius: 6px; font-size: 14.5px; line-height: 1.3; cursor: pointer; overflow-wrap: anywhere; }
.dd-list [role=option].active { background: var(--raised); }
.dd-list [role=option][aria-selected="true"] { color: var(--accent); font-weight: 600; }
.dd-list [role=option][aria-selected="true"]::after { content: ""; position: absolute; right: 12px; top: 50%; width: 5px; height: 10px; margin-top: -7px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); }
.dd-none { padding: 10px; font-size: 14px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .dd-button, .dd-button::after { transition: none; } }