/* Тёмная тема по скриншоту конкурента: тёмная карточка, синяя полоса слева,
   капитал оранжевым, метки событий цветом на тёмной подложке.

   Все размеры в rem: масштаб интерфейса задаёт один font-size у html */

:root {
  --bg: #07090d;
  --panel: #0f141c;
  --panel-hover: #151d29;
  --border: #1c2430;
  --border-strong: #2b3646;
  --row-line: #141b26;
  --field: #0a0e14;
  --accent: #3b82f6;
  --accent-hover: #2f6fdc;
  --focus: 0 0 0 3px rgba(59, 130, 246, .35);
  --text: #dde2ea;
  --muted: #7a8596;
  --dim: #4d5768;
  --orange: #f5a524;
  --yellow: #eab308;
  --green: #22c55e;
  --red: #ef4444;
  --purple: #a78bfa;
  --radius: 8px;
  --control-h: 2.3rem;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: dark;
}

/* Базовый размер шрифта: всё остальное считается от него */
html { font-size: 17px; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}

a { color: var(--text); text-decoration: none; }
a:hover { color: #fff; text-decoration: underline; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; }

main { max-width: 1520px; margin: 0 auto; padding: 1.25rem 1.5rem 2.5rem; }

/* --- Шапка --- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding: .6rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.brand { font-weight: 700; font-size: 1.1rem; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.topbar nav { display: flex; gap: .4rem; }
.topbar nav a { color: var(--muted); padding: .35rem .7rem; border-radius: 6px; }
.topbar nav a:hover { color: var(--text); background: var(--panel-hover); text-decoration: none; }
.topbar nav a.active { color: var(--text); background: #18212e; box-shadow: inset 0 -2px 0 var(--accent); }
.topbar .search { margin-left: auto; }
/* Переключатель звука: выключенный и придержанный браузером приглушены */
.topbar .sound { height: auto; padding: .2rem .35rem; background: none; border: none; font-size: 1.05rem; line-height: 1; }
.topbar .sound:hover { background: var(--panel-hover); }
.topbar .sound.off, .topbar .sound.blocked { opacity: .45; }
.topbar .search input { width: 26rem; max-width: 100%; }

/* --- Поля, селекты, кнопки, флажки --- */

input, select, button {
  font: inherit;
  color: var(--text);
}
input:not([type="checkbox"]), select {
  height: var(--control-h);
  padding: 0 .7rem;
  background: var(--field);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  transition: border-color .12s, box-shadow .12s;
}
input:not([type="checkbox"]):hover, select:hover { border-color: #3a475b; }
input:not([type="checkbox"]):focus, select:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
input::placeholder { color: var(--dim); }

/* Селект без системного вида: своя стрелка справа */
select {
  appearance: none;
  padding-right: 2rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237a8596' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  background-size: .7rem;
}
select option { background: var(--panel); color: var(--text); }

/* Флажок в цветах приложения: синий с галочкой, когда включён */
input[type="checkbox"] {
  appearance: none;
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  background: var(--field) center / 80% no-repeat;
  cursor: pointer;
  transition: background-color .12s, border-color .12s;
}
input[type="checkbox"]:hover { border-color: var(--accent); }
input[type="checkbox"]:checked {
  background-color: var(--accent);
  border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
input[type="checkbox"]:focus-visible { box-shadow: var(--focus); }

button {
  height: var(--control-h);
  padding: 0 1rem;
  background: #17202c;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color .12s, border-color .12s;
}
button:hover { background: #1e2a3a; border-color: #3a475b; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button.icon { width: var(--control-h); padding: 0; }
button.link { height: auto; background: none; border: none; color: var(--muted); padding: 0; }
button.link:hover { color: var(--text); background: none; }
button.danger:hover { color: var(--red); }

form.inline { display: inline-flex; gap: .4rem; align-items: center; }
label.check { display: inline-flex; gap: .45rem; align-items: center; cursor: pointer; white-space: nowrap; }
label.check:hover { color: #fff; }

/* Поле фильтра: подпись сверху, контрол под ней */
.field { display: flex; flex-direction: column; gap: .25rem; }
.field-label {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* --- Подсказки --- */

/* Значок «?» рядом с подписью: подсказка по наведению, фокусу или касанию */
.tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  margin-left: .35rem;
  border: 1px solid var(--dim);
  border-radius: 50%;
  color: var(--muted);
  font-size: .66rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: .1em;
  cursor: help;
  user-select: none;
}
.tip::before { content: "?"; }
.tip:hover, .tip:focus-visible { color: var(--text); border-color: var(--muted); border-radius: 50%; }
/* Термин с подсказкой: пунктир снизу, как у сокращения */
.term { border-bottom: 1px dotted var(--dim); cursor: help; }

/* Всплывающее окно подсказки, его создаёт app.js */
.tooltip {
  position: fixed;
  z-index: 100;
  max-width: 22rem;
  padding: .55rem .75rem;
  background: #1a2331;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .55);
  color: var(--text);
  font-size: .85rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s;
}
.tooltip.show { opacity: 1; }

/* Справка, которая раскрывается по клику и не сдвигает страницу */
details.help { position: relative; }
details.help > summary {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
  white-space: nowrap;
}
details.help > summary::-webkit-details-marker { display: none; }
details.help > summary:hover, details.help[open] > summary { color: var(--text); }
details.help > summary::before {
  content: "i";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  font: italic 700 .72rem/1 Georgia, serif;
}
.help-body {
  position: absolute;
  right: 0;
  top: calc(100% + .5rem);
  z-index: 20;
  width: min(36rem, calc(100vw - 2rem));
  padding: .9rem 1.1rem;
  background: #141b26;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .55);
  font-size: .9rem;
}
.help-body dl { display: grid; grid-template-columns: auto 1fr; gap: .45rem .9rem; margin: 0 0 .6rem; align-items: baseline; }
.help-body dd { margin: 0; color: var(--muted); }
.help-body p { margin: .4rem 0 0; color: var(--muted); }

/* --- Карточки --- */

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
/* Абзацы в карточке без лишнего отступа после последнего */
.card p { margin: .5rem 0; }
.card > :last-child { margin-bottom: 0; }
.block-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .75rem;
}
.block-head .note { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .85rem; }
.block-head .controls { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .9rem; display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.block-head .controls a { color: var(--muted); }
.block-head .controls a.active { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.block-sub {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: .3rem 0 .4rem;
}

/* Сегментированный переключатель сортировки */
.segmented { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 6px; overflow: hidden; }
.block-head .controls .segmented a { padding: .25rem .7rem; color: var(--muted); }
.block-head .controls .segmented a + a { border-left: 1px solid var(--border-strong); }
.block-head .controls .segmented a:hover { color: var(--text); background: var(--panel-hover); text-decoration: none; }
.block-head .controls .segmented a.active { color: #fff; background: #1d2a3d; text-decoration: none; }

/* --- Общие мелочи --- */

.muted { color: var(--muted); }
.dim { color: var(--dim); }
.small { font-size: .85rem; }
.mono { font-family: var(--mono); font-size: .94em; }
.nowrap { white-space: nowrap; }
.up { color: var(--green); }
.down { color: var(--red); }
.error { color: var(--red); }
.equity { color: var(--orange); font-weight: 700; }
.equity.big { font-size: 1.15rem; }
.lev { color: var(--yellow); font-size: .85rem; margin-left: .15rem; }
.arrow.up { color: var(--green); }
.arrow.down { color: var(--red); }
.ext { color: var(--purple); }
.tag {
  font-size: .7rem;
  font-weight: 700;
  color: #111;
  background: var(--orange);
  border-radius: 3px;
  padding: .05rem .3rem;
}
.empty-state { color: var(--muted); padding: .5rem 0; }

/* Метки событий: цвет текста на тёмной подложке того же цвета */
.badge {
  display: inline-block;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: 4px;
  padding: .1rem .45rem;
  white-space: nowrap;
}
.badge-open { color: #4ade80; background: rgba(34, 197, 94, .14); }
.badge-add { color: #fbbf24; background: rgba(245, 165, 36, .14); }
.badge-reduce { color: #93c5fd; background: rgba(59, 130, 246, .16); }
.badge-close { color: #fca5a5; background: rgba(239, 68, 68, .16); }
.badge-flip { color: #c4b5fd; background: rgba(139, 92, 246, .18); }
.badge-detected { color: #94a3b8; background: rgba(148, 163, 184, .12); }
.badge-trade { color: #cbd5e1; background: rgba(203, 213, 225, .08); }

/* Сторона позиции или сделки */
.side {
  display: inline-block;
  font-size: .76rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 0 .35rem;
}
.side.long { color: #4ade80; background: rgba(34, 197, 94, .12); }
.side.short { color: #f87171; background: rgba(239, 68, 68, .16); }

.star {
  height: auto;
  background: none;
  border: none;
  padding: 0 .15rem;
  color: var(--dim);
  font-size: 1.1rem;
  line-height: 1;
}
.star.on { color: var(--orange); }
.star:hover { color: var(--orange); background: none; }

/* --- Лента --- */

.filters { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; align-items: flex-end; }
.filters .toggles { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; align-items: center; min-height: var(--control-h); }
.filters .reset { margin-left: auto; align-self: center; color: var(--muted); }
.filters .kinds-row { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.filters .kinds-row .field-label { margin-right: .4rem; }

/* Метка события как переключатель фильтра: выключенная гаснет */
label.chip { position: relative; display: inline-flex; cursor: pointer; }
label.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
label.chip .badge { padding: .3rem .6rem; border: 1px solid transparent; transition: opacity .12s, filter .12s; }
label.chip input:not(:checked) + .badge { opacity: .35; filter: grayscale(.7); border-color: var(--border-strong); }
label.chip:hover input:not(:checked) + .badge { opacity: .65; }
label.chip input:focus-visible + .badge { box-shadow: var(--focus); }

.feed-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; margin: 0 0 .6rem; font-size: .9rem; }
.live { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); }
.live .dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--green); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.meta-actions { display: flex; gap: 1.1rem; }
/* Обе справки ленты прижаты к правому краю ленты, а не к своей кнопке: на телефоне не вылезают за экран */
.feed-meta { position: relative; }
.feed-meta details.help { position: static; }

/* Чёрный список монет */
details.hidden-coins > summary::before { content: "⊘"; border: none; font-style: normal; font-family: inherit; font-size: 1rem; }
.coin-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: .7rem 0 0; }
.coin-tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .3rem .2rem .6rem;
  background: #17202c;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
}
.coin-tag button { font-size: 1.05rem; line-height: 1; padding: 0 .25rem; }
.coin-tag button:hover { color: var(--red); }
.add-coin { display: flex; gap: .5rem; margin-top: .8rem; }
.add-coin input { flex: 1; min-width: 0; }
/* Кнопка ⊘ в строке ленты видна при наведении на строку, на сенсорном экране всегда, но бледно */
.hide-coin { display: inline; }
.hide-coin button { margin-left: .2rem; opacity: 0; transition: opacity .12s; }
table.feed tr:hover .hide-coin button, .hide-coin button:focus-visible { opacity: .55; }
.hide-coin button:hover { opacity: 1; color: var(--red); }
@media (hover: none) { .hide-coin button { opacity: .4; } }

.table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
td { padding: .55rem .75rem; border-bottom: 1px solid var(--row-line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
table.feed tr:hover td { background: var(--panel-hover); }
table.compact td, table.compact th { padding: .4rem .75rem; }
td.time { color: var(--muted); white-space: nowrap; font-family: var(--mono); font-size: .88rem; }
td.empty { text-align: center; padding: 2rem; }
.acct .alias { font-weight: 700; }
.acct .mono { color: var(--muted); }

/* Свежие строки ленты подсвечиваются и плавно гаснут */
.row-new td { animation: fresh 4s ease-out; }
@keyframes fresh {
  from { background: rgba(59, 130, 246, .28); }
  to { background: transparent; }
}

.more { text-align: center; margin-top: 1rem; }

/* --- Карточка адреса --- */

.whale-title { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.whale-icon { font-size: 1.4rem; }
.whale-name { font-family: var(--mono); font-weight: 700; font-size: 1.15rem; }
.whale-title > .mono { font-weight: 700; }
.whale-sub { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; font-size: .88rem; margin-top: .2rem; }
.facts { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; font-size: .9rem; margin-top: .7rem; }
.facts b { color: var(--text); font-weight: 600; }

.inline-edit summary { color: var(--purple); cursor: pointer; list-style: none; }
.inline-edit summary::-webkit-details-marker { display: none; }
.inline-edit[open] { display: flex; gap: .6rem; align-items: center; }
.inline-edit form { display: inline-flex; gap: .4rem; }

.grid { display: grid; gap: .6rem; align-items: center; padding: .55rem .75rem; }
.positions-grid { grid-template-columns: 2fr 1fr 1.6fr 1.3fr 1.2fr; }
.closed-grid { grid-template-columns: 2fr 1fr 1.3fr 1.2fr 1.2fr 1.2fr 1.4fr; }
.grid-head {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
details.row { border-bottom: 1px solid var(--row-line); }
details.row:last-of-type { border-bottom: none; }
details.row > summary { cursor: pointer; list-style: none; border-radius: 6px; }
details.row > summary::-webkit-details-marker { display: none; }
details.row > summary:hover { background: var(--panel-hover); }
details.row .caret { display: inline-block; color: var(--muted); transform: rotate(-90deg); transition: transform .15s; }
details.row[open] .caret { transform: none; }
.activity { padding: .3rem .75rem .8rem 2.5rem; }
.act { display: flex; align-items: center; gap: .6rem; padding: .25rem 0; flex-wrap: wrap; }
.act .time { margin-left: auto; font-family: var(--mono); font-size: .88rem; }

/* --- Вход и вотчлист --- */

.login { max-width: 24rem; margin: 5rem auto; padding: 1.75rem; }
.login h1 { font-size: 1.35rem; margin: 0 0 1.25rem; }
.login form { display: flex; flex-direction: column; gap: 1rem; }
.login label { display: flex; flex-direction: column; gap: .3rem; color: var(--muted); }
.login button { margin-top: .25rem; }
.add-form { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
.add-form .address-field input { width: 30rem; max-width: 100%; }
table.watch input[name="alias"] { width: 14rem; }

/* --- Узкий экран --- */

@media (max-width: 760px) {
  html { font-size: 16px; }
  main { padding: 1rem; }
  .topbar { flex-wrap: wrap; gap: .6rem 1rem; padding: .6rem 1rem; }
  .topbar .search { order: 3; flex-basis: 100%; margin-left: 0; }
  .topbar .search input { width: 100%; }
  .positions-grid, .closed-grid { grid-template-columns: repeat(3, 1fr); }
  .grid-head { display: none; }
  .activity { padding-left: .75rem; }
}