/* FrozenSignal — интерфейс. Ледяная голубая палитра. Зелёный = лонг, красный = шорт, серый = ожидание. */

/* Тёмная тема — «полярная ночь»: глубокий синий фон, ледяной голубой акцент.
   Смысловые цвета не трогаем: зелёный = лонг, красный = шорт, серо-голубой =
   ожидание. Они подобраны так, чтобы не сливаться с голубым акцентом. */
:root {
  --bg: #061423;
  --bg-soft: #0a1d31;
  --card: #0d2238;
  --card-2: #122c47;
  --line: #1c3b5a;
  --text: #e8f6ff;
  --muted: #93b8d3;
  --dim: #5f85a3;

  --long: #34d399;
  --long-soft: rgba(52, 211, 153, 0.14);
  --short: #ff6b7a;
  --short-soft: rgba(255, 107, 122, 0.14);
  --wait: #8aa4ba;
  --wait-soft: rgba(138, 164, 186, 0.14);
  --warn: #f6b94d;
  --warn-soft: rgba(246, 185, 77, 0.14);
  --accent: #5cc8ff;
  --accent-soft: rgba(92, 200, 255, 0.15);
  --accent-ink: #03243a;          /* текст на голубой кнопке */
  --frost: rgba(92, 200, 255, 0.10);
  --ice-gradient: linear-gradient(135deg, #d6f6ff 0%, #5cc8ff 48%, #0a7fbf 100%);

  --radius: 14px;
  --radius-sm: 9px;
  --gutter: 16px;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;
}

/* Светлая тема — «иней» */
[data-theme="light"] {
  --bg: #eef8ff;
  --bg-soft: #ffffff;
  --card: #ffffff;
  --card-2: #e6f4fd;
  --line: #cfe6f5;
  --text: #0a2438;
  --muted: #4b7090;
  --dim: #86a7c0;
  --long: #0e9f66;
  --long-soft: rgba(14, 159, 102, 0.12);
  --short: #d9404a;
  --short-soft: rgba(217, 64, 74, 0.12);
  --wait: #6a88a0;
  --wait-soft: rgba(106, 136, 160, 0.12);
  --accent: #0a9cd8;
  --accent-soft: rgba(10, 156, 216, 0.12);
  --accent-ink: #ffffff;
  --frost: rgba(10, 156, 216, 0.08);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* морозное свечение сверху страницы */
body {
  background:
    radial-gradient(1100px 420px at 50% -160px, var(--frost), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
}

body { padding-bottom: 40px; }

.hidden { display: none !important; }
.muted { color: var(--muted); }
.tiny { font-size: 12px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ───────────────────────────── шапка ───────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px var(--gutter);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1 1 auto; }
/* min-width:0 обязателен: без него текст не сжимается и наезжает на кнопки */
.brand-text { min-width: 0; overflow: hidden; }
.brand-mark {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--ice-gradient);
  color: #03243a;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 6px 18px var(--accent-soft);
}
.brand-mark svg { width: 22px; height: 22px; display: block; }
.brand-title { background: linear-gradient(90deg, var(--text), var(--accent));
               -webkit-background-clip: text; background-clip: text;
               -webkit-text-fill-color: transparent; }
.brand-title {
  font-weight: 650; font-size: 15px; letter-spacing: -0.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-sub { font-size: 11.5px; color: var(--muted); white-space: nowrap;
             overflow: hidden; text-overflow: ellipsis; }

.topbar-actions { display: flex; align-items: center; gap: 8px; flex: none; }

/* ───────────────────────────── кнопки ───────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--text);
  font-size: 13.5px; font-weight: 550; cursor: pointer;
  transition: background .15s, border-color .15s, opacity .15s;
}
.btn:hover { background: var(--card-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: transparent; color: var(--accent-ink);
               font-weight: 650; box-shadow: 0 4px 14px var(--accent-soft); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 85%, #fff); }
.btn-ghost { background: transparent; }
.btn-danger { background: transparent; color: var(--short); border-color: var(--short); }
.btn-danger:hover { background: var(--short-soft); }
.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn-icon { padding: 8px 11px; }
.btn-long { background: var(--long); border-color: transparent; color: #04140d; }
.btn-short { background: var(--short); border-color: transparent; color: #fff; }

.chip {
  padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); color: var(--text); font-size: 13px; cursor: pointer;
  max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.switch { display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
          color: var(--muted); cursor: pointer; user-select: none; }
.switch input { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; }

.spinner {
  width: 13px; height: 13px; flex: none;
  border: 2px solid color-mix(in srgb, var(--accent-ink) 35%, transparent);
  border-top-color: var(--accent-ink);
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ───────────────────────────── вкладки ───────────────────────────── */
.tabs {
  display: flex; gap: 4px; padding: 10px var(--gutter) 0;
  overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 59px; z-index: 25;
  background: var(--bg);
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 9px 14px; border: 0; background: transparent; color: var(--muted);
  font-size: 13.5px; font-weight: 550; cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }

main { padding: var(--gutter); max-width: 1180px; margin: 0 auto; }

/* ───────────────────────────── сводка ───────────────────────────── */
.summary { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.sum-item {
  flex: 1 1 88px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--card); border: 1px solid var(--line);
}
.sum-value { font-size: 20px; font-weight: 700; line-height: 1.1;
             font-variant-numeric: tabular-nums; }
.sum-label { font-size: 11px; color: var(--muted); margin-top: 3px; }

/* ───────────────────────────── панель фильтров ───────────────────────────── */
.toolbar {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  justify-content: space-between; margin-bottom: 12px;
}
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.pill {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); color: var(--muted);
  font-size: 12.5px; font-weight: 550; cursor: pointer; white-space: nowrap;
}
.pill:hover { color: var(--text); }
.pill.active { background: var(--accent); border-color: transparent; color: var(--accent-ink); }

.toolbar-right { display: flex; gap: 8px; min-width: 0; }
.input-sm {
  padding: 7px 11px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--card); color: var(--text);
  font-size: 13px; outline: none; min-width: 0;
}
.input-sm:focus { border-color: var(--accent); }

/* ───────────────────────────── список монет ───────────────────────────── */
.coin-list { display: flex; flex-direction: column; gap: 8px; }

.coin {
  display: grid;
  grid-template-columns: 4px minmax(140px, 1.4fr) repeat(4, minmax(72px, 0.8fr)) auto;
  align-items: center; gap: 12px;
  padding: 0 14px 0 0;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.coin:hover { border-color: var(--dim); background: var(--card-2); }
.coin .bar { align-self: stretch; background: var(--wait); }
.coin .cell.actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* подсказка/предупреждение в карточке (раньше класс был без стилей) */
.note-box {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin: 12px 0; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card-2); font-size: 13px;
}
.note-box.warn { border-color: var(--warn); background: var(--warn-soft); }
.btn .icon { display: none; font-size: 15px; line-height: 1; }
.coin.long .bar { background: var(--long); }
.coin.short .bar { background: var(--short); }
.coin.error .bar { background: var(--warn); }
.coin.scanning .bar { background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

.coin-main { padding: 12px 0 12px 10px; min-width: 0; }
.coin-name {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  font-weight: 650; font-size: 15px; letter-spacing: -0.2px;
}
.coin-name > .tag { flex: none; }
.coin-reason {
  font-size: 11.5px; color: var(--muted); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cell { min-width: 0; }
.cell-label { font-size: 10.5px; color: var(--dim); text-transform: uppercase;
              letter-spacing: .4px; }
.cell-value { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
              margin-top: 2px; white-space: nowrap; }

.tag {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .3px; white-space: nowrap;
}
.tag.long { background: var(--long-soft); color: var(--long); }
.tag.short { background: var(--short-soft); color: var(--short); }
.tag.wait { background: var(--wait-soft); color: var(--wait); }
.tag.err { background: var(--warn-soft); color: var(--warn); }
.tag.scan { background: var(--accent-soft); color: var(--accent); }
.tag.info { background: var(--card-2); color: var(--muted); }

.up { color: var(--long); }
.down { color: var(--short); }

.empty { padding: 44px 20px; text-align: center; color: var(--muted);
         background: var(--card); border: 1px dashed var(--line);
         border-radius: var(--radius); }

.footnote { margin-top: 18px; }

/* ───────────────────────────── карточка сигнала ───────────────────────────── */
.drawer { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.drawer-body {
  position: relative; width: min(560px, 100%); height: 100%;
  overflow-y: auto; background: var(--bg-soft);
  border-left: 1px solid var(--line); padding: 18px var(--gutter) 60px;
  animation: slide .22s ease;
}
@keyframes slide { from { transform: translateX(28px); opacity: 0; } }

.detail-head { display: flex; align-items: flex-start; justify-content: space-between;
               gap: 12px; margin-bottom: 4px; }
.detail-title { font-size: 21px; font-weight: 700; letter-spacing: -0.4px; }
.close-x { border: 0; background: transparent; color: var(--muted);
           font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; }

.prob-bars { margin: 14px 0 6px; }
.prob-row { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.prob-key { width: 46px; font-size: 12px; color: var(--muted); }
.prob-track { flex: 1; height: 8px; border-radius: 99px; background: var(--card-2); overflow: hidden; }
.prob-fill { height: 100%; border-radius: 99px; transition: width .35s ease; }
.prob-num { width: 42px; text-align: right; font-size: 13px; font-weight: 700;
            font-variant-numeric: tabular-nums; }

.chart-wrap { margin: 14px 0; background: var(--card); border: 1px solid var(--line);
              border-radius: var(--radius); padding: 10px; }
#chart { width: 100%; height: 240px; display: block; }
.chart-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px;
                color: var(--muted); margin-top: 8px; }
.chart-legend i { display: inline-block; width: 14px; height: 2px; vertical-align: middle;
                  margin-right: 5px; }

.levels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0; }
.level {
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--card); border: 1px solid var(--line);
}
.level-label { font-size: 10.5px; color: var(--dim); text-transform: uppercase;
               letter-spacing: .4px; display: flex; justify-content: space-between; gap: 6px; }
.level-value { font-size: 15px; font-weight: 700; margin-top: 3px;
               font-variant-numeric: tabular-nums; }
.level-note { font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.35; }
.level.sl { border-color: color-mix(in srgb, var(--short) 45%, var(--line)); }
.level.tp { border-color: color-mix(in srgb, var(--long) 35%, var(--line)); }
.level.entry { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.level.wide { grid-column: 1 / -1; }

.kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0;
      border-bottom: 1px solid var(--line); font-size: 13.5px; }
.kv:last-child { border-bottom: 0; }
.kv span:first-child { color: var(--muted); }
.kv span:last-child { font-weight: 600; text-align: right;
                      font-variant-numeric: tabular-nums; }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px; margin-bottom: 12px;
}
.section-title { font-size: 13px; font-weight: 650; text-transform: uppercase;
                 letter-spacing: .6px; color: var(--muted); margin: 0 0 10px; }

.factor { margin-bottom: 9px; }
.factor-head { display: flex; justify-content: space-between; gap: 8px;
               font-size: 13px; margin-bottom: 4px; }
.factor-weight { color: var(--dim); font-size: 11.5px; }
.factor-track { height: 6px; border-radius: 99px; background: var(--card-2);
                display: flex; overflow: hidden; }
.factor-long { background: var(--long); }
.factor-short { background: var(--short); }
.factor-detail { font-size: 11.5px; color: var(--muted); margin-top: 4px; line-height: 1.4; }

.list-check, .list-warn { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.55; }
.list-check li::marker { color: var(--long); }
.list-warn li::marker { color: var(--warn); }
.list-warn li { color: var(--warn); }

.warn-box {
  background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  border-radius: var(--radius-sm); padding: 11px 13px; font-size: 13px; color: var(--text);
}

.detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.detail-actions .btn { flex: 1 1 120px; justify-content: center; }

/* ───────────────────────────── настройки ───────────────────────────── */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.field input[type="number"], .field input[type="text"], .field select {
  width: 100%; padding: 9px 11px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--bg-soft); color: var(--text);
  font-size: 14px; outline: none;
}
.field input:focus, .field select:focus { border-color: var(--accent); }
.field input[type="range"] { width: 100%; accent-color: var(--accent); }
.check { display: flex; align-items: center; gap: 9px; font-size: 13.5px;
         margin-bottom: 11px; cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }

