/* Шкура обеих панелей.

   Собрана по его каталогу насмотренности, а не по общим дефолтам. Что оттуда взято дословно:

   * ОДИН акцент. В его выборке из 25 работ цветных акцентов ровно два семейства —
     кислотный зелёный и горячий оранжевый. Синего, фиолетового, пастели нет ни разу,
     поэтому их здесь нет тоже.
   * Два шрифта: гротеск + моно (13 работ из 25). Onest на текст, JetBrains Mono на подписи
     и числа. Оба лежат локально: CDN в этом проекте запрещён.
   * Тёплая тёмная база, а не плоский near-black: плоский он забраковал как «слабую гамму».
   * Акцент металлическим градиентом, а не плоской заливкой.
   * Радиусы и длительности заданы ПО РОЛЯМ (приём Пронина), а не одним числом на всё.
   * Зерно поверх (приём Букреева) и свет снизу внутри главной плашки.

   Чего здесь намеренно НЕТ, потому что это его стоп-лист приёмки:
   размытых градиентных пятен на фоне, глассморфизма (backdrop-filter), связки
   «акцент + тёмный фон + Inter». Вместо подсветки по ховеру — инверсия строки.

   Смысл цвета: режим красит верхнюю полосу. Бумажный — нейтральный графит, боевой —
   горячий оранжевый во всю ширину. Понять, уходят ли ордера на биржу, надо не читая. */

@import url('/fonts/fonts.css');

:root {
  /* тёплая тёмная база: три ступени одного цвета, не серые */
  --bg: #0d0b09;
  --bg-2: #12100c;
  --ink: #f7f3ec;
  --ink-2: #a8a094;
  --ink-3: #6f6759;

  /* заливки — прозрачности поверх фона, отдельных серых нет */
  --fill-1: rgba(255, 247, 233, .035);
  --fill-2: rgba(255, 247, 233, .06);
  --fill-3: rgba(255, 247, 233, .10);
  --hair: rgba(255, 247, 233, .09);        /* волосяная линия 1px */
  --hair-2: rgba(255, 247, 233, .16);

  /* акцент: кислотный зелёный, металлом а не плоско */
  --acid: #c2f13c;
  --acid-dim: #8fb428;
  --metal: linear-gradient(168deg, #e2ff7a 0%, #c2f13c 38%, #93c022 100%);
  --metal-hot: linear-gradient(168deg, #ff8a4c 0%, #fa4c14 44%, #c0330a 100%);

  /* второй смысловой цвет — статусы и потери */
  --hot: #fa4c14;
  --hot-dim: #b43a10;

  /* Прибыль и убыток — не третий и четвёртый цвет, а те же два: кислотный и горячий.
     Отдельные имена нужны, чтобы в коде читалось «плюс/минус», а не «зелёный/оранжевый». */
  --up: var(--acid);
  --down: var(--hot);

  --mode: var(--ink-3);                     /* бумажный — без акцента, это норма */
  --mode-ink: var(--ink-2);

  /* радиусы по ролям */
  --r-micro: 8px; --r-tile: 12px; --r-btn: 14px; --r-card: 20px; --r-panel: 24px; --r-cap: 400px;

  /* длительности по жестам */
  --t-micro: .2s; --t-reveal: .26s; --t-tab: .32s; --t-bounce: .6s;
  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-over: cubic-bezier(.34, 1.56, .64, 1);

  --s1: 8px; --s2: 12px; --s3: 16px; --s4: 24px; --s5: 40px;

  --sans: Onest, "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
}

body.live-mode {
  --mode: var(--hot);
  --mode-ink: #ffb694;
}

* { box-sizing: border-box; }

/* Без этого любой блок с display:flex игнорирует атрибут hidden и висит на экране всегда.
   Именно так тревога «канал не слушается» показывалась бы при живом канале. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.45 var(--sans);
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
}

/* Зерно поверх всего. Оно и убирает «цифровую стерильность» плоской заливки,
   и заменяет собой запрещённые размытые пятна. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 100; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- каркас ---------- */

.wrap { position: relative; z-index: 1; max-width: 1360px; margin: 0 auto; padding: 0 var(--s4) var(--s5); }

.rail {
  position: sticky; top: 0; z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid var(--hair);
}
/* Полоса режима: тонкая линия во всю ширину, металлом. Бумажный — почти не видно. */
.rail::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--mode);
  transition: background var(--t-reveal) var(--e-out);
}
body.live-mode .rail::after { background: var(--metal-hot); }

