/* Большое ТЗ (13.09.2026, вечер). Подключается последним, поэтому перекрывает
   светлую тему браузера новостей и старую плашку пропуска.
   1. Новости в цветах темы приложения.
   2. Компактная плашка пропуска во всю ширину.
   3. Контракты «выше / ниже».
   4. Индикаторы графика.
   5. Своя редакция и аккаунты компаний игроков. */

/* ---------- 1. новости подтягивают тему приложения ---------- */
.nb, .nb-sheet {
  --news-ink: var(--fg);
  --news-muted: var(--fg-2);
  --news-blue: var(--accent);
  --news-line: var(--line);
}
.nb { background: var(--bg); color: var(--fg); }
.nb-bar { background: var(--bg-2); border-top: 0; border-bottom: 1px solid var(--line); }
.nb-btn { color: var(--fg-2); }
.nb-btn:active { background: var(--card-2); }
.nb-address { background: var(--card); color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line); }
.nb-address svg { color: var(--green); }
.nb-tabs { background: var(--bg-2); }
.nb-tab { color: var(--fg-2); }
.nb-tab[hidden] { display: none !important; }
.nb-tab.is-active { background: var(--bg); color: var(--accent); box-shadow: inset 0 3px var(--accent); }
.nb-page { background: var(--bg); color: var(--fg); scrollbar-color: var(--card-2) var(--bg); }
.nb-mast { border-bottom-color: var(--line); }
.nb-logo, .nb-logo span { color: var(--fg); }
.nb-logo .interface-icon { color: var(--accent); }
.nb-h { color: var(--fg); }
.nb-date, .nb-sub, .nb-foot, .nb-empty, .nb-card-title { color: var(--fg-2); }
.nb-card { background: var(--card); border-color: var(--line); }
.nb-time { color: var(--fg-3); }
.nb-mine { border-bottom-color: var(--line); }
.nb-mine-text { color: var(--fg); }
.nb :is(button, input, textarea, select, summary):focus-visible,
.nb-sheet :is(button, input, textarea, select, summary):focus-visible { outline-color: var(--accent); }

