:root{--bg:#f6f7f9;--fg:#16191d;--muted:#6b7280;--line:#e3e6ea;--card:#fff;--accent:#0a6ed1;--accent-fg:#fff;--ok:#1f8a4c;--warn:#b7791f;--danger:#c0392b;--radius:10px;color-scheme:light}
/* svetlá téma je predvolená; tmavú si používateľ zapne prepínačom v hlavičke */
:root[data-theme=dark]{--bg:#131519;--fg:#eef1f5;--muted:#9aa2ae;--line:#2c3038;--card:#1b1e24;--accent:#3b8fe0;--ok:#4ade80;--warn:#f0b35a;--danger:#e05555;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--accent)}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.top h1{margin:0;font-size:16px}
.top nav a{margin-left:14px;font-size:13px;text-decoration:none}
.wrap{max-width:none;margin:0;padding:16px 20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:14px}
.card h2{margin:0 0 10px;font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
input[type=text],input[type=url],input[type=number],input[type=search],select{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg);font:inherit}
input[type=url]{flex:1;min-width:280px}
.btn{padding:8px 12px;border-radius:8px;border:1px solid transparent;font:inherit;font-weight:600;cursor:pointer;background:var(--accent);color:var(--accent-fg)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn--ghost{background:transparent;border-color:var(--line);color:var(--fg)}
.btn--danger{background:var(--danger);color:#fff}
.btn--sm{padding:5px 9px;font-size:12px}
.muted{color:var(--muted)}
.small{font-size:12px}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);cursor:pointer;white-space:nowrap}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr:hover td{background:rgba(10,110,209,.05)}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;border:1px solid var(--line);color:var(--muted)}
.badge--ok{color:var(--ok);border-color:currentColor}
.badge--warn{color:var(--warn);border-color:currentColor}
.badge--err{color:var(--danger);border-color:currentColor}
.badge--run{color:var(--accent);border-color:currentColor}
.real{font-weight:700}.real--good{color:var(--ok)}.real--bad{color:var(--danger)}.real--meh{color:var(--warn)}
.layout{display:grid;grid-template-columns:300px 1fr;gap:14px;align-items:start}
@media(max-width:900px){.layout{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:5px 9px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--fg);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.chip small{color:var(--muted);font-weight:500;margin-left:4px}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}.chip.on small{color:rgba(255,255,255,.85)}
.chip.empty:not(.on){opacity:.5}
label.check{display:flex;gap:7px;align-items:flex-start;font-size:13px;margin:6px 0;cursor:pointer}
.field{margin:10px 0}.field>span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-bottom:5px}
.prog{height:6px;background:var(--line);border-radius:999px;overflow:hidden;min-width:90px}.prog i{display:block;height:100%;background:var(--ok)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:20;padding:16px}
.modal>div{background:var(--card);border-radius:12px;padding:18px;max-width:900px;width:100%;max-height:90vh;overflow:auto}
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:#16191d;color:#fff;padding:9px 14px;border-radius:9px;font-size:13px;z-index:30}
.toast.err{background:var(--danger)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:13px}.kv dt{color:var(--muted)}.kv dd{margin:0}
.url{max-width:460px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.hint{font-size:12px;color:var(--muted)}
.sticky{position:sticky;top:64px}
.name a{color:inherit;text-decoration:none}.name a:hover{text-decoration:underline}
code{background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:0 4px;font-size:12px}

th[data-col]{user-select:none}th[data-col]:hover{color:var(--accent)}th.th-active{color:var(--accent)}

/* ---------- paleta podľa výšky zľavy (každé pásmo má svoju farbu) ---------- */
.pct{display:inline-block;padding:2px 8px;border-radius:999px;font-weight:700;font-size:12px;border:1px solid transparent;white-space:nowrap}
.pct-0{background:#eceff3;color:#4b5563;border-color:#d7dbe2}
.pct-5{background:#e8f1fb;color:#1d4f8f;border-color:#bcd3f0}
.pct-10{background:#dcefff;color:#0a5bb5;border-color:#a9cdf5}
.pct-15{background:#def7ec;color:#0f6a44;border-color:#a7e3c6}
.pct-20{background:#d1fae5;color:#0a5c3c;border-color:#86e3b5}
.pct-25{background:#f1f8d4;color:#4d6a00;border-color:#d3e58a}
.pct-30{background:#fef3c7;color:#92400e;border-color:#fcd66d}
.pct-35{background:#ffe8cc;color:#9a3d00;border-color:#ffc585}
.pct-40{background:#ffdcc2;color:#8a2c00;border-color:#ffb27a}
.pct-50{background:#fee2e2;color:#991b1b;border-color:#fca5a5}
.pct-60{background:#fbd5e5;color:#9d174d;border-color:#f6a3c6}
.pct-70{background:#ede9fe;color:#5b21b6;border-color:#c4b5fd}
:root[data-theme=dark] .pct{filter:brightness(.85) saturate(1.2)}
.chip.pct-chip{border-width:1px}
.chip.pct-chip.on{color:#fff;background:var(--accent);border-color:var(--accent)}
/* ---------- prepínač témy, zobrazenia, stránkovanie ---------- */
.iconbtn{all:unset;cursor:pointer;padding:5px 9px;border-radius:7px;border:1px solid var(--line);font-size:12px;color:var(--fg)}
.iconbtn.on,.iconbtn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:12px;font-size:13px}
.pager select{padding:5px 7px}
/* ---------- náhľady ---------- */
.thumb{width:56px;height:56px;object-fit:contain;border-radius:6px;background:#fff;border:1px solid var(--line);flex:none}
td.thumbcell{width:64px;padding-right:0}
/* ---------- dlaždice ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.tile{border:1px solid var(--line);border-radius:10px;background:var(--card);padding:10px;display:flex;flex-direction:column;gap:6px}
.tile img{width:100%;height:150px;object-fit:contain;background:#fff;border-radius:6px}
.tile .tname{font-size:13px;font-weight:600;line-height:1.3;max-height:3.9em;overflow:hidden}
.tile .tname a{color:inherit;text-decoration:none}
.tile .tprice{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.tile .tprice strong{font-size:16px}
.tile .treal{font-size:12px}
.tile .tmeta{font-size:11px;color:var(--muted)}

td.name{min-width:220px}

.favbtn{all:unset;cursor:pointer;font-size:16px;line-height:1;color:var(--muted);padding:0 3px}
.favbtn.on{color:#e0a800}.favbtn:hover{color:#e0a800}

.ptype{display:inline-block;padding:1px 7px;border-radius:5px;background:var(--bg);border:1px solid var(--line);color:var(--muted);font-size:11px;font-weight:600}