.rail-in {
  max-width: 1360px; margin: 0 auto;
  padding: var(--s2) var(--s4);
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
}
.brand {
  display: flex; align-items: center; gap: var(--s1);
  font: 600 16px/1 var(--sans); letter-spacing: -.02em;
}
.brand svg { width: 20px; height: 20px; color: var(--acid); }
body.live-mode .brand svg { color: var(--hot); }
.spacer { flex: 1 1 auto; }

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

.grid { display: grid; gap: 1px; }        /* сетка на волосяных швах, а не на отступах */
.grid.gap { gap: var(--s2); }

.card {
  position: relative;
  background: var(--fill-1);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  padding: var(--s3);
}
.card h2 {
  margin: 0 0 var(--s2);
  font: 500 11px/1 var(--mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
}

/* Плашка: свет идёт СНИЗУ, как у Букреева. Держим для главных плиток. */
.card.plate {
  background:
    radial-gradient(120% 90% at 50% 118%, rgba(194, 241, 60, .10), transparent 62%),
    var(--fill-1);
  border-radius: var(--r-panel);
}
body.live-mode .card.plate {
  background:
    radial-gradient(120% 90% at 50% 118%, rgba(250, 76, 20, .12), transparent 62%),
    var(--fill-1);
}

.stat { display: flex; flex-direction: column; gap: 4px; }
.stat .k {
  font: 500 10.5px/1 var(--mono); letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3);
}
/* Кегль на краях шкалы: либо крупно, либо мелко — середины нет. */
.stat .v { font: 600 34px/1.02 var(--sans); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.stat .v.sm { font-size: 20px; letter-spacing: -.025em; }
.stat .note { font: 400 12px/1.35 var(--mono); color: var(--ink-3); letter-spacing: -.01em; }

.up { color: var(--acid); } .down { color: var(--hot); }
.mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: -.02em; }

@keyframes bump { 0% { transform: none; } 40% { transform: translateY(-2px); } 100% { transform: none; } }
.tick { animation: bump var(--t-reveal) var(--e-over); }