.hint {
  display: inline-grid; place-items: center; width: 15px; height: 15px;
  border-radius: 50%; background: var(--card-2); color: var(--muted);
  font-size: 10px; font-style: normal; font-weight: 700; cursor: help;
  vertical-align: middle;
}

.symbol-list { display: flex; flex-wrap: wrap; gap: 6px; }
.sym-toggle {
  padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--bg-soft); color: var(--muted); font-size: 12.5px;
  cursor: pointer; font-weight: 550;
}
.sym-toggle.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.danger-card { border-color: color-mix(in srgb, var(--short) 30%, var(--line)); }

/* ───────────────────────────── статистика ───────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
              gap: 8px; margin-bottom: 18px; }

/* ───────────────────────────── инструкция ───────────────────────────── */
.help { line-height: 1.65; max-width: 760px; }
.help h2 { font-size: 16px; margin: 22px 0 8px; letter-spacing: -0.2px; }
.help h2:first-child { margin-top: 0; }
.help p { margin: 0 0 10px; }
.help ul { margin: 0 0 12px; padding-left: 20px; }
.help li { margin-bottom: 5px; }
.help .weights li { font-variant-numeric: tabular-nums; }

/* ───────────────────────────── вход ───────────────────────────── */
.overlay { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
           background: radial-gradient(700px 360px at 50% 20%, var(--frost), transparent 70%),
                       var(--bg);
           padding: var(--gutter); }
