/* RSIsport Hub - style wg makiety A (kokpit kanalowy). Tailwind CDN jest dostepny jako uzupelnienie. */
:root{
  --bg:#f4f5f7; --panel:#fff; --line:#e4e6ea; --text:#1b1d22; --muted:#6b7280;
  --brand:#f5b301; --brand2:#f07d00; --ok:#16a34a; --warn:#d97706; --bad:#dc2626;
  --fb:#1877f2; --ig:#d62976; --tt:#111; --yt:#ff0000; --li:#0a66c2;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:14px}
.app{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
aside{background:#17191e;color:#cfd3da;padding:18px 14px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh;overflow-y:auto}
.logo{display:flex;align-items:center;gap:10px;margin-bottom:18px;color:#fff;font-weight:700;font-size:16px;text-decoration:none}
.logo i{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--brand),var(--brand2));display:inline-block}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:#cfd3da;text-decoration:none}
.nav a:hover{background:#20242c;color:#fff}
.nav a.active{background:#262a33;color:#fff}
.nav .sec{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#7b8190;margin:14px 10px 4px}
.aside-foot{margin-top:auto;font-size:11px;color:#7b8190;padding:10px}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
.dot-fb{background:var(--fb)} .dot-ig{background:var(--ig)} .dot-tt{background:var(--tt);border:1px solid #777}
.dot-yt{background:var(--yt)} .dot-li{background:var(--li)}
.bg-fb{background:var(--fb)} .bg-ig{background:var(--ig)} .bg-tt{background:#444} .bg-yt{background:var(--yt)} .bg-li{background:var(--li)}
.text-fb{color:var(--fb)} .text-ig{color:var(--ig)} .text-tt{color:var(--tt)} .text-yt{color:var(--yt)} .text-li{color:var(--li)}
main{padding:22px 26px;min-width:0}
header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:14px}
h1{font-size:20px;margin:0} .sub{color:var(--muted);font-size:13px}
h2{font-size:16px;margin:18px 0 10px}
.btn{background:var(--brand);color:#1b1d22;border:0;padding:9px 14px;border-radius:8px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block;font-size:14px;font-family:inherit}
.btn:hover{filter:brightness(.97)}
.btn.ghost{background:#fff;border:1px solid var(--line)}
.btn.sm{padding:5px 10px;font-size:12px}
.btn.danger{background:#fde8e8;color:var(--bad)}
.btn:disabled{opacity:.5;cursor:default}
.grid{display:grid;gap:14px}
.channels{grid-template-columns:repeat(5,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)} .cols-3{grid-template-columns:repeat(3,1fr)} .cols-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}
.card.mt{margin-top:14px}
.ch .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:6px}
.ch .name{font-weight:700;display:flex;gap:8px;align-items:center;color:inherit;text-decoration:none}
.ch .kpi{font-size:22px;font-weight:700;margin:2px 0}
.ch .delta{font-size:12px;color:var(--ok)} .ch .delta.down{color:var(--bad)}
.ch .row{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;margin-top:6px;gap:8px}
.ch .row b{text-align:right}
.status{font-size:11px;padding:2px 7px;border-radius:999px;background:#e8f7ee;color:var(--ok);white-space:nowrap}
.status.warn{background:#fdf3e3;color:var(--warn)} .status.bad{background:#fde8e8;color:var(--bad)} .status.off{background:#f1f2f4;color:var(--muted)}
.bar{height:6px;background:#eef0f3;border-radius:4px;margin-top:10px;overflow:hidden}
.bar b{display:block;height:100%}
.two{grid-template-columns:1.4fr 1fr;margin-top:14px}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.list li:first-child{border-top:0}
.list .grow{flex:1;min-width:0}
.time{width:64px;color:var(--muted);font-variant-numeric:tabular-nums;flex:none;font-size:13px}
.tag{font-size:11px;padding:2px 7px;border-radius:6px;background:#f1f2f4;color:#374151;white-space:nowrap;display:inline-block}
.tag.ai{background:#fff4d6;color:#8a5a00}
.tag.ok{background:#e8f7ee;color:var(--ok)} .tag.bad{background:#fde8e8;color:var(--bad)} .tag.warn{background:#fdf3e3;color:var(--warn)}
.idea{padding:10px;border:1px solid var(--line);border-radius:10px;margin-top:8px;background:#fff}
.idea .score{float:right;font-weight:700;color:var(--brand2);font-size:16px}
.idea .score.low{color:var(--muted)}
.alerts li{color:#374151}
.cardh{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.cardh h3{margin:0;font-size:14px}
.cardh a{font-size:12px;color:var(--li);text-decoration:none}
.foot{margin-top:18px;color:var(--muted);font-size:12px}
.muted{color:var(--muted)} .small{font-size:12px}
.empty{color:var(--muted);padding:18px;text-align:center;border:1px dashed var(--line);border-radius:10px}
/* tabele */
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-weight:600;color:var(--muted);font-size:12px;padding:8px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
/* formularze */
label.f{display:block;font-size:12px;color:var(--muted);margin:10px 0 4px}
input.f,select.f,textarea.f{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit;background:#fff;color:var(--text)}
textarea.f{min-height:120px;resize:vertical}
input.f:focus,select.f:focus,textarea.f:focus{outline:2px solid var(--brand);border-color:var(--brand)}
.chk{display:inline-flex;align-items:center;gap:6px;margin-right:12px;font-size:13px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.filters a{font-size:12px;padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:#fff;color:#374151;text-decoration:none}
.filters a.on{background:#1b1d22;color:#fff;border-color:#1b1d22}
/* kalendarz */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal .dh{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:4px 6px}
.cal .day{background:#fff;border:1px solid var(--line);border-radius:10px;min-height:104px;padding:6px}
.cal .day.off{background:transparent;border-color:transparent}
.cal .day.today{border-color:var(--brand);box-shadow:0 0 0 2px #fff4d6 inset}
.cal .dn{font-size:12px;color:var(--muted);margin-bottom:4px}
.cal .ev{display:flex;align-items:center;gap:5px;font-size:11px;padding:2px 5px;border-radius:5px;background:#f6f7f9;margin-top:3px;color:#1b1d22;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:3px solid #999}
.cal .ev.fb{border-left-color:var(--fb)} .cal .ev.ig{border-left-color:var(--ig)} .cal .ev.tt{border-left-color:var(--tt)} .cal .ev.yt{border-left-color:var(--yt)} .cal .ev.li{border-left-color:var(--li)}
/* media */
.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mcard .thumb{height:140px;border-radius:8px;background:linear-gradient(135deg,#eef0f3,#e1e4ea);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:34px;margin-bottom:10px}
.mcard .fn{font-weight:600;font-size:13px;word-break:break-all}
/* studio - zakladki */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:12px}
.tabs button{border:0;background:transparent;padding:8px 12px;font:inherit;font-size:13px;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;display:flex;gap:6px;align-items:center}
.tabs button.on{color:var(--text);border-bottom-color:var(--brand);font-weight:600}
.placeholder{border:1px dashed #cfd3da;border-radius:10px;padding:14px;background:#fafbfc;color:var(--muted);white-space:pre-wrap;font-size:13px}
.scores{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.score-box{flex:1;min-width:110px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12px;color:var(--muted)}
.score-box b{display:block;font-size:16px;color:var(--text)}
/* przelacznik */
.switch{position:relative;display:inline-block;width:38px;height:22px;cursor:pointer}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;background:#cfd3da;border-radius:999px;transition:.15s}
.switch span:before{content:"";position:absolute;width:18px;height:18px;left:2px;top:2px;background:#fff;border-radius:50%;transition:.15s}
.switch input:checked+span{background:var(--ok)}
.switch input:checked+span:before{transform:translateX(16px)}
/* toast */
#toast{position:fixed;right:22px;top:16px;z-index:50;display:flex;flex-direction:column;gap:8px}
.toast{background:#1b1d22;color:#fff;padding:10px 14px;border-radius:10px;font-size:13px;box-shadow:0 6px 24px rgba(0,0,0,.18);max-width:420px}
.toast.ok{border-left:4px solid var(--ok)} .toast.bad{border-left:4px solid var(--bad)}
.htmx-request .btn{opacity:.6}
.kv{display:grid;grid-template-columns:160px 1fr;gap:6px 12px;font-size:13px}
.kv dt{color:var(--muted)} .kv dd{margin:0}
.fresh{animation:fresh 1.4s ease-out}
@keyframes fresh{from{background:#fff4d6}to{background:transparent}}
@media (max-width:1100px){.channels{grid-template-columns:repeat(2,1fr)} .two{grid-template-columns:1fr} .mgrid{grid-template-columns:repeat(2,1fr)} .cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}}

/* v0.2: kolory ocen w Studiu */
.score-box b.ok{color:var(--ok)} .score-box b.warn{color:var(--warn)} .score-box b.bad{color:var(--bad)}
.htmx-indicator{display:none} .htmx-request .htmx-indicator,.htmx-request.htmx-indicator{display:inline}

/* v0.3: Biblioteka – miniatury, linki, panel podglądu */
tr.clickable{cursor:pointer} tr.clickable:hover td{background:#fafbfc}
.thumb{width:52px;height:52px;border-radius:8px;object-fit:cover;display:block;border:1px solid var(--line)}
.thumb.ph{display:flex;align-items:center;justify-content:center;background:#f1f2f4;color:#9aa0aa;font-size:16px}
.chlink{white-space:nowrap} .chlink a{text-decoration:none;font-size:12px;color:var(--li);margin-left:2px}
.drawer-bg{position:fixed;inset:0;background:rgba(15,17,21,.35);z-index:40}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,96vw);background:#fff;z-index:41;overflow:auto;padding:18px;box-shadow:-8px 0 30px rgba(0,0,0,.15)}
.mk-wrap{background:#f0f2f5;border-radius:12px;padding:14px;margin:10px 0}
.mk-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:4px 0 8px}
.mk{background:#fff;border:1px solid #dadde1;border-radius:10px;overflow:hidden;max-width:500px;margin:0 auto 6px;font-size:14px}
.mk-head{display:flex;gap:8px;align-items:center;padding:10px 12px}
.mk-head img{width:36px;height:36px;border-radius:50%}
.mk-text{padding:0 12px 10px;white-space:pre-wrap;line-height:1.4}
.mk-img{display:block;width:100%;height:auto}
.mk-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;background:repeating-linear-gradient(45deg,#e4e6ea,#e4e6ea 10px,#eceef1 10px,#eceef1 20px);color:#4b5563;text-align:center;padding:10px;box-sizing:border-box}
.mk-ph span{font-weight:600} .mk-ph small{color:#6b7280}
.mk-foot{border-top:1px solid #e4e6ea;padding:8px 12px;color:#65676b;font-size:13px}
.mk-ig .mk-head img{width:30px;height:30px} .mk-ig .mk-sq{width:100%}
.mk-ig .mk-icons{padding:8px 12px;font-size:18px} .mk-ig .mk-text{font-size:13px}
.mk-yt{border:0;background:transparent} .mk-yt .mk-169 img,.mk-yt .mk-169 .mk-ph{border-radius:12px;aspect-ratio:16/9;object-fit:cover}
.mk-yt-title{font-weight:600;font-size:15px;margin:10px 2px 0} .mk-yt .mk-head{padding:6px 2px} .mk-desc{font-size:12px;color:#606060;max-height:90px;overflow:hidden;padding:0 2px}
.mk-vert{position:relative;width:270px;aspect-ratio:9/16;margin:0 auto 6px;background:#000;border-radius:14px;overflow:hidden;color:#fff}
.mk-vert-media{position:absolute;inset:0;display:flex;align-items:center} .mk-vert-media img{width:100%;height:100%;object-fit:cover}
.mk-vert-media .mk-ph{height:100%;aspect-ratio:auto!important;background:#222;color:#bbb} .mk-vert-media .mk-ph small{color:#888}
.mk-vert-side{position:absolute;right:10px;bottom:90px;display:flex;flex-direction:column;gap:14px;font-size:20px}
.mk-vert-cap{position:absolute;left:0;right:44px;bottom:0;padding:12px;font-size:12px;background:linear-gradient(transparent,rgba(0,0,0,.7));white-space:pre-wrap;max-height:45%;overflow:hidden}
.mk-embed{width:100%;aspect-ratio:16/9;border:0;border-radius:10px;margin-bottom:10px;background:#000}
.mk-embed-v{width:325px;max-width:100%;height:580px;border:0;border-radius:10px;margin:0 auto 10px;display:block;background:#000}
.mk-form{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}

/* v0.4: podpowiedzi – dymki po najechaniu kursorem (app/static/pomoc.js, atrybut data-help) */
.pomoc-tip{position:fixed;left:0;top:0;z-index:100;max-width:280px;padding:7px 10px;border-radius:8px;background:#1b1d22;color:#fff;font:400 12.5px/1.4 "Segoe UI",system-ui,sans-serif;text-align:left;white-space:normal;box-shadow:0 6px 20px rgba(0,0,0,.25);pointer-events:none;opacity:0;visibility:hidden;transition:opacity .12s}
.pomoc-tip.on{opacity:1;visibility:visible}
.pomoc-arrow{position:absolute;bottom:-4px;width:9px;height:9px;background:#1b1d22;transform:translateX(-50%) rotate(45deg)}
.pomoc-tip.below .pomoc-arrow{bottom:auto;top:-4px}
[data-help]:not(a):not(button):not(input):not(select):not(textarea):not(label):not(summary):not(.clickable):not(.switch){cursor:help}
:is(a,button,label,summary,.clickable,.switch) [data-help]{cursor:inherit!important}
.pomoc-wrap{display:inline-block} .pomoc-wrap>button:disabled,.tabs.pomoc-off button:disabled{pointer-events:none}
.pomoc-toggle{display:block;margin:0 0 8px;padding:4px 9px;border:1px solid #2c313b;border-radius:6px;background:transparent;color:#cfd3da;font:inherit;font-size:11px;cursor:pointer}
.pomoc-toggle:hover{background:#20242c;color:#fff}
@media (hover:none){[data-help]{cursor:auto!important}}

/* v0.5: komunikaty, przełącznik wyglądu, logowanie, role, aktywność kont */
:root{--ok-bg:#e8f7ee;--warn-bg:#fdf3e3;--bad-bg:#fde8e8;--ai-bg:#fff4d6;--ai-text:#8a5a00;--soft:#f1f2f4;--soft-text:#374151;--hover:#fafbfc}
.msg{padding:10px 14px;border-radius:12px;border:1px solid var(--line);margin-bottom:14px;background:var(--panel)}
.msg.ok{border-color:var(--ok);background:var(--ok-bg)} .msg.bad{border-color:var(--bad);background:var(--bad-bg)}
.motyw{display:inline-flex;gap:2px;margin:0 0 8px;padding:2px;border:1px solid #2c313b;border-radius:8px;background:transparent}
.motyw button{border:0;background:transparent;color:#cfd3da;font:inherit;font-size:13px;line-height:1;padding:4px 7px;border-radius:6px;cursor:pointer}
.motyw button:hover{background:#20242c} .motyw button.on{background:var(--brand);color:#1b1d22}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#17191e}
.login-motyw{margin:14px auto 0;display:flex;justify-content:center;border-color:var(--line)} .login-motyw button{color:var(--muted)}
.login-motyw button:hover{background:var(--soft)}
.foot-link{color:#cfd3da}
.role-mods{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;margin:6px 0 2px;font-size:12px}
.role-mods label{display:flex;gap:6px;align-items:flex-start;cursor:pointer} .role-mods label input{margin-top:2px}
.role-mods input:disabled+span{color:var(--muted)}
.rola-opis{font-size:12px;color:var(--muted);margin:4px 0 0}
details.role summary{cursor:pointer;font-size:12px;color:var(--li)}
details.role[open]{padding:8px 10px;border:1px solid var(--line);border-radius:10px;margin-top:4px}
.bars{display:flex;align-items:flex-end;gap:3px;height:90px;margin-top:8px}
.bars .b{flex:1;background:var(--brand);border-radius:3px 3px 0 0;min-height:2px}
.bars .b.zero{background:var(--line)}
.bars-x{display:flex;gap:3px;font-size:10px;color:var(--muted);margin-top:4px} .bars-x span{flex:1;text-align:center;overflow:hidden;white-space:nowrap}
.kpi-row{display:grid;grid-template-columns:repeat(6,1fr);gap:14px} .kpi-row .card .kpi{font-size:22px;font-weight:700;margin:2px 0}
@media (max-width:1100px){.kpi-row{grid-template-columns:repeat(3,1fr)}}

/* Ciemny motyw – html[data-theme=dark] ustawia app/static/motyw.js (wybór: jasny / ciemny / systemowy) */
html[data-theme=dark]{--bg:#121418;--panel:#1b1e25;--line:#2b303a;--text:#e6e8ee;--muted:#9aa1ad;--tt:#e5e7eb;
  --ok-bg:rgba(22,163,74,.18);--warn-bg:rgba(217,119,6,.2);--bad-bg:rgba(220,38,38,.2);--ai-bg:rgba(245,179,1,.18);--ai-text:#f5c542;
  --soft:#262b35;--soft-text:#d1d5db;--hover:#20242c;color-scheme:dark}
html[data-theme=dark] .btn.ghost{background:var(--panel);color:var(--text)}
html[data-theme=dark] .btn.danger{background:var(--bad-bg)}
html[data-theme=dark] .status{background:var(--ok-bg)} html[data-theme=dark] .status.warn{background:var(--warn-bg)}
html[data-theme=dark] .status.bad{background:var(--bad-bg)} html[data-theme=dark] .status.off{background:var(--soft)}
html[data-theme=dark] .bar{background:var(--soft)}
html[data-theme=dark] .tag{background:var(--soft);color:var(--soft-text)} html[data-theme=dark] .tag.ai{background:var(--ai-bg);color:var(--ai-text)}
html[data-theme=dark] .tag.ok{background:var(--ok-bg)} html[data-theme=dark] .tag.bad{background:var(--bad-bg)} html[data-theme=dark] .tag.warn{background:var(--warn-bg)}
html[data-theme=dark] .idea{background:var(--soft)} html[data-theme=dark] .alerts li{color:var(--text)}
html[data-theme=dark] input.f,html[data-theme=dark] select.f,html[data-theme=dark] textarea.f{background:#141720;color:var(--text)}
html[data-theme=dark] .filters a{background:var(--panel);color:var(--text)} html[data-theme=dark] .filters a.on{background:#e6e8ee;color:#121418;border-color:#e6e8ee}
html[data-theme=dark] .cal .day{background:var(--panel)} html[data-theme=dark] .cal .day.today{box-shadow:0 0 0 2px rgba(245,179,1,.25) inset}
html[data-theme=dark] .cal .ev{background:var(--soft);color:var(--text)}
html[data-theme=dark] .mcard .thumb{background:linear-gradient(135deg,#262b35,#1f232b)}
html[data-theme=dark] .placeholder{border-color:#3a404c;background:#171a21}
html[data-theme=dark] .toast{background:#2b303a;border:1px solid #3a404c}
html[data-theme=dark] tr.clickable:hover td{background:var(--hover)}
html[data-theme=dark] .thumb.ph{background:var(--soft);color:var(--muted)}
html[data-theme=dark] .drawer{background:var(--panel)} html[data-theme=dark] .drawer-bg{background:rgba(0,0,0,.55)}
html[data-theme=dark] .mk-wrap{background:#0f1115}
html[data-theme=dark] .cardh a,html[data-theme=dark] .chlink a,html[data-theme=dark] details.role summary{color:#6fb1ff}
html[data-theme=dark] .pomoc-tip,html[data-theme=dark] .pomoc-arrow{background:#2b303a} html[data-theme=dark] .pomoc-tip{border:1px solid #3a404c}
html[data-theme=dark] .fresh{animation-name:fresh-dark}
@keyframes fresh-dark{from{background:rgba(245,179,1,.25)}to{background:transparent}}
html[data-theme=dark] .empty{border-color:#3a404c}
html[data-theme=dark] .score-box b{color:var(--text)}
html[data-theme=dark] .login-wrap{background:#0f1115}
html[data-theme=dark] .ch .name{color:var(--text)}
/* pokaż / ukryj hasło (static/haslo.js) */
.haslo-wrap{position:relative;display:block}
.haslo-wrap input.f{padding-right:40px}
.haslo-oko{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;padding:0}
.haslo-oko:hover{color:var(--text);background:var(--soft)}
.haslo-oko:focus-visible{outline:2px solid var(--brand)}