/* ==========================================================================
   Kripto bot -- kontrolna tabla
   Boje su iz validirane tamne palete (surface #1a1a19).
   EMA linije su ORDINALNA rampa jedne boje (9 -> 21 -> 50 = svetlo -> tamno),
   jer su tri EMA uredjen niz a ne tri nezavisne kategorije.
   Svece nose smer i geometrijom (prazna = rast, puna = pad), pa boja nije
   jedini kanal -- resava daltonizam bez oslanjanja na crveno/zeleno.
   ========================================================================== */

:root {
  color-scheme: dark;

  --plane:        #0d0d0d;   /* pozadina stranice */
  --surface:      #1a1a19;   /* kartice i grafikon */
  --surface-2:    #232322;
  --text:         #ffffff;
  --text-2:       #c3c2b7;
  --muted:        #898781;
  --grid:         #2c2c2a;
  --axis:         #383835;
  --border:       rgba(255, 255, 255, 0.10);

  /* status -- uvek uz ikonicu i tekst, nikad boja sama */
  --good:         #0ca30c;
  --warning:      #fab219;
  --serious:      #ec835a;
  --critical:     #d03b3b;

  /* EMA ordinalna rampa (validirano: monotona svetlina, jedan ton) */
  --ema-fast:     #cde2fb;
  --ema-mid:      #86b6ef;
  --ema-slow:     #3987e5;

  --radius:       10px;
  --gap:          16px;
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

/* Mora !important: .login-wrap i .banner imaju display:grid/flex, sto bi
   inace pobedilo ugradjeni [hidden] { display:none } i ostavilo skrivene
   elemente na ekranu. */
[hidden] { display: none !important; }

/* Strategy workspaces retain their own cards, controls and background tone. */
.strategy-tabs { display:flex; gap:8px; overflow-x:auto; padding:12px 0; position:sticky; top:0; z-index:20; background:var(--plane); }
.strategy-tabs button { flex:0 0 auto; border:1px solid var(--tab-accent); background:var(--tab-surface); color:var(--text-2); border-radius:9px; padding:11px 16px; font:inherit; cursor:pointer; }
[data-strategy="shone"] { --tab-accent:#5b9fce; --tab-surface:#111f2b; }
[data-strategy="binance"] { --tab-accent:#bca354; --tab-surface:#252116; }
[data-strategy="solana"] { --tab-accent:#5cab96; --tab-surface:#112720; }
[data-strategy="break"] { --tab-accent:#b68ad0; --tab-surface:#251b2e; }
[data-strategy="other"] { --tab-accent:#cb9270; --tab-surface:#2b1f18; }
[data-strategy="research"] { --tab-accent:#8e9aa9; --tab-surface:#1b222c; }
.strategy-tabs button[aria-selected="true"] { color:#fff; box-shadow:inset 0 -3px var(--tab-accent); font-weight:650; }
.strategy-tabs button:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.strategy-panel { --surface:var(--tab-surface); background:var(--tab-surface); border:1px solid var(--tab-accent); border-radius:12px; padding:16px; margin:0 0 20px; }
.strategy-intro { color:var(--text-2); margin:0 0 16px; font-size:14px; }
.strategy-panel > .runner { max-width:700px; }
@media (max-width:640px) { .strategy-panel { padding:10px; } .strategy-tabs button { padding:10px 12px; font-size:13px; } }

body {
  margin: 0;
  padding: 0 20px 40px;
  background: var(--plane);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
}

h1, h2 { font-weight: 600; margin: 0; }
h1 { font-size: 22px; }
h2 { font-size: 15px; letter-spacing: .01em; }

.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------- prijava ---------------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; }

.login-card {
  width: min(360px, 92vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  display: flex; flex-direction: column; gap: 6px;
}
.login-card h1 { margin-bottom: 2px; }
.login-card p { margin: 0 0 14px; }
.login-card label { font-size: 13px; color: var(--text-2); }
.login-card input {
  background: var(--plane); border: 1px solid var(--axis); color: var(--text);
  border-radius: 8px; padding: 11px 12px; font: inherit; margin-bottom: 12px;
}
.login-card input:focus-visible { outline: 2px solid var(--ema-slow); outline-offset: 1px; }
.login-card button { padding: 11px; }
.error { color: var(--critical); margin: 12px 0 0; font-size: 13.5px; }

/* ---------------- zaglavlje ---------------- */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--gap); padding: 16px 0; flex-wrap: wrap;
}
.topbar-left { display: flex; align-items: center; gap: 12px; }
.topbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.logo { font-size: 26px; }
.pair { font-size: 17px; font-weight: 600; }

.badge {
  font-size: 12px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
  white-space: nowrap;
}
.badge.is-live     { border-color: var(--critical); color: #ff9f9f; }
.badge.is-dry      { border-color: var(--warning);  color: #ffd98a; }
.badge.is-testnet  { border-color: var(--ema-slow); color: #a9ccf5; }
.badge.is-active   { border-color: var(--good);     color: #7fdd7f; }
.badge.is-paused   { border-color: var(--axis);     color: var(--muted); }
.badge.is-kill     { border-color: var(--critical); color: #ff9f9f; }

.conn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.conn i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); display: block; }
.conn.is-on i  { background: var(--good); }
.conn.is-off i { background: var(--critical); }

/* ---------------- baneri ---------------- */
.banner {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface); margin-bottom: var(--gap);
}
.banner-icon { font-size: 20px; }
.banner div { flex: 1; }
.banner-critical { border-left: 3px solid var(--critical); }
.banner-warning  { border-left: 3px solid var(--warning); }

/* ---------------- dugmad ---------------- */
.btn {
  font: inherit; font-size: 13.5px; font-weight: 500;
  padding: 9px 14px; border-radius: 8px; cursor: pointer;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--axis);
}
.btn:hover:not(:disabled) { background: #2d2d2b; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--ema-slow); outline-offset: 2px; }
.btn-good     { border-color: var(--good);     color: #7fdd7f; }
.btn-critical { border-color: var(--critical); color: #ff9f9f; }
.btn-warning  { border-color: var(--warning);  color: #ffd98a; }
.btn-ghost    { background: none; border-color: var(--border); color: var(--text-2); }

.controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.control-msg { font-size: 13px; color: var(--text-2); }
.control-msg.is-err { color: var(--critical); }

.pair-picker { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pair-picker input {
  background: var(--plane); border: 1px solid var(--axis); color: var(--text);
  border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13.5px;
  text-transform: uppercase; width: 110px;
}
/* Unos je uppercase (oznake parova jesu), ali placeholder ne treba da bude. */
.pair-picker input::placeholder { text-transform: none; color: var(--muted); }
.pair-picker input:focus-visible { outline: 2px solid var(--ema-slow); outline-offset: 1px; }
.pair-picker input:disabled { opacity: .45; cursor: not-allowed; }
.pair-hint { margin: 0 0 var(--gap); }
@media (max-width: 720px) { .pair-picker { margin-left: 0; width: 100%; }
  .pair-picker input { flex: 1; width: auto; } }

/* ---------------- KPI plocice ---------------- */
.tiles {
  display: grid; gap: var(--gap); margin-bottom: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.tile {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
}
.tile-label { font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.tile-value { font-size: 26px; font-weight: 600; line-height: 1.2; }
.tile-sub { font-size: 12.5px; margin-top: 3px; }
.is-good     { color: var(--good); }
.is-critical { color: var(--critical); }

.meter { height: 5px; border-radius: 3px; background: #16324f; margin: 9px 0 5px; overflow: hidden; }
.meter-fill { height: 100%; border-radius: 3px; background: var(--ema-slow); width: 0; }
.meter-fill.is-warning  { background: var(--warning); }
.meter-fill.is-critical { background: var(--critical); }

/* ---------------- raspored ---------------- */
.grid { display: grid; gap: var(--gap); grid-template-columns: 1.55fr 1fr; align-items: start; }
.col { display: flex; flex-direction: column; gap: var(--gap); }
@media (max-width: 1000px) { .grid { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; margin-bottom: var(--gap);
}
.col .card { margin-bottom: 0; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }

.pill {
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
  white-space: nowrap;
}
.pill.is-good     { border-color: var(--good);     color: #7fdd7f; }
.pill.is-critical { border-color: var(--critical); color: #ff9f9f; }

.seg { display: inline-flex; border: 1px solid var(--axis); border-radius: 8px; overflow: hidden; }
.seg-btn {
  font: inherit; font-size: 12.5px; padding: 5px 12px; cursor: pointer;
  background: none; border: 0; color: var(--muted);
}
.seg-btn.is-active { background: var(--surface-2); color: var(--text); }

/* ---------------- grafikon ---------------- */
.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; font-size: 12.5px; color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 2px; border-radius: 1px; display: block; }

.chart-wrap { position: relative; }
canvas { width: 100%; display: block; }
.chart-note { margin: 8px 0 0; }

.tooltip {
  position: absolute; pointer-events: none; z-index: 5;
  background: #000; border: 1px solid var(--axis); border-radius: 8px;
  padding: 8px 10px; font-size: 12px; line-height: 1.6; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: var(--text-2);
}
.tooltip b { color: var(--text); font-weight: 600; }

/* ---------------- uslovi ---------------- */
.cond-trend { font-size: 12.5px; margin-bottom: 10px; }
.setup-line {
  margin-top: 6px; padding: 6px 10px; border-radius: 7px;
  background: var(--surface-2); color: var(--text-2); font-size: 12.5px;
}
.setup-line.is-armed { border-left: 3px solid var(--good); color: #7fdd7f; }

.checks .stage-head {
  border-top: 0; padding: 12px 0 4px; font-size: 11.5px; color: var(--muted);
  letter-spacing: .02em; display: block;
}
.checks .stage-head:first-child { padding-top: 0; }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.checks li { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid var(--grid); }
.checks li:first-child { border-top: 0; }
.check-icon { flex: 0 0 18px; font-size: 13px; line-height: 1.4; }
.check-name { font-weight: 500; font-size: 13.5px; }
.check-detail { color: var(--muted); font-size: 12.5px; }
.check-pass .check-name { color: #7fdd7f; }
.check-fail .check-name { color: var(--text-2); }
.note { color: var(--text-2); margin-top: 10px; padding: 9px 11px; background: var(--surface-2); border-radius: 8px; }

/* ---------------- pozicija ---------------- */
.empty { color: var(--muted); font-size: 13.5px; padding: 8px 0; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; margin: 0 0 16px; font-size: 13.5px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.trail-head { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-2); margin-bottom: 14px; }
.trail-track { position: relative; height: 6px; border-radius: 3px; background: var(--surface-2); margin: 0 4px; }
.trail-zone { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: #16324f; }
/* Samo crtice na traci. Brojevi idu u legendu ispod -- da se oznake
   nikad ne preklope kad su stop, ulaz i cena blizu jedno drugom. */
.trail-mark { position: absolute; transform: translateX(-50%); width: 2px; }
.trail-mark i { display: block; width: 2px; height: 16px; margin-top: -5px; border-radius: 1px; }
.trail-mark b { display: none; }
.trail-stop  i { background: var(--critical); }
.trail-stop.is-locked i { background: var(--good); }
.trail-entry i { background: var(--muted); }
.trail-price i { background: var(--ema-fast); height: 22px; margin-top: -8px; }

.trail-key { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 20px; }
.trail-key div { font-size: 11.5px; }
.trail-key dt { color: var(--muted); display: flex; align-items: center; gap: 5px; margin-bottom: 2px; }
.trail-key dt i { width: 8px; height: 8px; border-radius: 2px; display: block; flex: none; }
.trail-key dd { margin: 0; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.trail-key .k-stop dd { color: var(--critical); }
.trail-key .k-stop dt i { background: var(--critical); }
.trail-key .k-stop.is-locked dd { color: var(--good); }
.trail-key .k-stop.is-locked dt i { background: var(--good); }
.trail-key .k-entry dt i { background: var(--muted); }
.trail-key .k-price dd { color: var(--ema-fast); }
.trail-key .k-price dt i { background: var(--ema-fast); }

/* ---------------- dogadjaji ---------------- */
.events { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.events li { padding: 8px 0; border-top: 1px solid var(--grid); font-size: 13px; color: var(--text-2); }
.events li:first-child { border-top: 0; }
.events time { display: block; color: var(--muted); font-size: 11.5px; margin-bottom: 2px; }

/* ---------------- tabela ---------------- */
.table-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: left; font-weight: 500; color: var(--muted); font-size: 12px;
  padding: 0 12px 8px 0; border-bottom: 1px solid var(--axis); white-space: nowrap;
}
.tbl td { padding: 9px 18px 9px 0; border-bottom: 1px solid var(--grid); vertical-align: top; }
.tbl th { padding-right: 18px; }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl td:last-child, .tbl th:last-child { padding-right: 0; }
.tbl .side-buy  { color: var(--good); }
.tbl .side-sell { color: var(--critical); }

/* ---------------- virtuelni trejd ---------------- */
.tiles-compact { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tiles-compact .tile { padding: 12px 14px; }
.tiles-compact .tile-value { font-size: 20px; }

.paper-chart { margin: 4px 0 18px; }
.paper-chart h3 { font-size: 13.5px; font-weight: 600; margin: 0; }
.paper-chart .card-head { margin-bottom: 8px; }

.reset-form {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--grid);
}
.reset-form input {
  background: var(--plane); border: 1px solid var(--axis); color: var(--text);
  border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13.5px; width: 120px;
  font-variant-numeric: tabular-nums;
}
.tbl .reason { color: var(--text-2); }
.tbl .r-pos { color: var(--good); }
.tbl .r-neg { color: var(--critical); }

/* ---------------- podesavanja ---------------- */
.settings-intro { margin: 0 0 16px; max-width: 78ch; }
.settings-intro code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }

/* Kolone (a ne grid) da kratke grupe ne ostavljaju prazan prostor u redu. */
.settings-groups { columns: 330px; column-gap: 18px; }
.sgroup {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 14px;
  break-inside: avoid; margin-bottom: 18px;
}
.sgroup h3 { font-size: 13px; font-weight: 600; margin: 0 0 10px; color: var(--text-2); }
.sfield { padding: 9px 0; border-top: 1px solid var(--grid); }
.sfield:first-of-type { border-top: 0; }
.sfield-row { display: flex; align-items: center; gap: 10px; }
.sfield label { flex: 1; font-size: 13px; }
.sfield input, .sfield select {
  background: var(--plane); border: 1px solid var(--axis); color: var(--text);
  border-radius: 7px; padding: 6px 9px; font: inherit; font-size: 13px;
  width: 104px; text-align: right; font-variant-numeric: tabular-nums;
}
.sfield select { width: 128px; text-align: left; }
.sfield input:focus-visible, .sfield select:focus-visible {
  outline: 2px solid var(--ema-slow); outline-offset: 1px;
}
.sfield input:disabled, .sfield select:disabled { opacity: .45; cursor: not-allowed; }
.sfield .unit { font-size: 11.5px; color: var(--muted); min-width: 62px; }
.sfield .help { font-size: 11.5px; color: var(--muted); margin-top: 4px; max-width: 62ch; }
.sfield.is-dirty { background: rgba(57, 135, 229, .07); border-radius: 6px; }
.sfield.is-dirty input, .sfield.is-dirty select { border-color: var(--ema-slow); }
.sfield.is-locked .help { color: var(--warning); }

.settings-bar {
  position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px;
  margin-top: 18px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--ema-slow);
}
.settings-bar span { flex: 1; font-size: 13px; }
.settings-msg { font-size: 13px; margin: 12px 0 0; white-space: pre-line; }
.settings-msg.is-err { color: var(--critical); }
.settings-msg.is-ok { color: var(--good); }

.foot { margin-top: 28px; text-align: center; }

/* Tekst samo za citace ekrana -- da stanje uslova ne zavisi od ikonice/boje. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------- strategije (plugini) ---------------- */
.strat-bar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 12px; margin-bottom: 10px;
}
.strat-bar select {
  font: inherit; font-size: 13px; padding: 6px 10px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--axis); border-radius: 8px;
}
.strat-bar select:focus-visible { outline: 2px solid var(--ema-slow); outline-offset: 1px; }
.strat-bar select:disabled { opacity: .45; cursor: not-allowed; }
.strat-bar .control-msg { flex-basis: 100%; }

#strat-desc { margin: 0 0 12px; max-width: 78ch; }

/* Tabele plugina: naslov iznad, telo skroluje vodoravno ako treba. */
.ptable { margin-top: 14px; }
.ptable h4 {
  font-size: 13px; font-weight: 600; color: var(--text-2);
  margin: 0 0 8px; letter-spacing: .01em;
}
.ptable .empty { font-size: 13px; }

.notes-list { margin: 14px 0 0; padding-left: 18px; }
.notes-list li { margin-bottom: 4px; }

.strat-journal-head { margin-top: 18px; }
.strat-journal-head h3 { flex: 0 0 auto; }
.strat-journal-head .muted { flex: 1; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-variant-numeric: tabular-nums; }
#strat-journal td { font-size: 12.5px; }
#strat-journal .jkind {
  font-size: 11px; padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-2); white-space: nowrap;
}
#strat-journal .jkind.is-trade  { border-color: var(--good);     color: #7fdd7f; }
#strat-journal .jkind.is-signal { border-color: var(--ema-slow); color: #9ec9ff; }
#strat-journal .jkind.is-error  { border-color: var(--critical); color: #ff9f9f; }
#strat-journal .jdetail {
  color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; word-break: break-word;
}


/* ---------------- dugmad strategije i istrazivanje ---------------- */
.strat-actions {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px;
}
.strat-actions .btn { font-size: 12.5px; }
.strat-actions select {
  font: inherit; font-size: 12.5px; padding: 6px 10px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--axis); border-radius: 8px;
}

.proposal {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; margin-bottom: 12px; background: var(--surface-2);
}
.proposal-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.proposal-head h4 { margin: 0; font-size: 14px; }
.proposal-hypothesis { font-size: 13px; margin: 0 0 10px; color: var(--text-2); }
.proposal-grid {
  display: grid; gap: 4px 18px; font-size: 12.5px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: 10px;
}
.proposal-grid span { color: var(--muted); }
.proposal-grid b { font-weight: 600; }
.proposal pre {
  font-size: 11.5px; background: var(--surface); padding: 10px;
  border-radius: 8px; overflow-x: auto; margin: 0 0 10px;
  border: 1px solid var(--grid); white-space: pre-wrap;
}
.proposal-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.proposal-actions input {
  font: inherit; font-size: 12.5px; padding: 5px 9px; width: 130px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--axis); border-radius: 8px;
}
.checks-list { list-style: none; padding: 0; margin: 0 0 10px; font-size: 12px; }
.checks-list li { padding: 2px 0; }
.checks-list .ok   { color: var(--good); }
.checks-list .fail { color: var(--critical); }

/* ==================================================================
   botovi4 §C, §E: tri runnera, poredjenje V1/V2, live decision panel
   ================================================================== */
.cards3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.card.runner .runner-body { padding: 4px 2px 2px; }
.runner-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, .06));
}
.runner-row:last-of-type { border-bottom: 0; }
.runner-row span { color: var(--muted, #8b93a7); font-size: 13px; }
.runner-row b { font-variant-numeric: tabular-nums; }

.grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
/* Objasnjenje score-a: znak nosi boju, tekst ostaje citljiv (§C2). */
ul.reasons { list-style: none; margin: 0; padding: 0; }
ul.reasons li {
  padding: 3px 0;
  font-size: 13px;
  line-height: 1.45;
}
ul.reasons li.good { color: var(--good, #4ade80); }
ul.reasons li.bad { color: var(--bad, #f87171); }

/* Upozorenja o malom uzorku moraju da se VIDE, ne da se prelete (§C1). */
ul.warnings {
  list-style: none;
  margin: 10px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--warn, #fbbf24);
  background: rgba(251, 191, 36, .07);
  border-radius: 4px;
}
ul.warnings li {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted, #8b93a7);
  padding: 2px 0;
}
tr.muted td { opacity: .55; }
/* Shone Short standalone chart and structured debug details. */
.shone-details { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow: auto; font-size: 12px; }
#shone-panel .runner-row { gap: 16px; padding: 5px 0; overflow-wrap: anywhere; }
#shone-panel .runner-row b { text-align: right; max-width: 75%; }
#shone-chart { display: block; touch-action: none; cursor: crosshair; }
#shone-trades { display: flex; flex-wrap: wrap; gap: 8px; }
/* Focused trend-break controls inherit the dashboard palette. */
.break-settings { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 12px 0; }
.break-settings label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.break-settings input[type="number"] { width: 145px; }
.break-settings input[type="checkbox"] { width: 22px; height: 22px; }
.break-inspection { margin: 18px 0; padding: 12px; border: 1px solid #374151; border-radius: 8px; }
.break-inspection > summary { cursor: pointer; font-weight: 600; margin-bottom: 12px; }
.break-inspection > label { display: inline-block; margin: 8px 16px 8px 0; }
.break-review-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 12px; }
.break-review-table th, .break-review-table td { text-align: left; padding: 8px; border-bottom: 1px solid #374151; }
.break-tip { border-left: 3px solid #6ca8ff; padding: 8px 12px; margin: 12px 0; }
.break-tip p { margin: 6px 0; }
#break-panel { margin-top: 16px; border-color: #537bb0; }

/* Independent Scalp V1 instances reuse the complete dashboard. */
.strategy-tabs .pair-tab { border-bottom: 3px solid var(--pair-color); }
.strategy-tabs .pair-tab[aria-selected="true"] { color: var(--pair-color); box-shadow: inset 0 0 0 1px var(--pair-color); }
.pair-add-form, .pair-tools { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin: 14px 0; }
.pair-add-form label { display: grid; gap: 5px; }
.pair-add-form select { max-width: 260px; }
.pair-add-form input, .pair-add-form select, .pair-tools input { background: var(--plane); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font: inherit; max-width: 100%; }
.pair-tools { padding: 10px; }
.pair-tools input[type="color"] { width: 48px; height: 36px; padding: 2px; }
.pair-dashboard { width: 100%; height: 2300px; border: 0; background: transparent; }
.pair-message, .pair-status { overflow-wrap: anywhere; }
@media (max-width: 700px) { .pair-dashboard { height: 3700px; } .pair-add-form label { width: 100%; } }

.important-settings { background: #122d36; border: 1px solid #3299ad; border-radius: var(--radius); padding: 18px; margin-bottom: 20px; }
.important-settings h3 { color: #9be8f6; margin: 0 0 10px; font-size: 17px; }
.important-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 10px 24px; }
.important-settings .sfield { border-color: #2b5260; }
.paper-payoff { background: var(--surface-2); padding: 12px; border-radius: 8px; line-height: 1.6; }
.sfield input[type="checkbox"] { width: 22px; height: 22px; }
@media(max-width: 640px) { .important-fields { grid-template-columns: 1fr; } .important-settings { padding: 12px; } .sfield-row { flex-wrap: wrap; } }
:root { --lab-accent: #22d3ee; }
.lab-settings fieldset { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; border:1px solid #334155; border-radius:10px; margin:16px 0; padding:16px; }
.lab-settings .lab-important { background:#123440; border-color:#22d3ee; }
.lab-settings label { display:flex; flex-direction:column; gap:5px; }
.lab-settings input,.lab-settings select { max-width:100%; min-width:0; padding:8px; border:1px solid #526176; border-radius:6px; background:#111c2d; color:#edf4ff; font:inherit; }
.lab-settings input[type=checkbox] { align-self:flex-start; }
.lab-table { overflow-x:auto; margin:12px 0; }
.lab-table table { width:100%; min-width:760px; border-collapse:collapse; }
.lab-table th,.lab-table td { padding:9px; text-align:left; border-bottom:1px solid #334155; overflow-wrap:anywhere; }
.lab-chart { width:100%; height:370px; display:block; }
.lab-macd { width:100%; height:130px; display:block; }
.lab-controls { display:flex; gap:12px; }
.lab-message { color:#facc15; }