.overlay-card { width: min(420px, 100%); background: var(--card);
                border: 1px solid var(--line); border-radius: 18px; padding: 24px;
                box-shadow: 0 20px 60px rgba(0, 20, 40, .35), 0 0 0 1px var(--accent-soft); }
.ob-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.ob-brand .brand-mark { width: 42px; height: 42px; border-radius: 12px; }
.ob-brand .brand-mark svg { width: 26px; height: 26px; }
.overlay-card h1 { font-size: 22px; margin: 0; letter-spacing: -0.5px; }
.overlay-card > p { margin: 0 0 20px; font-size: 13.5px; }
.overlay-actions { display: flex; gap: 8px; margin: 18px 0 14px; }
.overlay-actions .btn { flex: 1; justify-content: center; }

/* ───────────────────────────── тосты ───────────────────────────── */
.toasts { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
          z-index: 90; display: flex; flex-direction: column; gap: 8px;
          width: min(420px, calc(100% - 32px)); }
.toast {
  padding: 11px 14px; border-radius: var(--radius-sm);
  background: var(--card-2); border: 1px solid var(--line);
  font-size: 13.5px; box-shadow: 0 8px 28px rgba(0,0,0,.4);
  animation: rise .2s ease;
}
@keyframes rise { from { transform: translateY(10px); opacity: 0; } }
.toast.long { border-color: var(--long); }
.toast.short { border-color: var(--short); }
.toast.err { border-color: var(--warn); }

