/* fomo-tracker — renderer. Тёмный, кинематографичный, без фреймворков.
   Окно Electron 500×760, фон #0b0e14, числа — моноширинные. */

:root{
  --bg:        #0b0e14;
  --bg-raise:  #11151f;
  --line:      rgba(255,255,255,.07);
  --text:      #e8ecf4;
  --dim:       #8b93a7;
  --faint:     #5a6175;
  --green:     #43e08e;
  --red:       #ff5d6c;
  --amber:     #f5c451;
  --accent:    #7c8dff;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html, body{ height:100%; }
body{
  margin:0;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(96,118,255,.06), transparent 55%),
    var(--bg);
  color:var(--text);
  font:13px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
  user-select:none;
  overflow:hidden;
}
input, textarea{ user-select:text; }

#app{ display:flex; flex-direction:column; height:100vh; }

/* ─── Хедер ─────────────────────────────────────────────── */
header{
  display:flex; align-items:center; gap:8px;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.015);
  flex:none;
}

.dot{
  width:9px; height:9px; border-radius:50%; flex:none;
  background:var(--red);
  box-shadow:0 0 8px rgba(255,93,108,.55);
  transition:background .3s, box-shadow .3s;
}
.dot--ok{
  background:var(--green);
  box-shadow:0 0 10px rgba(67,224,142,.7);
  animation:breathe 2.4s ease-in-out infinite;
}
.dot--warn{
  background:var(--amber);
  box-shadow:0 0 10px rgba(245,196,81,.7);
}
@keyframes breathe{ 50%{ box-shadow:0 0 15px rgba(67,224,142,.95); } }

.input{
  background:#0e1219;
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--text);
  padding:8px 10px;
  font-family:var(--mono);
  font-size:12px;
  outline:none;
  transition:border-color .15s;
}
.input:focus{ border-color:rgba(124,141,255,.5); }
.input::placeholder{ color:var(--faint); font-family:inherit; }
#ca{ flex:1; min-width:0; }

.btn{
  font:inherit; font-size:12px;
  padding:8px 12px;
  border-radius:8px;
  cursor:pointer;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--text);
  white-space:nowrap;
  transition:background .15s, border-color .15s, color .15s;
}
.btn:hover{ background:rgba(255,255,255,.06); }
.btn:disabled{ opacity:.5; cursor:default; }
.btn-ghost{ color:var(--dim); }
.btn-ghost:hover{ color:var(--text); }
.btn-icon{ width:34px; padding:8px 0; text-align:center; }
/* закрепка: выключена — серая, включена — янтарная с свечением */
.btn-pin{ filter:grayscale(1); opacity:.55; transition:filter .15s, opacity .15s, box-shadow .15s; }
.btn-pin.on{
  filter:none; opacity:1;
  border-color:rgba(245,196,81,.5);
  background:linear-gradient(180deg, rgba(245,196,81,.22), rgba(245,196,81,.08));
  box-shadow:0 0 10px rgba(245,196,81,.25);
}

