:root {
  --bg: #0d1117; --panel: #161b22; --panel2: #1c2330; --line: #2a3340; --text: #e6edf3; --muted: #8b98a8;
  --accent: #4ea1ff; --good: #2fbf71; --bad: #f25c54; --warn: #f2b84b; --high: #f25c54; --medium: #f2a13b; --low: #6b7785;
  --c1: #4ea1ff; --c2: #f2a13b; --c3: #b07cff; --c4: #2fbf71; --c5: #f25c54;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; font-size: 14px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, select { font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 5px 10px; cursor: pointer; }
button:hover, select:hover { border-color: var(--accent); }
button.on { background: var(--accent); color: #06121f; border-color: var(--accent); }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.good { color: var(--good); }
.diff { color: var(--warn); font-weight: 600; }
.bad { color: var(--bad); }
.hidden { display: none !important; }

/* górny pasek */
header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 16px; padding: 8px 16px; background: #0a0e14; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
header .logo { font-weight: 700; letter-spacing: .5px; color: var(--text); }
header .logo span { color: var(--accent); }
nav { display: flex; gap: 4px; flex-wrap: wrap; }
nav a { padding: 6px 10px; border-radius: 6px; color: var(--muted); }
nav a.active, nav a:hover { color: var(--text); background: var(--panel2); text-decoration: none; }
header .right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
header form { margin: 0; }
#status { font-size: 12px; color: var(--muted); }

main { padding: 16px; max-width: 1500px; margin: 0 auto; }
h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 15px; margin: 0 0 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; font-weight: 600; }
h3 { font-size: 14px; margin: 0 0 6px; }

.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tiles { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px; min-width: 0; }
.card.tight { padding: 10px; }
section { margin-bottom: 18px; }

.big { font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* kafelki wskaźników */
.tile { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 10px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tile:hover { border-color: var(--accent); }
.tile .t { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .v { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tile .row { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 12px; }
.tile svg { width: 100%; height: 28px; }

/* tabele */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; position: sticky; top: 0; background: var(--panel); }
tr.day-head td { background: var(--panel2); font-weight: 600; color: var(--muted); font-size: 12px; text-transform: uppercase; }
tr.past td { opacity: .75; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: #1f2836; }
tr.today-mark td { border-top: 2px solid var(--accent); }
.scroll { overflow: auto; max-height: 560px; }

.imp { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; }
.imp.high { background: var(--high); }
.imp.medium { background: var(--medium); }
.imp.low { background: var(--low); }
.pill { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px; background: var(--panel2); border: 1px solid var(--line); color: var(--muted); }
.pill.good { color: var(--good); border-color: #1d5c3c; }
.pill.bad { color: var(--bad); border-color: #6b2a27; }
.pill.sep { color: var(--warn); border-color: #6b5222; }
/* święta */
.pill.hol-closed { color: #fff; border-color: #c0392b; background: #8e2a22; font-weight: 700; }
.pill.hol-early { color: #ffd38a; border-color: #8a6420; background: #2b2110; }
.pill.hol-bank { color: var(--muted); border-color: var(--line); background: transparent; }
tr.day-head td .pill { margin-left: 8px; text-transform: none; }
tr.day-head.hol-closed td { background: #3a1714; color: #ffb3a8; border-top: 2px solid #c0392b; }
tr.day-head.hol-early td { background: #2b2110; }
.cal-grid .d.hol-closed { background: repeating-linear-gradient(135deg, #3a1714 0 8px, #2e1411 8px 16px); outline: 1px solid #8e2a22; }
.cal-grid .d.hol-early { background: #231c10; }
.cal-grid .d .pill { display: block; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* filtr ważności */
.impf { display: inline-flex; gap: 4px; }
.impbtn { opacity: .45; }
.impbtn.sel { opacity: 1; border-color: var(--accent); background: var(--panel2); }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.card-head h2 { margin: 0; }

/* wykresy */
.chart { position: relative; }
.chart svg { width: 100%; display: block; overflow: visible; }
.chart .axis text { fill: var(--muted); font-size: 11px; }
.chart .grid line { stroke: var(--line); stroke-width: 1; }
.chart .ref { stroke: var(--muted); stroke-dasharray: 4 3; }
.chart .zero { stroke: #4a5566; }
.chart .hover-line { stroke: var(--muted); stroke-width: 1; }
.tip { position: absolute; pointer-events: none; background: #0a0e14; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font-size: 12px; white-space: nowrap; z-index: 5; }
/* opis po najechaniu kursorem (elementy z data-tip) */
.hovertip { position: fixed; z-index: 50; max-width: 380px; pointer-events: none; background: #0a0e14; border: 1px solid #3a4656; border-radius: 8px; padding: 9px 11px; font-size: 12.5px; line-height: 1.45; color: var(--text); white-space: pre-line; box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }
[data-tip] { cursor: help; }
.tile [data-tip], tr.clickable [data-tip], .ev[data-tip], a[data-tip] { cursor: pointer; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 6px; }
.legend i { display: inline-block; width: 12px; height: 3px; vertical-align: middle; margin-right: 5px; border-radius: 2px; }
.tip i { display: inline-block; width: 10px; height: 3px; margin-right: 5px; vertical-align: middle; border-radius: 2px; }
.lc0 { background: var(--muted); }
.lc1 { background: var(--c1); } .lc2 { background: var(--c2); } .lc3 { background: var(--c3); } .lc4 { background: var(--c4); } .lc5 { background: var(--c5); }
.s1 { stroke: var(--c1); fill: var(--c1); } .s2 { stroke: var(--c2); fill: var(--c2); } .s3 { stroke: var(--c3); fill: var(--c3); } .s4 { stroke: var(--c4); fill: var(--c4); } .s5 { stroke: var(--c5); fill: var(--c5); }
path.line { fill: none; stroke-width: 2; }
path.line.thin { stroke-width: 1.4; }
path.line.dash { stroke-dasharray: 5 4; }
rect.bar-good { fill: var(--good); } rect.bar-bad { fill: var(--bad); } rect.bar-flat { fill: var(--muted); }
path.spark { fill: none; stroke: var(--accent); stroke-width: 1.5; }

/* wskaźnik */
.ind-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 14px; }
.notes { color: #c9d4df; line-height: 1.5; max-width: 900px; }
.hint { border-left: 3px solid var(--accent); padding: 8px 12px; background: var(--panel2); border-radius: 0 8px 8px 0; line-height: 1.55; }
.select-ind { min-width: 280px; }

/* typowy miesiąc */
.month-grid { display: grid; grid-template-columns: 90px repeat(5, 1fr); gap: 6px; }
.month-grid .h { color: var(--muted); font-size: 12px; text-transform: uppercase; padding: 4px; }
.month-grid .cell { background: var(--panel2); border-radius: 6px; padding: 6px; min-height: 60px; display: flex; flex-direction: column; gap: 3px; }
.month-grid .ev { font-size: 12px; cursor: pointer; }
.month-grid .ev:hover { color: var(--accent); }
.cal-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.cal-grid .d { background: var(--panel2); border-radius: 6px; padding: 6px; min-height: 92px; font-size: 12px; }
.cal-grid .d.today { outline: 2px solid var(--accent); }
.cal-grid .d.other { opacity: .4; }
.cal-grid .d .n { color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.cal-grid .ev { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }

.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.countdown { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gauge { height: 8px; background: var(--panel2); border-radius: 4px; position: relative; margin: 8px 0; }
.gauge .m { position: absolute; top: -4px; width: 4px; height: 16px; border-radius: 2px; background: var(--text); }
.gauge .c { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--muted); }

/* logowanie */
body.login { display: grid; place-items: center; min-height: 100vh; }
.login-box { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 28px; width: 320px; display: flex; flex-direction: column; gap: 14px; }
.login-box h1 { margin: 0; }
.login-box label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); }
.login-box input { font: inherit; padding: 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); }
.login-box button { padding: 9px; background: var(--accent); color: #06121f; border: 0; font-weight: 600; }
.err { color: var(--bad); margin: 0; }

@media (max-width: 700px) {
  .g2, .g3 { grid-template-columns: 1fr; }
  main { padding: 10px; }
  .hide-sm { display: none; }
}
.hol-line { margin-top: 8px; }
.tzlabel { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.tzlabel select { padding: 3px 6px; font-size: 12px; }
/* przełącznik języka, gość, powrót do AiValut */
.langsw { display: inline-flex; gap: 2px; }
.langsw button { padding: 3px 7px; font-size: 12px; }
#backlink { white-space: nowrap; }
#backlink:hover, .logo:hover { text-decoration: none; }
#dashlink { white-space: nowrap; }
#dashlink:hover { text-decoration: none; }
.homebtn { background: #4caf50; border-color: #4caf50; color: #0d1a0d; font-weight: 700; }
.homebtn:hover { background: #66c26a; border-color: #66c26a; }
.guest-cta { margin-bottom: 14px; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; border-color: var(--accent); }
.tile.static { cursor: default; }
.tile.static:hover { border-color: var(--line); }