.nb-page .feed-item, .nb-sheet .feed-item { border-bottom-color: var(--line); }
.nb-page .feed-name, .nb-sheet .feed-name,
.nb-page .feed-text, .nb-sheet .feed-text { color: var(--fg); }
.nb-page .feed-label, .nb-sheet .feed-label { color: var(--accent); }
.nb-page .feed-time, .nb-sheet .feed-time { color: var(--fg-3); }
.nb-page .feed-badge, .nb-sheet .feed-badge { background: var(--card-2); color: var(--fg-2); }
.nb-page .feed-badge.is-official, .nb-sheet .feed-badge.is-official { background: rgba(58, 120, 194, .22); color: #7fb2ec; }
.nb-page .feed-badge.is-good, .nb-sheet .feed-badge.is-good { background: var(--green-dim); color: var(--green); }
.nb-page .feed-badge.is-bad, .nb-sheet .feed-badge.is-bad { background: var(--red-dim); color: var(--red); }
.nb-page .feed-badge.is-company, .nb-sheet .feed-badge.is-company { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.feed-badge.is-firm, .nb-page .feed-badge.is-firm, .nb-sheet .feed-badge.is-firm { background: rgba(90, 169, 255, .18); color: #8cc2ff; }
.nb-page .feed-coin, .nb-sheet .feed-coin { background: var(--card-2); border-color: var(--line); color: var(--fg); }
.nb-page .feed-source { background: var(--card-2); border-color: var(--line); color: var(--fg); }
.nb-page .feed-source.is-on { border-color: var(--green); }
.nb-page .feed-source span { color: var(--fg-2); }

.feed-compose-title, .feed-field { color: var(--fg-2); }
.feed-compose-title { color: var(--fg); }
.nb-page .feed-compose :is(textarea, select).input,
.nb-page .studio-compose :is(textarea, select).input,
.nb-page .feed-compose .input { background: var(--bg-2); color: var(--fg); border-color: var(--line); }
.nb-page .input::placeholder { color: var(--fg-3); }
.feed-compose select option, .studio-compose select option { background: var(--card); color: var(--fg); }
.nb-page .feed-compose button:disabled, .nb-page .feed-compose .btn[disabled] { background: var(--card-2); color: var(--fg-3); border-color: var(--line); }
.nb-page .feed-compose .btn-green, .nb-page .studio-compose .btn-green,
.nb-sheet .btn-green, .nb-sheet .btn-gold { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.nb-page .feed-compose .chip, .nb-page .studio-compose .chip { background: var(--card-2); color: var(--fg); border-color: var(--line); }
.nb-page .feed-compose .chip.is-active, .nb-page .studio-compose .chip.is-active { background: var(--accent); color: var(--bg); }
.nb-page .feed-hint { color: var(--fg-2); }
.nb-page .feed-link { color: var(--accent); }
.feed-as { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 12px; }
.feed-as .chip { min-height: 38px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.news-company-cta { background: linear-gradient(110deg, color-mix(in srgb, var(--accent) 14%, var(--card)), var(--card)); border-color: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--fg); }
.news-company-cta small { color: var(--fg-2); }
.news-company-cta > .interface-icon { color: var(--accent); }
.news-company-cta:active { background: var(--card-2); }

.modal:has(.nb-sheet) { --fg: inherit; --fg-2: inherit; --fg-3: inherit; --card: inherit; --card-2: inherit; --line: inherit; --accent: inherit; background: var(--card); color: var(--fg); }
.nb-sheet p, .nb-sheet .muted, .nb-sheet .row-sub, .nb-sheet .feed-prof-stats span { color: var(--fg-2); }
.nb-sheet h3 { color: var(--fg); }
.nb-sheet .input { background: var(--bg-2); color: var(--fg); border-color: var(--line); }
.nb-sheet .btn-flat { background: var(--card-2); color: var(--fg); border-color: var(--line); }
.nb-sheet .feed-color.is-active { border-color: var(--fg); box-shadow: 0 0 0 2px var(--card) inset; }
.feed-follow-state { color: var(--green); }
.feed-options { border-top-color: var(--line); }
.feed-options summary { color: var(--fg-2); }
.feed-options button { background: var(--red-dim); color: var(--red); border-color: transparent; }

.nb-back { color: var(--accent); }
.nb-profile { background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.nb-pava .ava { border-color: var(--card); }
.nb-follow { background: var(--accent); color: var(--bg); }
.nb-follow.is-on { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
.nb-follow.is-mine { background: var(--card-2); color: var(--fg-2); }
.nb-pname, .nb-pstats b, .nb-pbio { color: var(--fg); }
.nb-phandle, .nb-pstats { color: var(--fg-2); }
.nb-plink { color: var(--accent); }
.nb-ptabs { border-bottom-color: var(--line); }
.nb-ptabs span { color: var(--fg-2); }
.nb-ptabs span.is-active { color: var(--fg); box-shadow: inset 0 -3px 0 var(--accent); }
.nb-icon-pick { background: var(--card-2); color: var(--fg); }
.nb-icon-pick .nb-ico { stroke: var(--fg); }
.nb-icon-pick.is-active { border-color: var(--accent); background: var(--card); }
.nb-skel i { background: linear-gradient(90deg, var(--card) 0%, var(--card-2) 50%, var(--card) 100%); background-size: 200% 100%; }

/* ---------- 2. плашка пропуска: компактно и во всю ширину ---------- */
.passbar.pass-entry {
  width: 100%;
  margin: 0 0 12px;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 14px;
  border-radius: 20px;
}
.pass-entry-art { width: 40px; height: 56px; transform: rotate(-8deg); }
.pass-entry .passbar-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pass-entry .pass-entry-kicker { margin: 0; font-size: 9.5px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pass-entry .passbar-left { margin: 0; flex: none; font-size: 11px; }
.pass-entry .passbar-name { margin-top: 2px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pass-entry .passbar-mid { margin: 6px 0 5px; gap: 8px; }
.pass-entry .passbar-lvl { font-size: 17px; }
.pass-entry .passbar-lvl small { font-size: 11px; }
.pass-entry .passbar-bar { height: 6px; }
.pass-entry-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pass-entry .passbar-sub { min-width: 0; font-size: 11px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pass-entry-link { flex: none; margin: 0; gap: 4px; font-size: 12px; }
.pass-entry-link > span { font-size: 14px; }
@media (max-width: 350px) {
  .passbar.pass-entry { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 9px 12px; }
  .pass-entry-art { width: 34px; height: 48px; }
}

/* ---------- 3. контракты «выше / ниже» ---------- */
.pills.is-five .pill { font-size: 13px; padding: 11px 2px; }
.bo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bo-field { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 8px 10px 10px; }
.bo-label { display: block; margin-bottom: 6px; font-size: 11px; color: var(--fg-2); }
.bo-step { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; align-items: center; gap: 4px; }
.bo-step button { height: 34px; border-radius: 10px; background: var(--card-2); color: var(--fg); font-size: 19px; font-weight: 600; line-height: 1; }
.bo-step button:active { background: var(--line); }
.bo-step b, .bo-input { text-align: center; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bo-input { width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--fg); -moz-appearance: textfield; }
.bo-input::-webkit-outer-spin-button, .bo-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bo-input:focus { outline: none; }
.bo-chips { margin-top: 8px; flex-wrap: wrap; }
.bo-chips .chip { flex: 1 1 0; min-width: 0; white-space: nowrap; }
.bo-chips .chip.is-active { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.bo-payout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin: 12px 0; padding: 10px 12px; border-radius: 14px; background: var(--green-dim); color: var(--fg-2); font-size: 13px; }
.bo-payout b { color: var(--green); font-size: 15px; font-variant-numeric: tabular-nums; }
.bo-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bo-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 60px; border-radius: 16px; font-size: 18px; font-weight: 800; letter-spacing: .01em; transition: transform .12s var(--ease), filter .2s ease; }
.bo-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.bo-btn.is-up { background: linear-gradient(180deg, #3be383, #20b25e); color: #04240f; box-shadow: 0 6px 18px rgba(50, 215, 120, .22); }
.bo-btn.is-down { background: linear-gradient(180deg, #ff5f55, #db3128); color: #fff; box-shadow: 0 6px 18px rgba(255, 69, 58, .22); }
.bo-btn:active { transform: scale(.97); }
.bo-btn[disabled] { filter: grayscale(.7) brightness(.7); box-shadow: none; }
.bo-note { margin: 10px 2px 0; line-height: 1.45; }
.bo-list { margin-top: 12px; }
.bo-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line); }
.bo-list .card-title + .bo-row { border-top: 0; }
.bo-dir { flex: none; width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.bo-dir svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.bo-dir.is-up { background: var(--green-dim); color: var(--green); }
.bo-dir.is-down { background: var(--red-dim); color: var(--red); }
.bo-bar { height: 4px; margin-top: 6px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.bo-bar i { display: block; height: 100%; border-radius: 2px; background: var(--accent); transition: width .5s linear; }

/* вход в контракты на экране игр: широкая плитка на две клетки */
.game-tile.game-cube.is-bin { grid-column: 1 / -1; aspect-ratio: 2.1 / 1; }
.game-tile.is-bin { grid-column: 1 / -1; background: radial-gradient(ellipse at 85% 30%, rgba(50, 215, 120, .18), transparent 55%), radial-gradient(ellipse at 85% 80%, rgba(255, 69, 58, .16), transparent 55%), linear-gradient(135deg, #10161c, #0b0d10); }
.bin-art svg { display: block; width: 100%; height: 100%; }

/* каталог источников: сеткой, чтобы было видно все, и с поиском */
.feed-find { width: 100%; min-height: 44px; margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg-2); color: var(--fg); font-size: 15px; }
.feed-sources.is-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; overflow: visible; padding: 0; }
.nb-page .feed-sources.is-grid .feed-source { flex: none; min-width: 0; min-height: 0; padding: 10px 6px; }
.feed-sources.is-grid .feed-source b { overflow-wrap: anywhere; }

/* подсказка про пустые участки в городе */
.city-empty { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 12px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 18px; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 18%, var(--card)), var(--card)); color: var(--fg); text-align: left; }
.city-empty-main { flex: 1; min-width: 0; }
.city-empty-main b { display: block; font-size: 17px; line-height: 1.25; }
.city-empty-main span { display: block; margin-top: 4px; color: var(--fg-2); font-size: 13px; line-height: 1.4; }
.city-empty-main em { font-style: normal; font-weight: 700; color: var(--green); }
.city-empty-go { flex: none; padding: 10px 14px; border-radius: 12px; background: var(--accent); color: var(--bg); font-size: 14px; font-weight: 700; }
.city-empty:active { transform: scale(.99); }

/* ---------- 4. индикаторы ---------- */
.ind-bar { display: flex; gap: 6px; margin: 0 0 8px; overflow-x: auto; scrollbar-width: none; }
.ind-bar::-webkit-scrollbar { display: none; }
.ind-open, .ind-chip { flex: none; display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 11px; border-radius: 10px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ind-open { background: var(--card); border: 1px solid var(--line); color: var(--fg); }
.ind-open svg { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ind-chip { background: var(--card-2); color: var(--fg); }
.ind-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--ic); }
.ind-chip span { color: var(--fg-3); font-size: 15px; line-height: 1; }

.ind-modal { position: fixed; inset: 0; z-index: 5000; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, 0); transition: background .24s ease; }
.ind-modal[hidden] { display: none !important; }
.ind-modal.is-open { background: rgba(0, 0, 0, .58); }
.ind-panel { width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); border-radius: 22px 22px 0 0; background: var(--bg-2); color: var(--fg); transform: translateY(100%); transition: transform .3s var(--ease); }
.ind-modal.is-open .ind-panel { transform: none; }
.ind-panel h3 { margin: 0 0 4px; font-size: 21px; }
.ind-panel > p { margin: 0 0 6px; color: var(--fg-2); font-size: 13px; line-height: 1.45; }
.ind-group { margin: 16px 2px 8px; color: var(--fg-2); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.ind-row { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.ind-row .row-main { min-width: 0; }
.ind-row .row-main b { display: block; font-size: 14px; line-height: 1.3; }
.ind-row .row-main small { display: block; margin-top: 2px; color: var(--fg-2); font-size: 11.5px; line-height: 1.35; }
.ind-ico { flex: none; width: 40px; height: 40px; border-radius: 11px; background: var(--card-2); display: flex; align-items: center; justify-content: center; }
.ind-ico svg { width: 24px; height: 24px; fill: none; stroke: var(--ic); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ind-get { position: relative; flex: none; min-width: 96px; min-height: 38px; padding: 8px 12px; overflow: hidden; border-radius: 10px; background: var(--accent); color: var(--bg); font-size: 13px; font-weight: 700; }
.ind-get i { position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: var(--accent); }
.ind-get.is-loading { background: var(--card-2); color: var(--fg); }
.ind-get.is-loading i { animation: ind-dl 1.1s linear forwards; }
@keyframes ind-dl { to { width: 100%; } }
.ind-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ind-toggle { min-width: 96px; min-height: 38px; padding: 8px 12px; border-radius: 10px; background: var(--card-2); color: var(--fg-2); font-size: 13px; font-weight: 700; }
.ind-toggle.is-on { background: var(--green-dim); color: var(--green); }
.ind-del { padding: 2px 4px; color: var(--fg-3); font-size: 11px; }
.ind-panel .btn { width: 100%; margin-top: 14px; }

/* ---------- 5. редакция и компании игроков ---------- */
.studio-hero { margin: 12px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.studio-cover { height: 84px; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.studio-id { display: flex; align-items: flex-end; gap: 12px; margin-top: -30px; padding: 0 14px; }
.studio-id .ava { flex: none; width: 64px; height: 64px; border: 3px solid var(--card); border-radius: 18px; box-sizing: content-box; }
.studio-id > div:last-child { min-width: 0; padding-bottom: 2px; }
.studio-kicker { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.studio-name { margin: 2px 0 0; color: var(--fg); font: 800 22px/1.15 -apple-system, "Segoe UI", Roboto, sans-serif; overflow-wrap: anywhere; }
.studio-handle { color: var(--fg-2); font-size: 12px; }
.studio-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 14px; }
.studio-stats div { padding: 8px 4px; border-radius: 12px; background: var(--card-2); text-align: center; }
.studio-stats b { display: block; color: var(--fg); font-size: 17px; font-variant-numeric: tabular-nums; }
.studio-stats span { display: block; margin-top: 2px; color: var(--fg-2); font-size: 10.5px; line-height: 1.25; }
.studio-rubrics { flex-wrap: wrap; margin-bottom: 8px; }
.studio-rubrics .chip { flex: 0 0 auto; }
.studio-compose textarea.input { width: 100%; min-height: 96px; margin-bottom: 10px; padding: 12px; resize: none; font-size: 16px; line-height: 1.5; border-radius: 11px; }
.studio-compose select.input { appearance: none; width: 100%; min-height: 48px; padding: 10px 40px 10px 12px; border-radius: 11px; }
.studio-post { width: 100%; margin-top: 12px; }
.studio-colors { margin-top: 10px; flex-wrap: wrap; }

.nb-firm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0 14px 12px; }
.nb-firm div { padding: 8px 10px; border-radius: 12px; background: var(--card-2); min-width: 0; }
.nb-firm span { display: block; color: var(--fg-2); font-size: 11px; }
.nb-firm b { display: block; color: var(--fg); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-firm b.up { color: var(--green); }
.nb-firm b.down { color: var(--red); }
.nb-firm-sale { margin: 0 14px 12px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .ind-modal, .ind-panel, .bo-btn, .bo-bar i { transition: none; }
  .ind-get.is-loading i { animation: none; width: 100%; }
}