:root{
  --bg:#0e1117; --panel:#161b24; --panel2:#1c2331; --line:#252d3b;
  --fg:#e4e8ef; --dim:#8b96a8; --dimmer:#5c6675;
  --up:#26a69a; --down:#ef5350; --flat:#78849a;
  --accent:#4c9aff; --warn:#f0a04b;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:14px/1.5 ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

header{
  display:flex; align-items:center; gap:28px; padding:0 22px;
  height:52px; background:var(--panel); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
}
.brand{font-size:17px; font-weight:700; color:var(--fg); letter-spacing:-.3px}
.brand span{color:var(--accent)}
nav{display:flex; gap:4px; flex-wrap:wrap}
nav a{
  color:var(--dim); padding:6px 12px; border-radius:6px; font-size:13px;
}
nav a:hover{background:var(--panel2); color:var(--fg); text-decoration:none}
nav a.on{background:var(--panel2); color:var(--fg)}

main{max-width:1500px; margin:0 auto; padding:22px}
footer{
  max-width:1500px; margin:0 auto; padding:26px 22px 40px;
  color:var(--dimmer); font-size:12px; border-top:1px solid var(--line);
}

h1{font-size:21px; margin:0 0 4px}
h2{font-size:15px; margin:26px 0 10px; color:var(--dim);
   text-transform:uppercase; letter-spacing:.7px; font-weight:600}
.sub{color:var(--dim); font-size:13px; margin:0 0 18px}

.panel{background:var(--panel); border:1px solid var(--line);
       border-radius:9px; padding:16px; margin-bottom:18px}

/* statistické dlaždice */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); gap:10px; margin-bottom:22px}
.tile{background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:13px 15px}
.tile .k{color:var(--dim); font-size:11px; text-transform:uppercase; letter-spacing:.6px}
.tile .v{font-size:23px; font-weight:600; margin-top:3px; font-variant-numeric:tabular-nums}

/* karty doporučení */
.recs{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:12px}
.rec{background:var(--panel); border:1px solid var(--line); border-left-width:4px;
     border-radius:9px; padding:14px}
.rec.BUY{border-left-color:var(--up)}
.rec.SELL{border-left-color:var(--down)}
.rec.HOLD{border-left-color:var(--flat)}
.rec .top{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.rec .sym{font-size:17px; font-weight:700}
.rec .nm{color:var(--dim); font-size:12px}
.rec .why{color:var(--dim); font-size:12.5px; margin-top:9px; line-height:1.45}
.rec .meta{display:flex; gap:14px; margin-top:10px; font-size:11.5px; color:var(--dimmer);
           font-variant-numeric:tabular-nums}

.badge{padding:2px 9px; border-radius:5px; font-size:11px; font-weight:700; letter-spacing:.4px}
.badge.BUY{background:rgba(38,166,154,.16); color:var(--up)}
.badge.SELL{background:rgba(239,83,80,.16); color:var(--down)}
.badge.HOLD{background:rgba(120,132,154,.16); color:var(--flat)}

table{width:100%; border-collapse:collapse; font-size:13px}
th{
  text-align:left; color:var(--dim); font-weight:600; font-size:11px;
  text-transform:uppercase; letter-spacing:.6px; padding:10px;
  border-bottom:1px solid var(--line); background:var(--panel);
  /* Sticky se pocita vuci nejblizsimu scroll kontejneru, coz je .scroll
     (overflow-x:auto dopocita overflow-y na auto). Proto top:0, ne odsazeni
     od horni listy stranky — to hlavicku posunulo dolu pres prvni radek.
     z-index je nutny, jinak bunky radku prekresli sticky hlavicku. */
  position:sticky; top:0; z-index:2;
}
td{padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top}
tr:hover td{background:var(--panel2)}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}

.pos{color:var(--up)} .neg{color:var(--down)} .neu{color:var(--flat)}
.dim{color:var(--dim)} .small{font-size:12px}
.tag{background:var(--panel2); color:var(--dim); padding:1px 7px;
     border-radius:4px; font-size:11px; margin-right:4px; display:inline-block}
.tag.a{background:rgba(76,154,255,.14); color:var(--accent)}

/* pruh síly dopadu */
.bar{height:5px; background:var(--panel2); border-radius:3px; overflow:hidden; min-width:52px}
.bar i{display:block; height:100%; background:var(--accent)}

form.filters{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:16px}
label{display:block; color:var(--dim); font-size:11px; text-transform:uppercase;
      letter-spacing:.5px; margin-bottom:4px}
input,select,button{
  background:var(--panel2); color:var(--fg); border:1px solid var(--line);
  border-radius:6px; padding:7px 11px; font:inherit; font-size:13px;
}
input:focus,select:focus{outline:1px solid var(--accent)}
button{background:var(--accent); color:#08101c; border-color:var(--accent);
       font-weight:600; cursor:pointer}
button:hover{filter:brightness(1.1)}

.chart{width:100%; height:420px}
.chart.sm{height:300px}

.note{background:rgba(240,160,75,.09); border:1px solid rgba(240,160,75,.28);
      color:#f0c08b; padding:11px 14px; border-radius:8px; font-size:12.5px; margin-bottom:16px}
.empty{color:var(--dimmer); padding:34px; text-align:center; font-size:13.5px}
/* Vodorovne rolovani sirokych tabulek. Dlouhe tabulky roluji i svisle
   uvnitr panelu, aby stranka nemela 9000 px a sticky hlavicka mela smysl. */
.scroll{overflow:auto; max-height:72vh}
/* Bez odsazeni: sticky hlavicka musi drzet na horni hrane kontejneru,
   jinak radky prosvitaji v mezere nad ni. Odsazeni resi bunky. */
.panel.scroll{padding:0}
.panel.scroll table{margin:0}

/* ── Log simulace ─────────────────────────────────────────────────── */
table.log td{font-size:12.5px}
.tag.lv-trade{background:rgba(76,154,255,.16); color:var(--accent)}
.tag.lv-warn {background:rgba(240,160,75,.16); color:var(--warn)}
.tag.lv-error{background:rgba(239,83,80,.16);  color:var(--down)}
.tag.lv-debug{background:var(--panel2); color:var(--dimmer)}
details summary{cursor:pointer}
details[open] summary{color:var(--accent)}
code{background:var(--panel2); padding:2px 6px; border-radius:4px; font-size:12px}