/* Kalkulator EEMS — styl EcoReg: zieleń z logo (#318F4D), białe logo na ciemnym pasku. */
/* paleta jak w panelu EEMS (tb/theme.py): zieleń EcoReg, granat paska, tło i karty */
:root { --green: #318f4d; --green-d: #1e7a35; --bar: #2f4f7f; --ink: #27272a; --ink2: #52525b; --muted: #767d77;
  --line: #e4e7e5; --bg: #f4f6f5; --card: #ffffff; --wash: #e6f2e8; --bad: #c62828; --badbg: #fde7e7; --warnbg: #fff1dc; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.5 Roboto, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg);
  font-variant-numeric: tabular-nums; }
a { color: var(--green-d); }
h1 { font-size: 24px; line-height: 1.25; margin: 0 0 4px; }
h2 { font-size: 18px; margin: 0 0 12px; }
h3 { font-size: 15px; margin: 22px 0 8px; }
p { margin: 0 0 10px; }
code { background: #eef0ee; padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.bar { background: var(--bar); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 20px; flex-wrap: wrap; }
.bar .brand { display: flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; font-weight: 600; }
.bar .brand img { display: block; height: 34px; width: auto; }
.bar nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.bar nav a, .bar nav .link { color: #dfeee3; text-decoration: none; font-size: 14px; }
.bar nav a:hover, .bar nav .link:hover { color: #fff; text-decoration: underline; }
.bar form { margin: 0; }
main { max-width: 1040px; margin: 0 auto; padding: 22px 16px 40px; }
.foot { text-align: center; color: var(--muted); font-size: 12px; padding: 0 16px 28px; }
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.head .sub { color: var(--ink2); margin: 0; font-size: 14px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); padding: 20px; margin-bottom: 16px; }
.card.narrow { max-width: 440px; margin: 40px auto; }
.card.flush { padding: 4px 0; }
.btn { display: inline-block; font: inherit; font-weight: 600; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); text-decoration: none; cursor: pointer; }
.btn:hover { border-color: var(--green); }
.btn.primary { background: var(--green-d); border-color: var(--green-d); color: #fff; }
.btn.primary:hover { background: #17552b; }
.btn.danger { color: var(--bad); border-color: #e6b8b4; }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--green-d); cursor: pointer; text-decoration: underline; }
:focus-visible { outline: 3px solid #7fc596; outline-offset: 2px; }
.hint { color: var(--muted); font-size: 13px; }
.unit { color: var(--muted); font-weight: 400; }
.alert { background: var(--badbg); border: 1px solid #f1b9b4; color: #7a1a14; border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; }
.alert ul { margin: 6px 0 0; padding-left: 20px; }
.note { background: var(--warnbg); border: 1px solid #ecd9a0; border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; }
.notes ul, .legal { margin: 0; padding-left: 20px; }
.notes li, .legal li { margin-bottom: 6px; }
.tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 10px; background: #eceeec; color: var(--ink2); }
.tag.good { background: var(--wash); color: var(--green-d); }
.tag.bad { background: var(--badbg); color: var(--bad); }
.hint.warn { color: var(--bad); }   /* abonament: oszczędność klienta niższa niż cel (tylko strona www) */
/* formularze */
.stack { display: grid; gap: 14px; }
label { display: block; font-weight: 600; font-size: 14px; }
label .hint { display: block; font-weight: 400; margin-top: 3px; }
input[type=text], input[type=email], input[type=password], input[type=file], select { display: block; width: 100%; margin-top: 4px;
  font: inherit; padding: 8px 10px; border: 1px solid #c3c9c4; border-radius: 7px; background: #fff; color: var(--ink); min-height: 40px; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; margin-bottom: 8px; }
.grid .span2 { grid-column: span 2; }
fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px 14px; margin: 16px 0; }
legend { font-weight: 600; padding: 0 6px; }
label.radio { font-weight: 400; display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; }
label.radio input { margin-top: 4px; }
details { margin-top: 10px; }
summary { cursor: pointer; color: var(--green-d); margin-bottom: 10px; }
.steps { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 14px; flex-wrap: wrap; }
.steps button { font: inherit; font-weight: 600; padding: 7px 14px; border-radius: 18px; border: 1px solid var(--line); background: #fff; color: var(--ink2); cursor: pointer; }
.steps button[aria-current=step] { background: var(--wash); border-color: var(--green); color: var(--green-d); }
.formnav { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
[hidden] { display: none !important; }
progress { width: 100%; height: 10px; accent-color: var(--green); margin: 8px 0 12px; }
/* tabele */
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
table.data th, table.data td, table.list th, table.list td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.data th, table.list th { font-size: 12.5px; color: var(--ink2); font-weight: 600; background: #fafbfa; }
table.data { font-size: 14px; margin-bottom: 8px; }
.r { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
th.r { white-space: normal; }
tr.sum td { font-weight: 700; border-top: 2px solid #c9cfca; }
tr.best td { background: var(--wash); }
th.sel { background: var(--wash) !important; }
table.list .ops { text-align: right; white-space: nowrap; }
table.list .ops a { margin-left: 12px; }
table.months input { min-width: 84px; padding: 6px 8px; min-height: 36px; margin: 0; }
table.months td { padding: 4px 5px; border-bottom: 0; }
table.months.zones-1 .z1, table.months.zones-1 .z2, table.months.zones-2 .z2 { display: none; }
/* wynik */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--green); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.tile .lab { font-size: 13px; color: var(--ink2); }
.tile .val { font-size: 26px; font-weight: 650; line-height: 1.2; }
.tile .sub { font-size: 12.5px; color: var(--muted); }
.tile .p90 { font-size: 13.5px; font-weight: 600; color: var(--green-d); }
/* podsumowanie pracy i oszczędności (scenariusze, P50 / P90, leasing a gotówka, 20 lat) */
.summary h2 .en { font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 8px; white-space: nowrap; }
.summary .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 28px; }
.summary .col > h3:first-child { margin-top: 14px; }
.summary table.kv td:first-child { color: var(--ink2); }
.summary table.kv td.r, .summary table.scen td.chg { white-space: normal; }
.summary table.scen td.chg { color: var(--ink2); font-size: 13px; }
.summary .legal { font-size: 13px; color: var(--ink2); }
.summary .chg-m { display: none; font-weight: 400; font-size: 12.5px; color: var(--ink2); }
.chart { margin: 8px 0 12px; }
.chart svg { max-width: 100%; height: auto; display: block; }
.chart-narrow { display: none; }
@media (max-width: 760px) {
  .chart-wide { display: none; }
  .chart-narrow { display: block; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary .cols { grid-template-columns: minmax(0, 1fr); }
  .summary h2 .en { display: block; margin-left: 0; }
  .summary table.scen .chg { display: none; }           /* opis zmiany pod nazwą scenariusza — kwoty zostają na ekranie */
  .summary .chg-m { display: block; }
  .summary table.data { font-size: 13px; }
  .summary table.data th, .summary table.data td { padding: 6px 6px; }
  .summary table.scen { font-size: 12px; }
  .summary table.scen th, .summary table.scen td { padding: 6px 4px; }
  .summary table.scen th .long { display: none; }
  .summary .chg-m { font-size: 12px; }
  .grid { grid-template-columns: 1fr; }
  .grid .span2 { grid-column: auto; }
  .card { padding: 16px 14px; }
  h1 { font-size: 21px; }
  .bar { padding: 10px 14px; }
  .bar .brand span { display: none; }
  /* tabela 12 miesięcy i lista ofert: wiersz jako karta z podpisami pól */
  table.months thead, table.list thead { display: none; }
  table.months tr, table.list tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  table.list tr { padding: 12px 14px; }
  table.months td, table.list td { display: block; padding: 0; border: 0; text-align: left !important; }
  table.months td::before, table.list td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: var(--ink2); font-weight: 600; }
  table.months input { width: 100%; }
  table.list .ops { grid-column: 1 / -1; text-align: left; }
  table.list .ops a { margin: 0 14px 0 0; }
}
@media (max-width: 420px) { .tiles { grid-template-columns: 1fr; } .tile .val { font-size: 24px; } }
/* osadzenie w panelu EEMS (ramka albo ?embed=1): bez paska z logo, zostaje wąski pasek nawigacji kalkulatora */
.bar .who { display: none; }
html.embed .bar { background: var(--card); color: var(--ink); border-bottom: 1px solid var(--line); padding: 6px 16px;
  justify-content: flex-start; position: sticky; top: 0; z-index: 5; }
html.embed .bar.anon, html.embed .bar .brand, html.embed .bar .logout { display: none; }
html.embed .bar nav { flex: 1; gap: 6px 20px; }
html.embed .bar nav a { color: var(--green-d); font-weight: 600; }
html.embed .bar nav a:hover { color: var(--green-d); }
html.embed .bar .who { display: block; margin-left: auto; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
html.embed main { padding-top: 16px; }
html.embed .card.narrow { margin-top: 24px; }
@media (max-width: 760px) { html.embed .bar { padding: 6px 14px; } html.embed .bar .who { display: none; } }
/* etap 12: zasilacz wyspowy, raport zgodności opłaty mocowej, import xlsx */
.island .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 28px; }
.island table.kv td:first-child { color: var(--ink2); }
.island table.kv td.r { white-space: normal; }
.island .alert, .island .note { margin-top: 10px; }
#xlsx-box { min-width: 0; }
#xlsx-box input[type=file] { max-width: 100%; }
table.months .rowno { display: inline-block; min-width: 2em; color: var(--ink2); }
@media (max-width: 760px) {
  .island .cols { grid-template-columns: minmax(0, 1fr); }
  table.fee-check th, table.fee-check td { padding-left: 6px; padding-right: 6px; }
}
/* etap 16: scena izometryczna konfiguracji obok kafelków (style brył i animacje: iso.css generowany przez tb/iso/library.py) */
.hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: stretch; margin-bottom: 16px; }
.hero .card.scene { margin: 0; padding: 16px 16px 10px; }
.hero .tiles { grid-template-columns: minmax(0, 1fr); margin: 0; }
.scene h2 { margin-bottom: 6px; }
.scene svg { display: block; width: 100%; height: auto; }
.scene .hint { margin: 6px 0 0; text-align: center; }
.scene-narrow { display: none; }
.izo-static .pipe.is-on .dots { animation: none; }       /* magazyn pracuje w obie strony — bez kierunku */
@media (max-width: 900px) {
  .hero { display: flex; flex-direction: column; gap: 0; margin-bottom: 0; }
  .hero .tiles { order: -1; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; }
  .hero .card.scene { margin-bottom: 16px; }
}
@media (max-width: 760px) { .hero .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .scene-wide { display: none; }
  .scene-narrow { display: block; }
  .hero .card.scene { padding: 14px 6px 10px; }
  .hero .card.scene h2 { padding: 0 8px; }
}
@media (max-width: 420px) { .hero .tiles { grid-template-columns: 1fr; } }
/* dobór pojemności i strategie sterowania (17.10.2026) */
.rules .chg-m { display: block; font-weight: 400; font-size: 12.5px; color: var(--ink2); white-space: normal; }
table.rules td:first-child { white-space: normal; min-width: 260px; }
table.sweep tr.offer td { color: var(--ink2); }
table.npv .irr { display: block; font-size: 12.5px; color: var(--ink2); }
@media (max-width: 640px) {
  table.rules td:first-child { min-width: 0; } .rules .chg-m { font-size: 12px; }
  table.rules th:nth-child(n+4), table.rules td:nth-child(n+4) { display: none; }      /* telefon: strategia, oszczędność, różnica */
  table.sweep th:nth-child(2), table.sweep td:nth-child(2), table.sweep th:nth-child(4), table.sweep td:nth-child(4),
  table.sweep th:nth-child(6), table.sweep td:nth-child(6) { display: none; }
  table.rules .pct { display: block; }
  table.sweep .tag { display: block; width: max-content; margin-top: 2px; }
}
/* etap oferty (21.10.2026): wersja robocza / nieaktualna */
.tag.warn { background: var(--warnbg); color: #8a5a00; }
table.list tr.stale td { color: var(--ink2); opacity: 0.7; }
form.inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Kontekst rynku energii (22.10.2026) */
.mctx-lead { margin: 0 0 8px; }
.mctx-list { margin: 0 0 10px; padding-left: 20px; }
.mctx-list li { margin: 0 0 6px; line-height: 1.45; }
.mctx-ref { color: var(--muted, #6b726d); font-size: 10px; }
.mctx-concl { background: #eef6f0; border-left: 3px solid #318f4d; border-radius: 8px; padding: 10px 12px; margin: 0 0 8px; }
.mctx-kps { margin: 6px 0 8px; break-inside: avoid; }
.mctx-kps p { margin: 0 0 4px; }
.mctx-kps-svg { display: block; max-width: 640px; height: auto; }
/* strona główna kalkulatorów (kalkulatorenergetyczny.pl, 09.11.2026) — mobile-first */
.intro { margin: 8px 0 18px; }
.intro h1 { font-size: 26px; }
.calcs { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr; }
.calc h2 { margin-bottom: 6px; }
.calc { display: flex; flex-direction: column; margin: 0; }
.calc .btn { align-self: flex-start; margin-top: auto; }
.center { text-align: center; margin-top: 18px; }
@media (min-width: 760px) { .calcs { grid-template-columns: 1fr 1fr; } .intro h1 { font-size: 30px; } }