/* ───────────────────────────── мобильная вёрстка ───────────────────────────── */
@media (max-width: 720px) {
  /* цена и статус — одна колонка справа в две строки; полоса и название
     занимают обе строки (раньше статус уезжал в отдельную строку под карточку) */
  .coin { grid-template-columns: 4px 1fr auto; row-gap: 0; padding-right: 12px; }
  .coin .bar { grid-row: span 2; }
  .coin-main { grid-column: 2; grid-row: span 2; }
  .coin .cell { display: none; }
  .coin .cell.keep { display: block; grid-column: 3; text-align: right; }
  /* кнопки журнала занимают свою строку, иначе они втискиваются
     в узкую третью колонку и наезжают на статус */
  .coin .cell.actions {
    grid-column: 2 / -1; text-align: left;
    padding: 0 0 12px 10px; margin-top: -4px;
  }
  .brand-sub { max-width: none; }
  .topbar { padding: 10px 12px; gap: 8px; }
  .btn .label { display: none; }
  .btn .icon { display: inline; }     /* у кнопки без текста остаётся значок */
  .toolbar-right { flex: 1 1 100%; }
  .toolbar-right .input-sm { flex: 1 1 0; }
  .btn-primary { padding: 8px 12px; }
  .levels { grid-template-columns: 1fr; }
  .tabs { top: 55px; }
  .drawer-body { width: 100%; border-left: 0; }
}

@media (max-width: 560px) {
  /* на узком экране заголовок уступает место кнопкам */
  .brand-title { font-size: 13.5px; }
  .brand-sub { font-size: 11px; }
  .switch span { display: none; }
  .chip { max-width: 90px; padding: 7px 10px; }
  .topbar-actions { gap: 6px; }
}

@media (max-width: 400px) {
  .brand-title { display: none; }
  .brand-sub { font-size: 11.5px; }
  .chip { max-width: 76px; }
}