:root{
  --bg:#0b0f16; --panel:#121826; --line:#1f2937; --text:#e5e7eb; --dim:#94a3b8;
  --accent:#38bdf8; --good:#22c55e; --warn:#f59e0b; --bad:#ef4444; --gold:#eab308;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:13px/1.45 "Segoe UI",system-ui,sans-serif}
button{font:inherit;cursor:pointer}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.dim{color:var(--dim)}
.mono{font-family:Consolas,"Cascadia Mono",monospace;font-size:12px}

#topbar{display:flex;align-items:center;gap:14px;padding:8px 14px;background:#0d1320;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.brand{font-weight:700;letter-spacing:.5px;color:var(--accent)}
/* Pasek stanu jest czytany kilkadziesiat razy dziennie i jednym rzutem oka --
   11 px bylo za malo, zeby odczytac liczbe bez wpatrywania sie. */
.strip{flex:1;font-size:14px;display:flex;gap:14px;flex-wrap:wrap}
.strip b{color:var(--text);font-weight:600}
.actions{display:flex;align-items:center;gap:10px}
.auto{font-size:12px;color:var(--dim);display:flex;align-items:center;gap:4px}

#tabs{display:flex;align-items:center;gap:4px;padding:6px 14px;background:#0d1320;border-bottom:1px solid var(--line);position:sticky;top:41px;z-index:19;flex-wrap:wrap}
#tabs .group{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--dim);margin:0 6px 0 10px}
#tabs .group:first-child{margin-left:0}
.tab{background:transparent;border:1px solid transparent;color:var(--dim);padding:5px 11px;border-radius:6px}
.tab:hover{color:var(--text);background:#172033}
.tab.active{color:#04121f;background:var(--accent);border-color:var(--accent);font-weight:600}
/* WATCH to druga polowa narzedzia -- inny odcien, zeby na pierwszy rzut oka bylo widac,
   czy patrzysz na "kto tu jest nowy", czy na "co zrobili moi ludzie". */
.tab[data-group="WATCH"]{color:#86c8a8}
.tab[data-group="WATCH"]:hover{background:#16241d;color:#b6e6cd}
.tab[data-group="WATCH"].active{background:var(--good);border-color:var(--good);color:#04121f}
/* NOS ma wlasny kolor, bo to trzeci swiat: adresy z lancucha, nie konta Pimlico. */
.tab[data-group="NOS"]{color:#c084fc}
.tab[data-group="NOS"]:hover{background:#1c0f33;color:#ddb4fe}
.tab[data-group="NOS"].active{background:#a855f7;border-color:#a855f7;color:#04121f}
.pill.empty{color:var(--dim);border-color:#3f3f46;background:#18181b}
.pill.star{color:var(--gold);border-color:#713f12;background:#241d06}
.tab[data-group="SYS"]{color:#8b93a7}
.tab[data-group="SYS"].active{background:#64748b;border-color:#64748b;color:#04121f}

#content{padding:14px}
.panel{animation:fade .12s ease-in}
@keyframes fade{from{opacity:.4}to{opacity:1}}

h2{margin:0 0 4px;font-size:15px}
.hint{margin:0 0 12px;color:var(--dim);font-size:12px;max-width:900px}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.toolbar input,.toolbar select{background:#0d1320;border:1px solid var(--line);color:var(--text);padding:5px 8px;border-radius:5px}
.toolbar input[type=text]{min-width:220px}
button.primary{background:var(--accent);border:1px solid var(--accent);color:#04121f;padding:5px 12px;border-radius:5px;font-weight:600}
button.ghost{background:transparent;border:1px solid var(--line);color:var(--text);padding:5px 12px;border-radius:5px}
button.ghost:hover{border-color:var(--accent);color:var(--accent)}
button.danger{background:transparent;border:1px solid var(--bad);color:var(--bad);padding:4px 9px;border-radius:5px}

.alarm{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 13px;margin-bottom:12px}
.alarm .toolbar{margin-bottom:6px}
.alarm .hint{margin-bottom:8px}

.cards{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.day-picker{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:12px 0}.day-arrow{font-size:20px;line-height:1;padding:5px 11px}.day-arrow:disabled{cursor:not-allowed;opacity:.4}.day-current{display:flex;flex-direction:column;min-width:245px;padding:5px 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel)}.day-current strong{text-transform:capitalize;font-size:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:9px 13px;min-width:120px}
.card .k{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--dim)}
.card .v{font-size:18px;font-weight:600;margin-top:2px}

table{width:100%;border-collapse:separate;border-spacing:0;background:var(--panel);border:1px solid var(--line);border-radius:8px}
/* Naglowek jedzie z nami. `.wrap` musi miec wlasna wysokosc, bo `overflow-x:auto`
   i tak robi z niego kontener przewijania -- bez `max-height` sticky przyklejalby
   sie do jego gornej krawedzi, ktora dawno wyjechala poza ekran. */
th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--dim);padding:7px 9px;background:#0f1524;border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;z-index:2}
td{padding:6px 9px;border-bottom:1px solid #161d2c;vertical-align:top}
tr:last-child td{border-bottom:none}
tr:hover td{background:#151d2e}
tr.skipped td{background:#2a2306}
tr.stale td{background:#3b0d0d}
tr.stale:hover td{background:#4d1212}
.pill.stale{color:#fca5a5;border-color:#7f1d1d;background:#2a0a0a}
tr.cielo-row td{background:#150d24;color:var(--dim)}
tr.cielo-row:hover td{background:#1d1230}
tr.fresh-row td{background:#0a2226;color:var(--dim)}
tr.fresh-row:hover td{background:#0e2f35}
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--accent)}
table.heatmap td.heat{text-align:center;font-size:10px;padding:3px 4px;min-width:22px;color:#04121f;font-weight:600}
table.heatmap th{font-size:10px}
.pill.fresh{color:#2dd4bf;border-color:#134e4a;background:#062a2b}
tr.skipped:hover td{background:#3a3008}
.num{text-align:right;font-variant-numeric:tabular-nums}
.wrap{max-width:100%;overflow:auto;max-height:calc(100vh - 210px);border-radius:8px}
.dex{margin-left:5px;color:var(--dim);font-size:11px;text-decoration:none}
.dex:hover{color:var(--accent)}

.pill{display:inline-block;padding:1px 7px;border-radius:99px;font-size:11px;font-weight:600;border:1px solid}
.pill.buy{color:var(--good);border-color:#14532d;background:#0d2417}
.pill.confirmed{color:var(--gold);border-color:#713f12;background:#241d06}
.pill.aa{color:var(--dim);border-color:var(--line);background:#141a28}
.pill.young{color:var(--accent);border-color:#0c4a6e;background:#082032}
.pill.debut{color:#f472b6;border-color:#831843;background:#280c1a}
.pill.skipped{color:var(--gold);border-color:#713f12;background:#2a2306}
.pill.cielo{color:#c084fc;border-color:#5b21b6;background:#1c0f33}
.pill.BUY{color:var(--good);border-color:#14532d;background:#0d2417}
.pill.OBSERVE{color:var(--warn);border-color:#78350f;background:#241a06}
.pill.BORING{color:var(--dim);border-color:var(--line);background:#141a28}
.grade{display:inline-block;width:20px;text-align:center;border-radius:4px;font-weight:700}
.grade.S{background:#a21caf;color:#fff}.grade.A{background:#15803d;color:#fff}
.grade.B{background:#0369a1;color:#fff}.grade.C{background:#a16207;color:#fff}
.grade.D{background:#374151;color:var(--dim)}

.bar{height:5px;background:#1b2434;border-radius:3px;overflow:hidden;min-width:54px}
.bar>i{display:block;height:100%;background:var(--accent)}

#toast{position:fixed;right:16px;bottom:16px;background:#132033;border:1px solid var(--accent);color:var(--text);padding:9px 14px;border-radius:7px;z-index:50;max-width:380px}
#toast.err{border-color:var(--bad)}
.empty{padding:22px;text-align:center;color:var(--dim);background:var(--panel);border:1px dashed var(--line);border-radius:8px}
.err{color:var(--bad)}
.ok{color:var(--good)}
.warnc{color:var(--warn)}
canvas{background:#0d1320;border:1px solid var(--line);border-radius:8px;width:100%;display:block}
.chart-tip{position:fixed;z-index:60;background:#132033;border:1px solid var(--accent);border-radius:7px;
  padding:7px 10px;font-size:12px;line-height:1.5;max-width:320px;pointer-events:none;box-shadow:0 6px 18px #0008}
.chart-tip b{color:var(--text)}
.chart-tip .k{color:var(--dim);font-size:11px}
/* Baner interwalu ma KRZYCZEC. Czytanie wykresu 4h tak, jakby to byly minuty,
   prowadzi do zupelnie zlych wnioskow o tym, jak szybko projekt sie ruszyl. */
.res-banner{background:#3b2a06;border:2px solid var(--warn);border-radius:8px;
  padding:10px 14px;margin:10px 0;font-size:14px;font-weight:600;color:#fde68a}
.res-banner b{color:#fff;font-size:16px}
.res-banner.cut{background:#3b0d0d;border-color:var(--bad);color:#fecaca}
.wp-chart{margin-bottom:14px}
.wp-chart-head{margin-bottom:4px;font-size:12px}

/* Nowoczesna warstwa wizualna: motywy zmieniają barwy bez naruszania czytelności danych. */
:root{--bg:#070b14;--panel:rgba(15,23,42,.72);--panel-strong:#0d1424;--line:rgba(100,116,139,.25);--text:#f1f5f9;--dim:#94a3b8;--accent:#22d3ee;--good:#34d399;--warn:#fbbf24;--bad:#fb7185;--gold:#facc15;--glow:rgba(34,211,238,.19)}
:root[data-theme="aurora"]{--bg:#091015;--panel:rgba(10,31,32,.72);--panel-strong:#0c1c20;--line:rgba(94,234,212,.22);--accent:#5eead4;--good:#a3e635;--warn:#fcd34d;--bad:#fb7185;--glow:rgba(94,234,212,.20)}
:root[data-theme="ember"]{--bg:#130c11;--panel:rgba(39,20,30,.72);--panel-strong:#21111b;--line:rgba(251,146,60,.24);--accent:#fb923c;--good:#a3e635;--warn:#facc15;--bad:#fb7185;--glow:rgba(251,146,60,.20)}
body{min-height:100vh;background:radial-gradient(1000px 500px at 85% -10%,var(--glow),transparent 55%),var(--bg);font:13px/1.5 Inter,"Segoe UI",system-ui,sans-serif;letter-spacing:.005em}
button,.toolbar input,.toolbar select{transition:background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#topbar{min-height:58px;padding:10px 20px;background:linear-gradient(90deg,rgba(7,11,20,.95),rgba(12,19,35,.82));backdrop-filter:blur(18px);border-color:var(--line);box-shadow:0 8px 26px #0003}.brand{font-size:15px;color:var(--text);letter-spacing:.08em;text-transform:uppercase}.brand::before{content:"";display:inline-block;width:9px;height:9px;margin:0 9px 1px 0;border-radius:50%;background:var(--accent);box-shadow:0 0 16px var(--accent)}
#tabs{padding:9px 20px;background:rgba(7,11,20,.78);backdrop-filter:blur(18px);border-color:var(--line);top:58px;gap:6px}.tab{padding:7px 11px;border-radius:9px}.tab:hover{background:rgba(148,163,184,.12);transform:translateY(-1px)}.tab.active{box-shadow:0 5px 20px var(--glow)}.theme-toggle{font-size:11px}.actions{gap:8px}
.visual-strip{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:12px;padding:16px 20px 0;max-width:1700px;margin:auto}.visual-card{height:112px;position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#08111f center/cover no-repeat;box-shadow:0 14px 30px #0003;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}.visual-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(4,8,18,.9),rgba(4,8,18,.16))}.visual-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 15px 32px var(--glow)}.visual-card span{position:absolute;left:15px;bottom:12px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#e2e8f0;text-shadow:0 1px 8px #000}.visual-network{background-image:url('/static/images/pimlico-network.png')}.visual-momentum{background-image:url('/static/images/pimlico-momentum.png')}.visual-wallet{background-image:url('/static/images/pimlico-wallet-node.png')}
#content{max-width:1700px;margin:auto;padding:18px 20px 28px;position:relative}.panel{position:relative;animation:panel-in .22s ease-out}@keyframes panel-in{from{opacity:.25;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}h2{font-size:19px;letter-spacing:-.025em}.toolbar input,.toolbar select{background:rgba(2,6,23,.55);border-color:var(--line);border-radius:9px;padding:7px 10px}.toolbar input:focus,.toolbar select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--glow);outline:0}
/* Ranking ma kilkadziesiat kolumn i jest narzedziem porownawczym. Tylko ten panel
   dostaje cala szerokosc okna; reszta aplikacji zachowuje czytelny limit tresci. */
#content:has(#ranking-table){max-width:none;padding-left:0;padding-right:0}#panel-ranking{padding-left:20px;padding-right:20px}#panel-ranking #ranking-table{margin-left:-20px;margin-right:-20px}#panel-ranking #ranking-table .wrap{border-radius:0;max-height:calc(100vh - 185px)}
button.primary,button.ghost,button.danger{border-radius:9px;padding:7px 12px}button.primary{box-shadow:0 5px 16px var(--glow)}button.primary:hover,button.ghost:hover{transform:translateY(-1px)}button.ghost{background:rgba(15,23,42,.48);border-color:var(--line)}.alarm,.card,table,.empty{background:var(--panel);border-color:var(--line);backdrop-filter:blur(14px);box-shadow:0 10px 26px #0002}.alarm,.card,.empty,table{border-radius:14px}.card{padding:13px 15px;min-width:142px}.card:hover{transform:translateY(-2px);border-color:rgba(148,163,184,.45);box-shadow:0 14px 28px var(--glow)}.card .v{font-size:22px;font-weight:750;letter-spacing:-.035em}th{background:var(--panel-strong);border-color:var(--line);padding:9px}td{padding:8px 9px;border-color:rgba(100,116,139,.13)}tr:hover td{background:rgba(51,65,85,.28)}canvas{background:rgba(2,6,23,.5);border-color:var(--line);border-radius:14px}.wrap{border-radius:14px}.pill{padding:2px 8px}.bar{background:rgba(100,116,139,.2)}#toast{background:var(--panel-strong);border-color:var(--accent);border-radius:12px;box-shadow:0 12px 30px #0008}
/* Jedna ilustracja pojawia się wyłącznie przy widoku, którego dotyczy; jest tłem
   dla nagłówka, a nie osobnym blokiem konkurującym z tabelą. */
.context-art{position:absolute;top:-3px;right:0;width:270px;height:126px;pointer-events:none;opacity:.64;border-radius:18px;background-position:center;background-size:cover;mask-image:linear-gradient(90deg,transparent,#000 36%,#000 80%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 36%,#000 80%,transparent)}.context-network{background-image:url('/static/images/pimlico-network.png')}.context-wallet{background-image:url('/static/images/pimlico-wallet-node.png')}.context-momentum{background-image:url('/static/images/pimlico-momentum.png')}.panel:has(.context-art)>h2,.panel:has(.context-art)>.hint{padding-right:285px}.detail-art{top:0;right:8px;width:300px;height:136px}#content>.detail-art~h2,#content>.detail-art~.hint{padding-right:310px}
@media (max-width:760px){#topbar{padding:9px 12px;gap:8px}.strip,.auto{display:none}#tabs{top:52px;padding:8px 12px;overflow-x:auto;flex-wrap:nowrap}.tab{white-space:nowrap}#content{padding:14px 12px}.actions{margin-left:auto}.theme-toggle{font-size:0;padding:8px 10px}.theme-toggle::before{content:"◐";font-size:15px}.context-art{display:none}.panel:has(.context-art)>h2,.panel:has(.context-art)>.hint{padding-right:0}}
.context-discovery{background-image:url('/static/images/pimlico-discovery.png')}.context-terrain{background-image:url('/static/images/pimlico-data-terrain.png')}.context-classification{background-image:url('/static/images/pimlico-classification.png')}

/* Nawigacja jest mapą narzędzia, nie rzędem drobnych linków. Każdy obszar ma
   własny kontener i podpis, dzięki czemu oko od razu rozdziela skan, obserwację
   oraz narzędzia pomocnicze. */
#tabs{align-items:stretch;gap:10px;padding:11px 20px;overflow-x:auto;flex-wrap:nowrap;scrollbar-color:var(--line) transparent}
.tab-group{display:flex;align-items:center;gap:5px;flex:0 0 auto;min-height:46px;padding:6px 8px;border:1px solid var(--line);border-radius:13px;background:rgba(15,23,42,.56);box-shadow:inset 0 1px rgba(255,255,255,.025)}
#tabs .group{display:flex;align-items:center;align-self:stretch;max-width:94px;margin:0 5px 0 1px;padding:0 9px;border-right:1px solid var(--line);font-size:10px;font-weight:800;line-height:1.18;letter-spacing:.1em;color:var(--dim);text-transform:uppercase}
#tabs .tab{min-height:32px;padding:7px 10px;border:1px solid transparent;border-radius:8px;font-size:12px;font-weight:600;line-height:1.1;white-space:nowrap;color:#b7c3d6}
#tabs .tab:hover{border-color:rgba(148,163,184,.35);color:var(--text);background:rgba(148,163,184,.14);transform:translateY(-1px)}
#tabs .tab.active{border-color:var(--accent);color:#04121f;background:var(--accent);box-shadow:0 5px 18px var(--glow);transform:none}
/* Każda sekcja ma odrębną „wyspę” koloru. Pasek po lewej i wypełniony nagłówek
   pozostają widoczne również wtedy, gdy żadna z jej zakładek nie jest aktywna. */
.tab-group[data-group="SKAN"]{border-color:rgba(34,211,238,.42);background:linear-gradient(135deg,rgba(8,49,66,.72),rgba(8,24,39,.58));box-shadow:inset 4px 0 #22d3ee,0 8px 20px rgba(8,145,178,.08)}
.tab-group[data-group="SKAN"] .group{color:#b9f5ff;background:rgba(8,145,178,.21)}
.tab-group[data-group="SKAN"] .tab{color:#b9e8ef}.tab-group[data-group="SKAN"] .tab:hover{border-color:rgba(34,211,238,.48);background:rgba(34,211,238,.13);color:#ecfeff}
.tab-group[data-group="WATCH"]{border-color:rgba(52,211,153,.42);background:linear-gradient(135deg,rgba(8,59,42,.7),rgba(7,31,27,.56));box-shadow:inset 4px 0 #34d399,0 8px 20px rgba(16,185,129,.08)}
.tab-group[data-group="WATCH"] .group{color:#b7f7d2;background:rgba(16,185,129,.18)}.tab-group[data-group="WATCH"] .tab{color:#a8d8bc}.tab-group[data-group="WATCH"] .tab:hover{border-color:rgba(52,211,153,.48);background:rgba(52,211,153,.12);color:#e4fff0}.tab-group[data-group="WATCH"] .tab.active{border-color:var(--good);background:var(--good)}
.tab-group[data-group="NOS"]{border-color:rgba(192,132,252,.42);background:linear-gradient(135deg,rgba(59,25,101,.69),rgba(31,15,53,.58));box-shadow:inset 4px 0 #c084fc,0 8px 20px rgba(168,85,247,.08)}
.tab-group[data-group="NOS"] .group{color:#eddfff;background:rgba(168,85,247,.19)}.tab-group[data-group="NOS"] .tab{color:#d7b6fc}.tab-group[data-group="NOS"] .tab:hover{border-color:rgba(192,132,252,.5);background:rgba(192,132,252,.12);color:#f0e3ff}.tab-group[data-group="NOS"] .tab.active{border-color:#c084fc;background:#c084fc}
.tab-group[data-group="SYS"]{border-color:rgba(148,163,184,.45);background:linear-gradient(135deg,rgba(48,62,83,.7),rgba(25,33,47,.58));box-shadow:inset 4px 0 #94a3b8,0 8px 20px rgba(100,116,139,.08)}
.tab-group[data-group="SYS"] .group{color:#f1f5f9;background:rgba(148,163,184,.18)}.tab-group[data-group="SYS"] .tab{color:#cbd5e1}.tab-group[data-group="SYS"] .tab:hover{border-color:rgba(203,213,225,.48);background:rgba(203,213,225,.12);color:#fff}.tab-group[data-group="SYS"] .tab.active{border-color:#94a3b8;background:#94a3b8}
@media (max-width:760px){#tabs{top:52px;gap:8px;padding:8px 12px}.tab-group{min-height:43px;padding:5px 6px;gap:3px}#tabs .group{max-width:67px;margin-right:2px;padding:0 6px;font-size:8px}#tabs .tab{min-height:30px;padding:7px 9px;font-size:11px}}

/* --- Kolory grup, ktore faktycznie istnieja w `web/ui/render.TABS` -------------
   Wczesniej style mialy grupy WATCH i NOS, a nawigacja rysuje SKAN, PIMLICO, NORMAL
   i SYS -- dwie z czterech wysp byly wiec bezbarwne i nie do odroznienia od siebie.
   Kazdy swiat ma teraz wlasna barwe: PIMLICO (nasz dowod zakupu) zielono-zlota,
   NORMAL (zwykle adresy ERC-20) fioletowa, USTAWIENIA szara. */
.tab-group[data-group="PIMLICO"]{border-color:rgba(250,204,21,.42);background:linear-gradient(135deg,rgba(61,48,7,.72),rgba(28,24,10,.58));box-shadow:inset 4px 0 #facc15,0 8px 20px rgba(234,179,8,.09)}
.tab-group[data-group="PIMLICO"] .group{color:#fdf0b6;background:rgba(234,179,8,.2)}
.tab-group[data-group="PIMLICO"] .tab{color:#e8d79a}
.tab-group[data-group="PIMLICO"] .tab:hover{border-color:rgba(250,204,21,.5);background:rgba(250,204,21,.13);color:#fffbe8}
.tab-group[data-group="PIMLICO"] .tab.active{border-color:var(--gold);background:var(--gold);color:#1b1403}
.tab-group[data-group="NORMAL"]{border-color:rgba(192,132,252,.42);background:linear-gradient(135deg,rgba(59,25,101,.69),rgba(31,15,53,.58));box-shadow:inset 4px 0 #c084fc,0 8px 20px rgba(168,85,247,.09)}
.tab-group[data-group="NORMAL"] .group{color:#eddfff;background:rgba(168,85,247,.19)}
.tab-group[data-group="NORMAL"] .tab{color:#d7b6fc}
.tab-group[data-group="NORMAL"] .tab:hover{border-color:rgba(192,132,252,.5);background:rgba(192,132,252,.12);color:#f0e3ff}
.tab-group[data-group="NORMAL"] .tab.active{border-color:#c084fc;background:#c084fc;color:#1a0b2e}

/* --- Pasek stanu nad menu -------------------------------------------------------
   Jedna dluga linia tekstu zmuszala do czytania calosci, zeby znalezc jedna liczbe.
   Kazda grupa dostaje wlasny kolor obwodki i etykiete pisana wersalikami. */
.strip{gap:8px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border:1px solid var(--line);border-radius:999px;background:rgba(15,23,42,.55);font-size:14px;white-space:nowrap}
.chip i{font-style:normal;font-size:11px;letter-spacing:.09em;text-transform:uppercase;opacity:.8}
.chip s{text-decoration:none;opacity:.65;font-size:12px}
.chip b{font-weight:700;font-size:15px}
.chip-scan{border-color:rgba(34,211,238,.45);background:rgba(8,49,66,.5)}.chip-scan i{color:#7fdcef}
.chip-base{border-color:rgba(52,211,153,.45);background:rgba(8,59,42,.45)}.chip-base i{color:#7fe3b6}
.chip-fav{border-color:rgba(250,204,21,.5);background:rgba(61,48,7,.5)}.chip-fav i{color:#f6dd7a}
.chip-queue{border-color:rgba(148,163,184,.45);background:rgba(30,41,59,.5)}.chip-queue i{color:#cbd5e1}
.chip-warn{border-color:rgba(251,191,36,.55);background:rgba(61,44,6,.5)}.chip-warn i{color:#fbbf24}
.chip-err{border-color:rgba(251,113,133,.55);background:rgba(59,13,13,.5)}.chip-err i{color:#fb7185}

/* Pole z opisem: kropkowane podkreslenie mowi „tu jest wyjasnienie", a kursor
   `help` potwierdza to przed najechaniem na cala komorke. */
th.hashelp{text-decoration:underline dotted rgba(148,163,184,.5);text-underline-offset:3px;cursor:help}
td[title]{cursor:help}
.card.hashelp{cursor:help}
.card.hashelp .k::after{content:" ?";opacity:.45}

/* Trzy wykresy Feedu ulubionych stoja obok siebie: stan listy i ruch trzeba czytac
   razem, a nie przewijac miedzy nimi. */
.ff-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;margin-bottom:14px}
@media (max-width:760px){.ff-charts{grid-template-columns:1fr}}

/* Wiersz NORMAL w feedzie: pierwszy kontakt ERC-20, nie nasz dowod zakupu.
   Wlasny odcien, zeby nie dalo sie go pomylic z potwierdzonym BUY. */
tr.normal-row td{background:rgba(59,25,101,.22);color:var(--dim)}
tr.normal-row:hover td{background:rgba(59,25,101,.34)}

/* Dwie kolumny tam, gdzie sa dwie rozne prace obok siebie (Smart Refresh: update
   z lancucha vs. przeliczenie ocen). Ponizej 1100 px skladaja sie w jedna kolumne --
   przy wezszym oknie tabela na pol ekranu przestaje byc czytelna. */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.two-col .col{min-width:0}
.two-col h3{margin:14px 0 6px;font-size:14px;color:var(--dim)}
@media (max-width:1100px){.two-col{grid-template-columns:1fr}}

/* Pasek postepu zadania w tle. Sama liczba „230 / 500” nie pokazuje, ile jeszcze
   zostalo -- dopiero szerokosc paska robi to jednym spojrzeniem. */
.progress{height:10px;background:rgba(100,116,139,.2);border-radius:6px;overflow:hidden;margin:6px 0}
.progress>i{display:block;height:100%;background:var(--accent);transition:width .4s ease}
.progress.done>i{background:var(--good)}
.progress.failed>i{background:var(--bad)}

.age{font-size:11px;font-weight:700;padding:1px 6px;border-radius:5px;background:rgba(148,163,184,.14)}