/* ---------- бейджи ---------- */

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--r-cap);
  font: 500 11.5px/1 var(--mono); letter-spacing: -.01em;
  border: 1px solid var(--hair-2); color: var(--ink-2);
  white-space: nowrap;
}
.pill.mode { border-color: var(--mode); color: var(--mode-ink); }
.pill.ok { border-color: rgba(194, 241, 60, .4); color: var(--acid); }
.pill.bad { border-color: rgba(250, 76, 20, .45); color: var(--hot); }
.pill.warn { border-color: rgba(250, 76, 20, .3); color: #ff9a68; }

.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.dot.beat { animation: beat 2.4s ease-in-out infinite; }
@keyframes beat { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ---------- тревога ---------- */

.alarm {
  display: flex; align-items: flex-start; gap: var(--s2);
  margin-top: var(--s3); padding: var(--s2) var(--s3);
  border-radius: var(--r-tile);
  border: 1px solid rgba(250, 76, 20, .45);
  background: rgba(250, 76, 20, .07);
  color: #ffc4ac;
  animation: slide-in var(--t-reveal) var(--e-out);
}
.alarm svg { width: 18px; height: 18px; flex: none; color: var(--hot); margin-top: 1px; }
.alarm b { color: var(--ink); display: block; margin-bottom: 2px; font-weight: 600; letter-spacing: -.02em; }
.alarm span { font-size: 13px; }

.notice {
  display: flex; align-items: center; gap: var(--s2);
  margin-top: var(--s3); padding: var(--s2) var(--s3);
  border-radius: var(--r-tile); border: 1px solid var(--hair-2); background: var(--fill-1);
  font-size: 13px; color: var(--ink-2);
}
.notice svg { width: 18px; height: 18px; flex: none; color: var(--hot); }

@keyframes slide-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

/* ---------- кнопки ---------- */

.btn {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 38px; padding: 0 var(--s3);
  border-radius: var(--r-btn);
  border: 1px solid var(--hair-2);
  background: transparent;
  color: var(--ink);
  font: 500 13.5px/1 var(--sans); letter-spacing: -.015em;
  transition: background var(--t-micro) var(--e-out), border-color var(--t-micro) var(--e-out),
              color var(--t-micro) var(--e-out), transform var(--t-micro) var(--e-over);
}
/* Инверсия по ховеру вместо подсветки — так в его выборке. */
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }
.btn[disabled] { opacity: .35; cursor: not-allowed; }
.btn[disabled]:hover { background: transparent; border-color: var(--hair-2); color: var(--ink); }
.btn svg { width: 15px; height: 15px; }
.btn.sm { min-height: 32px; padding: 0 var(--s2); font-size: 12.5px; }

.btn.primary {
  background: var(--metal); border-color: transparent; color: #10140a; font-weight: 600;
}
.btn.primary:hover { filter: brightness(1.08); background: var(--metal); color: #10140a; }
.btn.ghost { border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--fill-3); border-color: transparent; color: var(--ink); }

/* Опасные кнопки нажимаются УДЕРЖАНИЕМ: мышь дрогнула — ничего не случилось.
   Заливка ползёт слева и показывает, сколько ещё держать. */
.btn.danger { border-color: rgba(250, 76, 20, .5); color: #ff9a72; }
.btn.danger:hover { background: var(--hot); border-color: var(--hot); color: #fff; }
.btn.hold { position: relative; overflow: hidden; }
.btn.hold > * { position: relative; z-index: 1; }
.btn.hold::before {
  content: ""; position: absolute; inset: 0;
  background: var(--metal-hot); transform-origin: left;
  transform: scaleX(var(--fill, 0));
  transition: transform 80ms linear;
}
.btn.hold.armed { color: #fff; }

/* ---------- таблицы: швы в 1px, а не отступы ---------- */

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left; padding: 0 var(--s2) var(--s1);
  font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); border-bottom: 1px solid var(--hair);
}
td { padding: 10px var(--s2); border-bottom: 1px solid var(--hair); }
tbody tr { transition: background var(--t-micro) var(--e-out), color var(--t-micro) var(--e-out); }
tbody tr:hover { background: var(--fill-2); }
td.r, th.r { text-align: right; font-variant-numeric: tabular-nums; }
tfoot td { border-bottom: 0; padding-top: var(--s2); }

.empty { padding: var(--s4); text-align: center; color: var(--ink-3); font: 400 12.5px/1.4 var(--mono); }

/* ---------- журнал ---------- */

.log { max-height: 330px; overflow-y: auto; margin: 0 calc(var(--s2) * -1); padding: 0 var(--s2); }
.log .row {
  display: grid; grid-template-columns: 52px 68px 1fr; gap: var(--s2);
  padding: 7px 0; border-bottom: 1px solid var(--hair);
  font-size: 12.8px; align-items: baseline;
}
.log .row.fresh { animation: slide-in var(--t-tab) var(--e-out); }
.log time { color: var(--ink-3); font: 400 11.5px/1 var(--mono); }
.log .lv { font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.lv-info { color: var(--ink-2); }
.lv-trade, .lv-signal { color: var(--acid); }
.lv-warn, .lv-rm { color: #ff9a68; }
.lv-error { color: var(--hot); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--fill-3); border-radius: var(--r-cap); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- поля ---------- */

label.field { display: flex; flex-direction: column; gap: 6px; font: 400 12px/1.3 var(--mono); color: var(--ink-2); }
input, select {
  width: 100%; min-height: 38px; padding: 0 var(--s2);
  border-radius: var(--r-btn); border: 1px solid var(--hair-2);
  background: var(--fill-1); color: var(--ink);
  font: 500 14px/1 var(--mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  transition: border-color var(--t-micro) var(--e-out), background var(--t-micro) var(--e-out);
}
input::placeholder { color: var(--ink-3); }
input:focus, select:focus { outline: none; border-color: var(--acid); background: var(--fill-2); }
.hint { font: 400 11.5px/1.45 var(--mono); color: var(--ink-3); letter-spacing: -.01em; }

.switch { display: flex; align-items: center; gap: var(--s2); cursor: pointer; user-select: none; font-size: 13.5px; }
.switch input { display: none; }
.switch .track {
  width: 40px; height: 22px; border-radius: var(--r-cap); flex: none;
  background: var(--fill-3); position: relative;
  transition: background var(--t-tab) var(--e-out);
}
.switch .track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%; background: var(--ink-2);
  transition: transform var(--t-tab) var(--e-over), background var(--t-tab) var(--e-out);
}
.switch input:checked + .track { background: var(--acid-dim); }
.switch input:checked + .track::after { transform: translateX(18px); background: #10140a; }

/* ---------- вкладки ---------- */

.tabs { display: flex; gap: 2px; }
.tab {
  appearance: none; cursor: pointer; border: 1px solid transparent; background: transparent;
  padding: 8px var(--s3); border-radius: var(--r-btn);
  color: var(--ink-3); font: 500 13.5px/1 var(--sans); letter-spacing: -.015em;
  transition: color var(--t-tab) var(--e-out), background var(--t-tab) var(--e-out),
              border-color var(--t-tab) var(--e-out);
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--bg); background: var(--ink); border-color: var(--ink); }

.pane { animation: fade-up var(--t-tab) var(--e-out); }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.stagger > * { animation: fade-up var(--t-bounce) var(--e-out) backwards; }
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 45ms; }
.stagger > *:nth-child(3) { animation-delay: 90ms; }
.stagger > *:nth-child(4) { animation-delay: 135ms; }
.stagger > *:nth-child(5) { animation-delay: 180ms; }
.stagger > *:nth-child(6) { animation-delay: 225ms; }

/* ---------- всплывашка ---------- */

.toasts { position: fixed; right: var(--s4); bottom: var(--s4); z-index: 90; display: flex; flex-direction: column; gap: var(--s1); }
.toast {
  padding: var(--s2) var(--s3); border-radius: var(--r-btn);
  border: 1px solid var(--hair-2); background: var(--bg-2);
  font: 400 13px/1.4 var(--sans); max-width: 380px;
  animation: slide-in var(--t-reveal) var(--e-out);
}
.toast.bad { border-color: rgba(250, 76, 20, .5); color: #ffc4ac; }
.toast.good { border-color: rgba(194, 241, 60, .45); color: var(--acid); }

/* ---------- полоса «вы в чужой панели» ---------- */

.impersonate {
  position: relative; z-index: 31;
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  padding: 9px var(--s4);
  background: rgba(250, 76, 20, .1);
  border-bottom: 1px solid rgba(250, 76, 20, .4);
  font: 400 12.5px/1 var(--mono); color: #ffc4ac;
}
.impersonate b { color: var(--ink); font-weight: 500; }
.impersonate svg { width: 16px; height: 16px; color: var(--hot); }

@media (max-width: 760px) {
  .wrap { padding: 0 var(--s2) var(--s4); }
  .rail-in { padding: var(--s2); }
  .stat .v { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}