body { font-family: system-ui, sans-serif; margin: 0; background: #0f1115; color: #e8e8e8; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; background: #171a21; }
.topbar-actions { display: flex; align-items: center; gap: 0.8rem; }
.sound-btn { background: none; border: 1px solid #2a2f3a; border-radius: 6px; padding: 0.2rem 0.5rem; font-size: 1.1rem; cursor: pointer; color: #c9ced8; }
.sound-btn:hover { background: #1c202a; }
.sound-btn--pending { animation: sound-pulse 1.6s ease-in-out infinite; }
@keyframes sound-pulse { 50% { border-color: #6c8cff; } }
.wallet-count { font-size: 0.85rem; color: #c9ced8; white-space: nowrap; }
.topbar h1 { margin: 0; font-size: 1.2rem; }
#wallets { padding: 1rem 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; }

.wallet-block { background: #171a21; border-radius: 0.6rem; overflow: hidden; }
.wallet-row { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: baseline; padding: 0.8rem 1.2rem; cursor: pointer; }
.wallet-row:hover { background: #1c202a; }
.wallet-row .addr { font-weight: 600; }
.wallet-row .wallet-name { font-weight: 700; font-size: 1.05em; }
/* ТЗ 30.09.2026: бейдж "БОТ" рядом с меткой кошелька (app.js::buildBotBadge). */
.bot-badge {
  display: inline-block; margin-left: 0.5rem; padding: 0.05rem 0.45rem; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; vertical-align: middle; cursor: help;
  background: rgba(255, 159, 67, 0.14); color: #ff9f43; border: 1px solid rgba(255, 159, 67, 0.45);
}
/* ТЗ-3: пометка "история загружается" (app.js::buildHistoryBadge). */
.history-badge {
  display: inline-block; margin-left: 0.5rem; padding: 0.05rem 0.45rem; border-radius: 999px;
  font-size: 0.7rem; font-weight: 600; vertical-align: middle; cursor: help;
  background: rgba(90, 160, 255, 0.12); color: #6aa8ff; border: 1px solid rgba(90, 160, 255, 0.4);
}
.wallet-row .wallet-addr-sub { font-weight: 400; font-size: 0.85em; color: #6a7080; }
.wallet-row .chevron { margin-left: auto; color: #6a7080; }
.stat { font-size: 0.85rem; color: #9aa0aa; }
.stat b { display: block; font-size: 1.05rem; color: #e8e8e8; }
/* ТЗ "доработки визуала дашборда v2" (задача 2, 21.08.2026): .pnl-pos/
   .pnl-neg сами по себе (специфичность 0,1,0) слабее .stat b (0,1,1) --
   JS уже навешивал верный класс (см. app.js::buildWalletBlock/
   buildRecentStatsBar), но цвет молча проигрывал каскаду, текст всегда
   оставался белым независимо от знака. `.stat b.pnl-pos`/`.stat b.pnl-neg`
   (0,2,1) гарантированно перебивают `.stat b`, независимо от порядка
   правил в файле. */
.stat b.pnl-pos, .pnl-pos { color: #3ddc84; }
.stat b.pnl-neg, .pnl-neg { color: #ff5c5c; }
/* ТЗ 24.09.2026: прогноз карточки с result_pending -- серым, не как факт. */
.pnl-pending { color: #8a8f98; }

.pnl-value-row { display: flex; align-items: center; gap: 0.4rem; }
.pnl-sparkline { flex: none; display: block; }
.pnl-sparkline-line { fill: none; stroke-width: 1.5; }
.pnl-sparkline-up { stroke: #3ddc84; }
.pnl-sparkline-down { stroke: #ff5c5c; }

/* Короткая подсветка карточки при появлении новой сделки/цикла у кошелька
   между двумя poll-тиками (ТЗ "Анимация подсветки новой сделки", 16.08.2026)
   -- один плавный импульс, не мигание. */
.wallet-block--flash { background: #24422f; transition: background 1.8s ease; }
.wallet-block { transition: background 1.8s ease; }

.positions-wrap { border-top: 1px solid #2a2f3a; padding: 0.6rem 1.2rem 1rem; }
.positions-empty { color: #9aa0aa; padding: 0.6rem 0; }
.positions-table { width: 100%; border-collapse: collapse; }
.positions-table th { text-align: left; font-size: 0.75rem; color: #8890a0; font-weight: 500; padding: 0.4rem 0.6rem; border-bottom: 1px solid #2a2f3a; }
.positions-table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid #22262f; vertical-align: top; }
.position-row { cursor: pointer; }
.position-row:hover { background: #1c202a; }
.position-row .market { font-weight: 500; }
.position-row .market a { color: inherit; text-decoration: none; }
.position-row .market a:hover { text-decoration: underline; }
.position-row .outcome { color: #9aa0aa; }
.odds { font-weight: 700; color: #ffd166; }

/* Статус-"таблетки" (ТЗ "доработки дашборда v2", задача 7, 20.08.2026) --
   единый визуальный язык для status-бейджей циклов (badge) и live-badge
   рынка: закруглённая пилюля, цветной индикатор-точка перед текстом,
   тонкая цветная обводка того же оттенка (не просто заливка) -- стиль
   торговых терминалов, статус считывается с первого взгляда, не читая
   текст. */
.badge, .live-badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.72rem;
  font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  white-space: nowrap; border: 1px solid transparent;
}
.badge::before, .live-badge::before {
  content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; flex: none;
  background: currentColor;
}
.badge.open { background: rgba(61, 220, 132, 0.12); color: #3ddc84; border-color: rgba(61, 220, 132, 0.4); }
.badge.closed { background: rgba(138, 148, 166, 0.12); color: #9aa4b8; border-color: rgba(138, 148, 166, 0.35); }
.badge.resolved-closed { background: rgba(217, 178, 92, 0.14); color: #d9b25c; border-color: rgba(217, 178, 92, 0.4); }
/* ⚠️ НЕ ИСПОЛЬЗУЕТСЯ с ТЗ 31.08.2026: dust-закрытие больше не показывается
   отдельным бейджем (app.js рендерит его как обычный `badge closed`).
   Правило оставлено для отката -- вернуть класс `dust-closed` и текст в
   app.js::buildPositionRow. Раньше -- фиолетовый, шестой отдельный оттенок
   палитры, чтобы дребезг не путался с "закрыто по резолву". */
.badge.dust-closed { background: rgba(168, 132, 224, 0.14); color: #a884e0; border-color: rgba(168, 132, 224, 0.4); }
/* ТЗ v1.30: "Ожидает резолва" -- НОВЫЙ, отдельный сигнал от resolved-closed
   (золотой): та метка -- про зависшую позицию КОШЕЛЬКА, эта -- про сам
   РЫНОК (событие по календарю кончилось, Polymarket ещё не подтвердил
   исход) -- намеренно другой оттенок, розово-красный, не спутать по цвету.
   Не пересекается с уже занятыми: зелёный/серый/золотой/фиолетовый(неисп.)/
   бирюзовый/синий выше. */
.badge.awaiting-resolution { background: rgba(224, 108, 138, 0.14); color: #e06c8a; border-color: rgba(224, 108, 138, 0.4); }

/* ⚠️ Сверка палитры (ТЗ "доработки визуала дашборда v2", задача 4,
   21.08.2026): до этой правки live-badge.live (рынок сейчас идёт вживую)
   был КРАСНЫМ -- после задачи 1 (вкладка Finished тоже красная) слово
   "Live" на экране означало бы зелёный в одном месте (вкладка) и красный
   рядом с ним же в другом (бейдж рынка внутри карточки) -- прямая
   коллизия смысла, не просто похожие оттенки. Первая попытка (оранжевый)
   отклонена САМ СЕБЯ по той же проверке -- оказался слишком близко по
   тону к золотому resolved-closed (#d9b25c), новая коллизия вместо
   старой. Итог -- бирюзовый: дальше по кругу и от зелёного/красного
   (Live/Finished), и от золотого (resolved-closed), и от синего prematch
   (тот заметно темнее/приглушённее) -- пять статусов, пять чётко
   различимых оттенков разом. */
.live-badge { margin-left: 0.5rem; vertical-align: middle; }
.live-badge.live { background: rgba(34, 211, 238, 0.14); color: #22d3ee; border-color: rgba(34, 211, 238, 0.45); }
.live-badge.live::before { animation: livePulse 1.6s ease-in-out infinite; }
.live-badge.prematch { background: rgba(110, 168, 255, 0.12); color: #6ea8ff; border-color: rgba(110, 168, 255, 0.4); }

@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.trades-row td { background: #12141a; padding: 0.6rem 1rem; }
.trades-panel table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.trades-panel th, .trades-panel td { padding: 0.25rem 0.4rem; text-align: left; }
.trades-panel th { color: #8890a0; font-weight: 500; }
.trade-buy-hint { display: block; font-size: 0.7rem; color: #8890a0; }
.trade-fee-hint { display: block; font-size: 0.7rem; color: #8890a0; }

.wallet-tabs { display: flex; gap: 0.5rem; border-top: 1px solid #2a2f3a; padding: 0.6rem 1.2rem; }
.tab-btn {
  background: none; border: 1px solid transparent; color: #9aa0aa; font: inherit;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
  padding: 0.3rem 0.9rem; cursor: pointer; border-radius: 999px; display: inline-flex;
  align-items: center; gap: 0.4rem;
}
.tab-btn::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; flex: none; }
.tab-btn:hover { background: #1c202a; }
/* Live -- всегда первая вкладка (см. app.js::buildWalletTabs), зелёный
   акцент в активном состоянии. Finished -- вторая, КРАСНЫЙ (ТЗ
   "доработки визуала дашборда v2", задача 1, 21.08.2026 -- было
   приглушённо-серым, сливалось с фоном и не читалось как отдельное
   состояние; теперь оба состояния одинаково яркие, различаются только
   цветом, не яркостью). */
.tab-btn:first-child.active { color: #3ddc84; background: rgba(61, 220, 132, 0.12); border-color: rgba(61, 220, 132, 0.4); }
.tab-btn:last-child.active { color: #ff5c5c; background: rgba(255, 92, 92, 0.12); border-color: rgba(255, 92, 92, 0.4); }

.history-table { width: 100%; border-collapse: collapse; }
.history-table th { text-align: left; font-size: 0.75rem; color: #8890a0; font-weight: 500; padding: 0.4rem 0.6rem; border-bottom: 1px solid #2a2f3a; }
.history-table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid #22262f; vertical-align: top; }
.history-table .market { font-weight: 500; }
.history-table .outcome { color: #9aa0aa; font-size: 0.85rem; }
.history-table a { color: #6ea8ff; }
.history-panel { padding: 0.6rem 1.2rem 1rem; }
.history-stats { display: flex; gap: 1.5rem; padding: 0.6rem 1.2rem 0; }
.history-empty, .history-loading { color: #9aa0aa; padding: 0.6rem 1.2rem 1rem; }

.history-pagination { display: flex; align-items: center; gap: 0.3rem; padding: 0.8rem 0 0; }
.page-btn {
  background: none; border: 1px solid #2a2f3a; color: #9aa0aa; font: inherit;
  font-size: 0.8rem; min-width: 2rem; padding: 0.25rem 0.5rem; cursor: pointer;
  border-radius: 6px;
}
.page-btn:hover:not(:disabled) { background: #1c202a; }
.page-btn.active { color: #6ea8ff; background: rgba(110, 168, 255, 0.12); border-color: rgba(110, 168, 255, 0.4); cursor: default; }
.page-btn:disabled:not(.active) { opacity: 0.4; cursor: default; }
.page-ellipsis { color: #8890a0; padding: 0 0.2rem; }
.history-error { color: #ff8a8a; padding: 0.6rem 1.2rem 1rem; }

.win-cell { min-width: 6rem; }
.win-amount { display: block; font-weight: 700; }
.win-label { display: block; font-size: 0.7rem; color: #9aa0aa; }

.review-flag-cell { text-align: center; }
.review-flag-cell input[type="checkbox"] { width: 1.1rem; height: 1.1rem; cursor: pointer; }

.top-tabs { display: flex; gap: 0.5rem; padding: 0.7rem 1.5rem; background: #171a21; }
.top-tab-btn {
  background: none; border: 1px solid transparent; color: #9aa0aa; font: inherit;
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.4rem 1.1rem;
  cursor: pointer; border-radius: 999px;
}
.top-tab-btn:hover { background: #1c202a; }
.top-tab-btn.active { color: #e8e8e8; background: #22262f; border-color: #3a4150; }

.review-columns { display: flex; gap: 1rem; padding: 1rem 1.5rem; }
.review-column { flex: 1 1 0; background: #171a21; border-radius: 0.6rem; padding: 0.8rem 1rem; min-width: 0; }
.review-column h2 { margin: 0 0 0.6rem; font-size: 1rem; }
.review-card-wrap { border-bottom: 1px solid #22262f; }
.review-card-wrap:last-child { border-bottom: none; }
.review-card { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.8rem; padding: 0.6rem 0.4rem; cursor: pointer; }
.review-card:hover { background: #1c202a; }
.review-card .market { font-weight: 500; flex: 1 1 12rem; }
.review-card .market a { color: inherit; text-decoration: none; }
.review-card .market a:hover { text-decoration: underline; }
.review-card .wallet-sub { color: #6a7080; font-size: 0.8rem; }
.review-card-trades { background: #12141a; padding: 0.4rem 0.4rem 0.8rem; }
/* Пустое состояние колонки (ТЗ "доработки визуала дашборда v2", задача 3,
   21.08.2026) -- было голым серым текстом в углу, теперь явный
   placeholder: пунктирная рамка вокруг области, текст по центру. */
.review-empty {
  color: #6a7080; padding: 1.6rem 0.8rem; text-align: center;
  border: 1px dashed #2a2f3a; border-radius: 0.5rem;
}

.login-body { display: flex; align-items: center; justify-content: center; height: 100vh; }
.login-form { display: flex; flex-direction: column; gap: 0.6rem; width: 20rem; }
.login-form .error { color: #ff5c5c; min-height: 1.2em; }

/* ТЗ-2: экран первого расчёта. */
.warming { color: #9aa0aa; padding: 1.5rem; text-align: center; }

/* ТЗ-2.1: счётчик ставок и нумерованная пагинация LIVE/FINISHED. */
.bets-counter { color: #8890a0; font-size: 0.8rem; padding: 0.5rem 0.6rem 0.2rem; }
.pager-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; padding: 0.6rem 0.6rem 0.2rem; }
.pager-bar .history-pagination { padding: 0; }
.pager-goto, .pager-size { display: flex; align-items: center; gap: 0.35rem; color: #8890a0; font-size: 0.8rem; }
.pager-goto-input {
  width: 4.2rem; background: #12141a; border: 1px solid #3a4150; color: #e8e8e8; font: inherit;
  font-size: 0.8rem; padding: 0.25rem 0.45rem; border-radius: 0.4rem;
}
.pager-goto-input.invalid { border-color: #ff5c5c; }
.pager-goto-hint { color: #ff5c5c; }

.wallets-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0.6rem 1.5rem 0; }
.toolbar-btn {
  background: #171a21; color: #c9ced8; border: 1px solid #2a2f3a; border-radius: 6px;
  padding: 0.35rem 0.8rem; font-size: 0.85rem; cursor: pointer;
}
.toolbar-btn:hover { background: #1c202a; }
.wallet-add-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; flex-basis: 100%; }
.wallet-add-input, .wallet-label-input {
  background: #0f1116; color: #e8e8e8; border: 1px solid #2a2f3a; border-radius: 6px;
  padding: 0.35rem 0.6rem; font-size: 0.85rem;
}
.wallet-add-input { flex: 1 1 22rem; min-width: 12rem; }
.wallet-label-input { flex: 0 1 16rem; }
.wallet-add-confirm { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.wallet-confirm-text { white-space: pre-line; flex-basis: 100%; color: #c9ced8; font-size: 0.85rem; }
.wallets-status { flex-basis: 100%; white-space: pre-line; font-size: 0.85rem; padding: 0.4rem 0.7rem; border-radius: 6px; background: #171a21; color: #c9ced8; }
.wallets-status.ok { color: #3ddc84; }
.wallets-status.err { color: #ff6b6b; }
.wallet-del-btn {
  background: transparent; color: #8a94a6; border: 1px solid #2a2f3a; border-radius: 6px;
  padding: 0.15rem 0.6rem; font-size: 0.75rem; cursor: pointer; align-self: center;
}
.wallet-del-btn:hover { color: #ff6b6b; border-color: #ff6b6b; }
.toolbar-btn:disabled, .wallet-add-input:disabled, .wallet-label-input:disabled { opacity: 0.5; cursor: default; }