*, *::before, *::after { font-family: 'Fira Code', 'Courier New', monospace !important; box-sizing: border-box; }

:root {
  --green:  #22c55e;
  --blue:   #38bdf8;
  --red:    #ef4444;
  --amber:  #f59e0b;
  --bg:     #020202;
  --dim:    #374151;
  --border: #166534;
  --borderbright: #22c55e;
}

html, body { background: var(--bg); color: var(--green); margin: 0; padding: 0; min-height: 100vh; }

/* CRT scanlines overlay — transform: translateZ(0) promuje do własnej warstwy GPU,
   zapobiegając repaintowi przy każdym scrollu strony */
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 3px,
    rgba(0,0,0,0.13) 3px, rgba(0,0,0,0.13) 4px
  );
  transform: translateZ(0);
}

/* Subtle green radial glow */
body::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 9998;
  background: radial-gradient(ellipse at 50% 40%, rgba(34,197,94,0.04) 0%, transparent 65%);
  transform: translateZ(0);
}

.glow-g { text-shadow: 0 0 8px rgba(34,197,94,0.7); }
.glow-b { text-shadow: 0 0 8px rgba(56,189,248,0.7); }
.glow-r { text-shadow: 0 0 8px rgba(239,68,68,0.7); }

/* scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); }
::-webkit-scrollbar-thumb:hover { background: var(--borderbright); }

/* blink */
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.blink { animation: blink 1s step-end infinite; will-change: opacity; }
@keyframes pulse-slow { 0%,100%{opacity:.5} 50%{opacity:1} }
.pulse-slow { animation: pulse-slow 2s ease-in-out infinite; }

/* tab buttons */
.tab-btn {
  border: 1px solid var(--border);
  padding: 6px 14px;
  background: transparent;
  color: var(--border);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  font-size: 12px;
}
.tab-btn:hover  { border-color: var(--borderbright); color: var(--green); }
.tab-btn.active { background: var(--green); color: var(--bg); border-color: var(--borderbright); font-weight: 600; }

/* overflow dropdown */
#tab-overflow-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 500;
  background: var(--bg);
  border: 1px solid var(--borderbright);
  border-top: none;
  min-width: 160px;
}
#tab-overflow-menu .tab-btn {
  display: block;
  width: 100%;
  border-left: none;
  border-right: none;
  border-top: none;
  text-align: left;
}

/* main panel border */
.panel-wrap { border: 1px solid var(--borderbright); border-top: none; padding: 16px; }

/* drop zone */
.drop-zone {
  border: 2px dashed var(--border);
  padding: 28px 16px;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
  color: var(--border);
  min-height: 120px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.drop-zone:hover, .drop-zone.drag-over {
  border-color: var(--borderbright);
  background: rgba(34,197,94,0.04);
  color: var(--green);
}

/* terminal output box — contain: content izoluje layout i paint wewnątrz boxa,
   zapobiegając propagacji re-layoutu do reszty strony */
.term-box {
  background: #000;
  border: 1px solid var(--border);
  padding: 12px;
  overflow-y: auto;
  overflow-x: auto;
  font-size: 11px;
  line-height: 1.55;
  color: var(--green);
  white-space: pre-wrap;
  contain: content;
}

/* nagłówek tabeli Top10 (TICKER/SCORE/PRICE/...) — zostaje widoczny przy
   przewijaniu #scores-out; tło #000 (jak .term-box) zasłania wiersze
   przewijające się pod spodem, żeby tekst się nie nakładał.
   top:-12px + margin-top:-12px: `.term-box` ma padding:12px, ale
   overflow-y:auto obcina scroll na krawędzi border, NIE na krawędzi
   paddingu — bez tej korekty sticky (top:0) łapie się 12px za nisko,
   zostawiając szczelinę w paddingu, w której prześwituje przewijany
   wiersz zza nagłówka (zaobserwowane, nie teoretyczne — patrz zrzut
   ekranu w historii sesji). Ujemny margines/top wyciąga element na
   prawdziwą krawędź scrollportu — to musi zostać dokładnie -12px
   (dopasowane do paddingu `.term-box`), inaczej wraca szczelina.
   padding-top:22px (więcej niż 12px potrzebne tylko do zniwelowania
   marginesu) celowo zostawia oddech nad tekstem, żeby przypięty nagłówek
   nie siedział całkiem płasko na krawędzi boxa (zgłoszone jako "nagłówek
   przysłania legendę SCORE" — przy top/margin=-12px i padding=12px
   zostawało dosłownie 1px odstępu od górnej krawędzi). */
.score-hdr-sticky {
  position: sticky;
  top: -12px;
  margin-top: -12px;
  padding-top: 22px;
  background: #000;
  z-index: 1;
}

/* action buttons */
.btn-action {
  border: 1px solid;
  padding: 8px 12px;
  text-align: left;
  cursor: pointer;
  font-size: 11px;
  background: transparent;
  width: 100%;
  transition: all .15s;
}
.btn-green { border-color: var(--border); color: var(--border); }
.btn-green:hover { border-color: var(--green); color: var(--green); }
.btn-blue  { border-color: #164e63; color: #0e7490; }
.btn-blue:hover  { border-color: var(--blue); color: var(--blue); }
.btn-red   { border-color: #7f1d1d; color: #991b1b; }
.btn-red:hover   { border-color: var(--red); color: var(--red); }

/* colors */
.c-g { color: var(--green); }
.c-b { color: var(--blue); }
.c-r { color: var(--red); }
.c-a { color: var(--amber); }
.c-w { color: #e5e7eb; }
.c-d { color: #4b5563; }
.c-border { color: var(--border); }

pre { margin: 0; white-space: pre; }
select, input {
  background: #000; border: 1px solid var(--border); color: var(--green);
  padding: 4px 8px; font-size: 11px; outline: none;
}
select:focus, input:focus { border-color: var(--green); }
option { background: #000; }

.espi-row { padding: 1px 0; }
.espi-row:hover { background: rgba(34,197,94,0.06); }

#espi-filter-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  padding-bottom: 4px;
}

.pre-scroll {
  display: block;
  white-space: pre;
  overflow-x: auto;
}

@media (max-width: 640px) {
  .af-cols { display: none; }
  .mob-hide { display: none; }
}

/* ── Portfolio form inputs (#add-pos-form) ───────────────────────────────── */
.pos-form-input {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--green);
  font-size: 11px;
  padding: 3px 6px;
  width: 100%;
  outline: none;
  box-sizing: border-box;
}
.pos-form-input:focus { border-color: var(--borderbright); }
.pos-form-input::placeholder { color: var(--dim); }
.pos-form-input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(0.4);
  cursor: pointer;
}

.ticker-suggest-item:hover { background: rgba(34,197,94,0.1); }