.btn-power{
  min-width:96px;
  color:var(--green);
  border-color:rgba(67,224,142,.35);
  background:linear-gradient(180deg, rgba(67,224,142,.16), rgba(67,224,142,.07));
}
.btn-power:hover{ background:linear-gradient(180deg, rgba(67,224,142,.24), rgba(67,224,142,.12)); }
/* первый запуск: ник */
.modal--nick{ max-width:420px; }
.nick-hint{ color:var(--dim); font-size:12.5px; line-height:1.55; margin:6px 0 14px; }
.input--big{ width:100%; box-sizing:border-box; font-size:16px; padding:12px 12px; letter-spacing:.3px; }
.f-label .mono{ font-family:var(--mono); color:#c4b5fd; font-weight:600; }
.f-label .muted{ opacity:.6; }
/* бейдж ника в шапке */
.session-badge{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.3px; flex:none;
  padding:6px 11px; border-radius:999px;
  color:#e9d5ff; border:1px solid rgba(168,85,247,.45);
  background:linear-gradient(180deg, rgba(124,58,237,.28), rgba(124,58,237,.10));
  box-shadow:0 0 12px rgba(168,85,247,.18), inset 0 1px 0 rgba(255,255,255,.06);
}
.session-badge::before{ content:"◉ "; color:#a855f7; }
/* «Переключить»: запущен, а в поле другой CA — янтарная, чтобы не спутать с «Выключить» */
.btn-power.btn-switch, .btn-power.on.btn-switch{
  color:var(--amber);
  border-color:rgba(245,196,81,.45);
  background:linear-gradient(180deg, rgba(245,196,81,.2), rgba(245,196,81,.08));
}
.btn-power.on{
  color:var(--red);
  border-color:rgba(255,93,108,.35);
  background:linear-gradient(180deg, rgba(255,93,108,.14), rgba(255,93,108,.06));
}
.btn-power.on:hover{ background:linear-gradient(180deg, rgba(255,93,108,.22), rgba(255,93,108,.10)); }

/* ─── Герой: огромный нетто-тотал ───────────────────────── */
.hero{
  --glow: rgba(67,224,142,.16);
  position:relative;
  text-align:center;
  padding:32px 16px 22px;
  overflow:hidden;
  flex:none;
}
.hero--neg{ --glow: rgba(255,93,108,.14); }
.hero::before{
  content:'';
  position:absolute; inset:-45% -25%;
  background:radial-gradient(58% 52% at 50% 42%, var(--glow), transparent 72%);
  filter:blur(4px);
  pointer-events:none;
  transition:background .6s;
}
.hero > *{ position:relative; }

.hero-label{
  font-size:10px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--faint);
  margin-bottom:12px;
}

.net{
  font-family:var(--mono);
  font-weight:600;
  font-size:58px;
  line-height:1.05;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  color:var(--green);
  text-shadow:0 0 28px rgba(67,224,142,.25);
  transition:color .25s, text-shadow .25s;
}
.net--neg{
  color:var(--red);
  text-shadow:0 0 28px rgba(255,93,108,.25);
}
/* Анимация смены значения */
.net.bump-up{   animation:bumpUp   .5s cubic-bezier(.2,.8,.3,1); }
.net.bump-down{ animation:bumpDown .5s cubic-bezier(.2,.8,.3,1); }
@keyframes bumpUp{
  0%{ transform:scale(1.035); text-shadow:0 0 44px rgba(67,224,142,.65); }
  100%{ transform:scale(1); text-shadow:0 0 28px rgba(67,224,142,.25); }
}
@keyframes bumpDown{
  0%{ transform:scale(1.035); text-shadow:0 0 44px rgba(255,93,108,.65); }
  100%{ transform:scale(1); text-shadow:0 0 28px rgba(255,93,108,.25); }
}

.sub{ margin-top:14px; color:var(--dim); font-size:12px; }
.sub .v{ font-family:var(--mono); color:var(--text); font-variant-numeric:tabular-nums; }
/* Чипы подсчётов как на сайте: тёмная подложка, цветное число */
.chips{
  margin-top:14px;
  display:flex; flex-wrap:wrap; gap:6px;
  justify-content:center;
}
.chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 9px;
  border-radius:99px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  font-size:11px;
  color:var(--dim);
  white-space:nowrap;
}
.chip b{
  font-family:var(--mono);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--text);
}
.chip--grn b{ color:#22c55e; }
.chip--blu b{ color:#4d9fff; }
.chip--amb b{ color:#f5c451; }
.chip--neg b{ color:#ef4444; }
/* раскладка рага по слагаемым под чипами */
.rag-parts{ margin-top:10px; line-height:1.9; }
.rag-parts b{ color:var(--text, #e8e8ef); font-weight:600; }
.rag-parts .muted{ opacity:.6; }

.side{ margin-top:8px; color:var(--faint); font-size:12px; }
.side .v{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.v--pos{ color:var(--green); }
.v--neg{ color:var(--red); }

/* ─── Лента сделок ──────────────────────────────────────── */
.feed-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 18px 6px;
  border-top:1px solid var(--line);
  color:var(--faint);
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  flex:none;
}
.feed-head span:last-child{ font-family:var(--mono); letter-spacing:0; }

/* Фильтр отображения: ползунок мин. суммы + моно-значение справа */
.feed-filter{
  display:flex; align-items:center; gap:12px;
  padding:8px 18px 6px;
  flex:none;
}
.range{
  -webkit-appearance:none;
  appearance:none;
  flex:1; min-width:0;
  height:16px;
  margin:0;
  background:transparent;
  cursor:pointer;
}
/* Тонкий трек с точками-делениями каждые 10% */
.range::-webkit-slider-runnable-track{
  height:4px;
  border-radius:2px;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.26) 0, rgba(255,255,255,.26) 2px,
      transparent 2px, transparent 10%),
    rgba(255,255,255,.08);
}
.range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px; height:14px;
  margin-top:-5px; /* (4px трек − 14px ручка)/2 */
  border-radius:50%;
  border:none;
  background:linear-gradient(180deg, #f5f7fc, #c9d1e4);
  box-shadow:0 1px 4px rgba(0,0,0,.5);
  transition:box-shadow .15s;
}
.range:hover::-webkit-slider-thumb{
  box-shadow:0 0 0 4px rgba(232,236,244,.12), 0 1px 4px rgba(0,0,0,.5);
}
.range-val{
  font-family:var(--mono);
  font-size:12px;
  color:var(--text);
  font-variant-numeric:tabular-nums;
  min-width:36px;
  text-align:right;
}

.feed{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding:2px 8px 8px;
}
.feed-table{ width:100%; border-collapse:collapse; }
.feed-table th{
  font-size:9px; font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--faint);
  text-align:left;
  padding:4px 6px 6px;
  border-bottom:1px solid var(--line);
}
.feed-table th.c-sol, .feed-table td.c-sol{ text-align:right; }
.feed-table th.c-tx,  .feed-table td.c-tx{  text-align:right; width:34px; }

.row td{
  padding:6px;
  vertical-align:middle;
  border-bottom:1px solid rgba(255,255,255,.035);
  font-size:12px;
}
.row{ transition:background .12s; }
.row:hover{ background:rgba(255,255,255,.03); }
.row--site, .row--other{ background:transparent; }
/* fomo — главная фишка: лёгкая фиолетовая подложка всей строки */
.row--fomo{ background:rgba(167,139,250,.07); }
.row--fomo:hover{ background:rgba(167,139,250,.12); }

.t{ color:var(--faint); font-family:var(--mono); font-size:11px; }

/* Бейдж-чип ячейки: тёмная подложка с тоном цвета строки (~12%), цветной моно-текст */
.cchip{
  display:inline-block;
  padding:3px 10px;
  border-radius:6px;
  font-family:var(--mono);
  font-size:11px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.cchip--click{ cursor:pointer; transition:filter .12s; }
.cchip--click:hover{ filter:brightness(1.3); }
/* ЦВЕТА КАК НА САЙТЕ, по классу и стороне */
.cchip--site-buy{   color:#4d9fff; background:rgba(77,159,255,.12); }
.cchip--site-sell{  color:#2dd4bf; background:rgba(45,212,191,.12); }
.cchip--other-buy{  color:#22c55e; background:rgba(34,197,94,.12); }
.cchip--other-sell{ color:#ef4444; background:rgba(239,68,68,.12); }
.cchip--fomo-buy{   color:#a78bfa; background:rgba(167,139,250,.12); }
.cchip--fomo-sell{  color:#c026d3; background:rgba(192,38,211,.12); }

.c-action{ white-space:nowrap; }
.c-action .badge{ margin-left:5px; }
.c-date{ white-space:nowrap; }

.badge{
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:2.5px 7px;
  border-radius:99px;
  border:1px solid transparent;
  white-space:nowrap;
}
.badge--unv{ color:var(--faint); background:transparent; border-color:var(--line); }

/* Кнопка-иконка открытия транзакции в Solscan */
.txbtn{
  font:inherit; font-size:13px; line-height:1;
  background:none; border:none;
  color:var(--faint);
  cursor:pointer;
  padding:4px 7px;
  border-radius:6px;
  transition:color .12s, background .12s;
}
.txbtn:hover{ color:var(--accent); background:rgba(124,141,255,.10); }

.feed-empty{
  padding:56px 16px;
  text-align:center;
  color:var(--faint);
}

/* ─── Пагинация ленты (как на сайте PUMP BOT) ───────────── */
.feed-pager{
  flex:none;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:7px 14px;
  border-top:1px solid var(--line);
  color:var(--faint);
  font-size:11px;
}
.pager-size{
  display:inline-flex; align-items:center; gap:7px;
  white-space:nowrap;
}
.pager-select{
  width:auto;
  padding:4px 8px;
  font-size:11px;
  cursor:pointer;
  color-scheme:dark; /* тёмный нативный дропдаун */
}
.pager-nav{ display:inline-flex; align-items:center; gap:4px; }
.pager-info{
  font-family:var(--mono);
  font-size:11px;
  color:var(--dim);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  margin-right:6px;
}
.pgbtn{
  min-width:26px;
  padding:3px 6px;
  font-size:11px;
  line-height:1.3;
  text-align:center;
}
.pgbtn:disabled{ opacity:.3; }

/* ─── Футер ─────────────────────────────────────────────── */
footer{
  flex:none;
  padding:8px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:center;
}
.btn-reset{
  font:inherit; font-size:11px;
  color:var(--faint);
  background:none; border:none;
  cursor:pointer;
  padding:6px 12px;
  border-radius:6px;
  transition:color .15s, background .15s;
}
.btn-reset:hover{ color:var(--red); background:rgba(255,93,108,.07); }

/* ─── Оверлей «нет связи» ───────────────────────────────── */
.overlay{
  position:fixed; inset:0; z-index:50;
  background:rgba(13,16,23,.82);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:flex; flex-direction:column; gap:16px;
  align-items:center; justify-content:center;
  color:var(--dim);
  font-size:13px;
  letter-spacing:.04em;
}
.pulse{
  width:12px; height:12px; border-radius:50%;
  background:var(--faint);
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:.35; transform:scale(.85); box-shadow:0 0 0 rgba(139,147,167,0); }
  50%{ opacity:1; transform:scale(1); box-shadow:0 0 18px rgba(139,147,167,.45); }
}

/* ─── Модалки ───────────────────────────────────────────── */
.mback{
  position:fixed; inset:0; z-index:70;
  background:rgba(5,7,11,.66);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  display:flex; align-items:center; justify-content:center;
  padding:24px 16px;
}
.modal{
  width:100%; max-width:420px;
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  background:linear-gradient(180deg, #131826, #0f131d);
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  padding:20px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  animation:mIn .18s ease-out;
}
@keyframes mIn{
  from{ opacity:0; transform:translateY(8px) scale(.985); }
  to{ opacity:1; transform:none; }
}
.m-title{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:16px;
  font-size:14px; font-weight:600;
}
.m-x{
  background:none; border:none;
  color:var(--faint);
  cursor:pointer;
  font-size:15px;
  padding:2px 7px;
  border-radius:6px;
  transition:color .15s, background .15s;
}
.m-x:hover{ color:var(--text); background:rgba(255,255,255,.06); }

.f-label{
  display:block;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--faint);
  margin:14px 0 6px;
}
.modal .input{ width:100%; }
textarea.input{ resize:vertical; min-height:132px; line-height:1.7; }

.seg{ display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.seg button{
  flex:1;
  font:inherit; font-size:12px;
  background:transparent; border:none;
  color:var(--dim);
  padding:8px;
  cursor:pointer;
  transition:background .15s, color .15s;
}
.seg button.on{ background:rgba(124,141,255,.15); color:var(--text); }

#remoteFields.off{ opacity:.35; pointer-events:none; }

.m-actions{ margin-top:20px; display:flex; justify-content:flex-end; }
.btn-primary{
  font:inherit; font-size:12px;
  background:linear-gradient(180deg, rgba(124,141,255,.26), rgba(124,141,255,.13));
  border:1px solid rgba(124,141,255,.42);
  color:#dbe3ff;
  padding:8px 20px;
  border-radius:8px;
  cursor:pointer;
  transition:background .15s;
}
.btn-primary:hover{ background:linear-gradient(180deg, rgba(124,141,255,.36), rgba(124,141,255,.2)); }

/* ─── Тост ──────────────────────────────────────────────── */
.toast{
  position:fixed; left:50%; bottom:54px; z-index:80;
  transform:translateX(-50%);
  background:#161b28;
  border:1px solid var(--line);
  color:var(--text);
  padding:8px 15px;
  border-radius:8px;
  font-size:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  white-space:nowrap;
  max-width:calc(100vw - 32px);
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ─── Скроллбар ─────────────────────────────────────────── */
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.09); border-radius:4px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.16); }
::-webkit-scrollbar-track{ background:transparent; }

/* примечание в модалках (вход: пароль не сохраняется) */
.f-note {
  font-size: 11px;
  color: #6b7488;
  margin: 6px 0 2px;
  line-height: 1.45;
}

/* менеджер кошельков в модалке */
.wl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 0 6px;
  font-size: 12px;
  color: #8b93a7;
}
.wl-head b { color: #cfd6e4; font-family: ui-monospace, monospace; }
.wl-search { max-width: 200px; font-size: 12px; padding: 5px 9px; }
.wl-list {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  max-height: 34vh;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
}
.wl-list:empty { display: none; }
.wl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 10px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: #b9c1d4;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.wl-row:last-child { border-bottom: none; }
.wl-row:hover { background: rgba(255,255,255,.03); }
.wl-del {
  background: none;
  border: none;
  color: #6b7488;
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 5px;
}
.wl-del:hover { color: #ef4444; background: rgba(239,68,68,.12); }
.wl-more { padding: 6px 10px; color: #6b7488; font-size: 11px; font-family: inherit; }

/* тумблер «только FOMO» в пагинации */
.fomo-toggle {
  font-size: 12px;
  padding: 4px 12px;
  color: #8b93a7;
  border-radius: 7px;
}
.fomo-toggle.on {
  color: #e9d5ff;
  background: rgba(167,139,250,.16);
  box-shadow: inset 0 0 0 1px rgba(167,139,250,.45);
}

/* ─── Телефон (PWA): узкий экран ───────────────────────────── */
@media (max-width: 640px){
  header{ flex-wrap:wrap; padding:10px 10px; padding-top:calc(10px + env(safe-area-inset-top)); gap:6px; }
  header #ca{ flex:1 1 100%; order:-1; font-size:14px; padding:10px; } /* #ca перебивает .input по специфичности */
  header .btn{ flex:1 1 auto; padding:10px 8px; font-size:13px; }
  .hero{ padding:16px 12px; }
  .net{ font-size:38px; }
  .chips{ gap:6px; }
  .chip{ font-size:11px; padding:5px 8px; }
  .rag-parts{ font-size:11px; line-height:1.7; }
  .feed{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .feed-table{ min-width:520px; }
  .feed-table th, .feed-table td{ padding:8px 6px; font-size:12px; }
  .feed-filter{ padding:8px 10px; }
  .feed-pager{ flex-wrap:wrap; gap:6px; }
  .modal{ width:calc(100vw - 20px); max-width:none; }
  .modal .input, .modal textarea{ font-size:16px; } /* iOS не зумит поле при 16px */
}


/* Подсказка под главной цифрой: что с ней делать (добавлено 24.09.2026, когда
   выяснилось, что подписи «Зашло/Вышло» читались как итог рана) */
.hero-hint {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(226, 222, 255, .38);
}