:root{
  --bg:#f6f7f9; --panel:#fff; --ink:#1c2024; --muted:#6b7280;
  --line:#e6e8eb; --accent:#1f6feb; --accent-ink:#fff;
  --hot:#b42318; --warm:#b54708; --cold:#475467;
  --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.topbar{
  display:flex;align-items:center;gap:24px;
  background:var(--panel);border-bottom:1px solid var(--line);
  padding:12px 24px;position:sticky;top:0;z-index:10;
}
.brand{font-weight:700;letter-spacing:-.2px}
.topbar nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.topbar nav a{
  color:var(--ink);padding:7px 12px;border-radius:8px;font-size:14px;
}
.topbar nav a:hover{background:var(--bg);text-decoration:none}
.topbar nav a.on{background:var(--accent);color:var(--accent-ink)}
.topbar .user{font-size:13px;color:var(--muted)}
.badge{
  display:inline-block;min-width:18px;padding:0 5px;margin-left:6px;
  background:var(--hot);color:#fff;border-radius:9px;font-size:11px;text-align:center;
}

.wrap{max-width:1180px;margin:24px auto;padding:0 24px}
h1{font-size:22px;margin:0 0 18px;letter-spacing:-.3px}
h2{font-size:16px;margin:28px 0 12px}

.flash{
  background:#ecfdf3;border:1px solid #abefc6;color:#067647;
  padding:10px 14px;border-radius:8px;margin-bottom:18px;font-size:14px;
}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:8px}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;
}
.card .k{font-size:13px;color:var(--muted)}
.card .v{font-size:26px;font-weight:700;margin-top:4px;letter-spacing:-.5px}

.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;margin-bottom:20px;
}
table{width:100%;border-collapse:collapse}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:14px;vertical-align:top}
th{background:#fafbfc;color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.4px}
tr:last-child td{border-bottom:none}
tr:hover td{background:#fafbfc}

.tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;background:var(--bg);color:var(--muted);border:1px solid var(--line)}
.tag.live{background:#ecfdf3;color:#067647;border-color:#abefc6}
.tag.off{background:#fef3f2;color:#b42318;border-color:#fecdca}
.tag.eu{background:#eff4ff;color:#1f4fb6;border-color:#c7d7fe}

.score{font-weight:700}
.sc-hot{color:var(--hot)} .sc-warm{color:var(--warm)} .sc-cold{color:var(--cold)}

.bar{height:6px;background:var(--line);border-radius:4px;overflow:hidden;margin-top:6px;max-width:160px}
.bar > i{display:block;height:100%;background:var(--accent)}

.muted{color:var(--muted)}
.small{font-size:13px}
.right{text-align:right}

form.inline{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin-bottom:18px}
label{display:block;font-size:13px;color:var(--muted);margin-bottom:4px}
input,select,textarea{
  font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;
  background:#fff;color:var(--ink);min-width:160px;
}
textarea{min-width:320px;min-height:70px}
button,.btn{
  font:inherit;padding:8px 16px;border:0;border-radius:8px;cursor:pointer;
  background:var(--accent);color:var(--accent-ink);font-weight:600;
}
button.ghost,.btn.ghost{background:var(--bg);color:var(--ink);border:1px solid var(--line)}
button:hover{filter:brightness(.96)}
.btn.danger{background:var(--hot)}

.alert-row{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-bottom:1px solid var(--line)}
.alert-row:last-child{border-bottom:0}
.alert-row.unread{background:#fbfcff}
.dot{width:8px;height:8px;border-radius:50%;margin-top:7px;flex:0 0 8px}
.dot.high{background:var(--hot)} .dot.notable{background:var(--warm)} .dot.info{background:var(--cold)}

.login{max-width:340px;margin:9vh auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.login h1{text-align:center}
.login input{width:100%;margin-bottom:12px}
.login button{width:100%}
.err{background:#fef3f2;border:1px solid #fecdca;color:#b42318;padding:9px 12px;border-radius:8px;font-size:14px;margin-bottom:14px}

.foot{max-width:1180px;margin:30px auto;padding:18px 24px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;font-size:13px;color:var(--muted);flex-wrap:wrap;gap:8px}
.note{background:#fffbeb;border:1px solid #fde68a;color:#92590a;padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:18px}

/* ── Diff treści landing ── */
.diff{font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 14px;max-height:520px;overflow:auto;white-space:pre-wrap;word-break:break-word}
.d-eq{color:var(--muted)}
.d-skip{color:#9aa3af;font-style:italic;padding:3px 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);margin:4px 0}
.d-del{background:#fef3f2;color:#b42318;border-radius:3px}
.d-ins{background:#ecfdf3;color:#067647;border-radius:3px}

/* ── Hooki copy ── */
.hookrow{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.hookrow:last-child{border:0}
.hookrow .ht{flex:1}
.hookrow .hc{font-weight:700;color:var(--accent);min-width:42px;text-align:right}
.chip{display:inline-block;background:var(--bg);border:1px solid var(--line);border-radius:999px;
  padding:3px 10px;margin:0 6px 6px 0;font-size:13px}
.chip b{color:var(--accent)}

/* ── Health banner ── */
.health{background:#fef3f2;border-bottom:1px solid #fecdca;color:#b42318;
  padding:8px 24px;font-size:13px;text-align:center}
.health a{color:#b42318;text-decoration:underline}
.health.ok{background:#ecfdf3;border-color:#abefc6;color:#067647}
.health.ok a{color:#067647}

/* ── Histogram tygodniowy (fale nowych kreacji) ── */
.hist{display:flex;align-items:flex-end;gap:3px;height:120px;padding:10px 4px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow-x:auto}
.hcol{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:14px}
.hbar{width:12px;background:var(--accent);border-radius:3px 3px 0 0;min-height:2px}
.hbar.zero{background:var(--line)}
.hcol .hl{font-size:9px;color:var(--muted);white-space:nowrap;transform:rotate(-60deg);transform-origin:top left;height:34px}

/* ── Gantt życia reklam ── */
.gantt{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:8px 0;overflow:hidden}
.gmonth{position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.gmonth span{position:absolute;top:4px;left:3px;font-size:10px;color:var(--muted)}
.grow{position:relative;height:26px;margin:3px 0}
.glabel{position:absolute;left:10px;top:5px;font-size:12px;color:var(--ink);z-index:2;
  max-width:180px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none}
.gtrack{position:absolute;left:200px;right:14px;top:0;bottom:0}
.gbar{position:absolute;top:5px;height:16px;border-radius:4px;background:var(--cold);min-width:3px}
.gbar.active{background:#12805c}
.gbar.win{background:var(--accent)}
.gbar.off{background:#9aa3af}
.gsection{font-size:13px;font-weight:600;color:var(--muted);margin:18px 0 6px}

/* ── Krajobraz: wiersz „Ty” ── */
tr.you-row td{background:#eff4ff !important;font-weight:600}
.tag.you{background:var(--accent);color:#fff;border-color:var(--accent)}
.minibar{height:6px;background:var(--line);border-radius:4px;overflow:hidden;max-width:120px}
.minibar > i{display:block;height:100%;background:var(--accent)}

.thumb{width:72px;height:72px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:var(--bg);display:block}
.thumb.empty{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:11px}
a.thumb-link{display:inline-block}
.fmt{display:inline-block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;margin-top:4px}
