:root {
  --bg: #f6f7f9; --card: #ffffff; --text: #1b1f24; --muted: #667085; --line: #e3e6ea;
  --amber: #d99a1b; --accent: #0f766e; --accent-text: #ffffff; --err: #b42318; --tag: #e6f4f1; --tag-text: #0b5c55;
  --warn-bg: #fff4d6; --warn-text: #8a5a00; --owe: #c2410c;
}
/* Ciemna paleta: ręcznie wybrana (preferencje) albo zgodna z ustawieniem telefonu, o ile ktoś nie wybrał jasnej. */
:root[data-theme="dark"] {
  --bg: #101316; --card: #181c20; --text: #eceff3; --muted: #9aa4b2; --line: #2a3037;
  --amber: #f5b942; --accent: #2dd4bf; --accent-text: #06201d; --err: #f97066; --tag: #16302d; --tag-text: #7ee6d8;
  --warn-bg: #3a2f12; --warn-text: #ffd88a; --owe: #fdba74;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: #101316; --card: #181c20; --text: #eceff3; --muted: #9aa4b2; --line: #2a3037;
    --amber: #f5b942; --accent: #2dd4bf; --accent-text: #06201d; --err: #f97066; --tag: #16302d; --tag-text: #7ee6d8;
    --warn-bg: #3a2f12; --warn-text: #ffd88a; --owe: #fdba74;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 0 16px env(safe-area-inset-bottom);
}
.top { max-width: 560px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 14px 0; }
.brand { font-weight: 700; color: var(--text); text-decoration: none; letter-spacing: .2px; }
.lang a { color: var(--muted); text-decoration: none; padding: 6px 8px; border-radius: 8px; font-size: 14px; }
.lang a.on { color: var(--text); background: var(--line); }
main { max-width: 560px; margin: 0 auto; padding-bottom: 32px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px; margin-bottom: 14px; }
h1 { font-size: 1.5rem; margin: 0 0 6px; line-height: 1.25; }
h2 { font-size: 1.1rem; margin: 0 0 10px; }
.lead { color: var(--muted); margin: 0 0 16px; }
.hint, .muted { color: var(--muted); font-size: .9rem; }
.err { color: var(--err); font-weight: 600; }
label { display: block; font-weight: 600; margin-bottom: 6px; }
input[type=text] {
  width: 100%; font: inherit; padding: 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg); color: var(--text); margin-bottom: 14px;
}
input[type=text]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn {
  display: block; width: 100%; font: inherit; font-weight: 700; text-align: center; text-decoration: none;
  padding: 15px; border: 0; border-radius: 12px; background: var(--accent); color: var(--accent-text); cursor: pointer;
}
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn.small { width: auto; padding: 12px 16px; white-space: nowrap; }
.qr { width: min(300px, 100%); margin: 0 auto 16px; line-height: 0; }
.qr canvas { display: block; width: 100%; height: auto; border-radius: 12px; image-rendering: pixelated; }
.qr svg { display: block; width: 100%; height: auto; }
.linkrow { display: flex; gap: 8px; align-items: stretch; }
.linkrow input { margin: 0; min-width: 0; font-size: .9rem; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: 10px 0; border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.list li:first-child { border-top: 0; }
.tag { font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: var(--accent-text); }
.tag.soft { background: var(--tag); color: var(--tag-text); }
.back { color: var(--muted); text-decoration: none; font-size: .95rem; }
.list a { color: var(--text); font-weight: 600; }
.warn { color: var(--warn-text); background: var(--warn-bg); border-radius: 10px; padding: 10px 12px; }
.filebtn { cursor: pointer; margin-bottom: 10px; }
.items { list-style: none; margin: 0 0 14px; padding: 0; }
.items li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.items li:first-child { border-top: 0; }
.itemrow { display: flex; gap: 6px; align-items: center; width: 100%; }
.itemrow input[type=text], .itemrow select { margin: 0; min-width: 0; padding: 10px; font-size: .95rem; }
.itemrow input[name=name] { flex: 1 1 auto; }
.itemrow input[name=price], .itemrow input[name=service_value] { flex: 0 0 5.5rem; text-align: right; }
.itemrow select { flex: 0 0 auto; font: inherit; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); }
.itemrow.add { margin: 4px 0 18px; }
.itemrow .btn.small { padding: 10px 12px; }
.totals { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 14px 0; }
.totals dt, .totals dd { margin: 0; }
.totals dd { text-align: right; font-variant-numeric: tabular-nums; }
.spinner { width: 34px; height: 34px; border: 4px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.9s linear infinite; margin: 10px 0; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
details > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
details > summary::-webkit-details-marker { display: none; }
details > summary h1 { margin: 0; }
details > summary::after { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin-right: 6px; transition: transform .15s; }
details[open] > summary::after { transform: rotate(-135deg); }
details[open] > summary { margin-bottom: 6px; }
@media (prefers-reduced-motion: reduce) { details > summary::after { transition: none; } }
.claimsummary { display: flex; justify-content: space-between; gap: 12px; align-items: flex-end; padding: 12px; margin-bottom: 12px; background: var(--bg); border-radius: 12px; position: sticky; top: 0; z-index: 2; border: 1px solid var(--line); }
.claimsummary .muted { display: block; font-size: .8rem; }
.claimsummary .big { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.claimsummary .unclaimed { text-align: right; color: var(--warn-text); }
.claimsummary .allclaimed { text-align: right; color: var(--accent); }
.claimlist { list-style: none; margin: 0 0 14px; padding: 0; }
.claimitem { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; overflow: hidden; position: relative; }
.claimitem.mine { border-color: var(--accent); background: var(--tag); }
.claimitem.taken { opacity: .92; }
.claimform { margin: 0; }
.claimbtn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 12px; font: inherit; text-align: left; background: transparent; color: var(--text); border: 0; cursor: pointer; min-height: 52px; }
.claimbtn:disabled { cursor: default; }
.claimbtn .tick { flex: 0 0 26px; height: 26px; border: 2px solid var(--line); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: var(--accent-text); }
.claimitem.mine .tick { background: var(--accent); border-color: var(--accent); }
.claimbtn .iname { flex: 1 1 auto; font-weight: 600; word-break: break-word; }
.claimbtn .iprice { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 0 12px 10px 48px; }
.chip { font-size: .8rem; padding: 2px 9px; border-radius: 999px; background: var(--line); color: var(--text); }
.chip.me { background: var(--accent); color: var(--accent-text); font-weight: 700; }
.split { font-size: .8rem; }
/* pozycja zajęta przez kogoś innego: widoczny znacznik (przygaszony), ale nadal można dołączyć */
.claimitem.taken { background: var(--bg); }
.seen { position: absolute; bottom: 8px; right: 8px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: #cfd4da; color: #111827; font-size: .78rem; font-weight: 800; line-height: 22px; text-align: center; pointer-events: none; }
/* belka podsumowania: kwota nigdy nie łamie się na dwie linie, prawa strona oddaje miejsce */
.claimsummary > div:first-child { flex: 0 0 auto; }
.claimsummary > div:last-child { flex: 1 1 auto; min-width: 0; font-size: .9rem; }
.claimsummary .big { white-space: nowrap; }
/* miejsce na odznakę w prawym dolnym rogu, żeby nie zasłaniała napisów w rzędzie z imionami */
.chips { padding-right: 44px; }
/* wynik rozliczenia i płatności (zadanie 07) */
.paystate { padding: 14px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; background: var(--bg); }
.paytitle { font-weight: 800; margin-bottom: 8px; }
.paybar { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; margin-bottom: 8px; }
.paybar span { display: block; height: 0; border-top: 10px solid var(--accent); border-radius: 999px; transition: width .3s; box-sizing: border-box; }
.paystate.st-partial .paybar span, .paystate.st-unpaid .paybar span { border-top-color: var(--amber); }
.paystate.st-paid .paytitle { color: var(--accent); }
.paynums { font-variant-numeric: tabular-nums; font-size: .95rem; }
.mypart { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin: 14px 0 6px; }
.mypart .muted { display: block; font-size: .8rem; }
.mypart .big { font-size: 1.5rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mybal { text-align: right; font-weight: 700; font-size: .95rem; }
.mybal.owe { color: var(--owe); } .mybal.get, .mybal.ok { color: var(--accent); }
.why { margin: 8px 0 14px; }
.why summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
.payactions { display: grid; gap: 8px; margin: 10px 0 16px; }
.payactions form { margin: 0; }
.tipcheck { display: flex; align-items: center; gap: 4px; font-weight: 400; white-space: nowrap; margin: 0; font-size: .85rem; }
.payments .pwho { font-weight: 600; } .payments .pamt { font-variant-numeric: tabular-nums; margin-left: auto; }
.transfers li strong { margin-left: auto; font-variant-numeric: tabular-nums; }
form.inline { display: inline; margin: 0; }
.list li .btn.small { padding: 6px 12px; }
.closelist { list-style: none; margin: 0 0 14px; padding: 0; }
.closelist li { padding: 10px 0; border-top: 1px solid var(--line); }
.closelist li:first-child { border-top: 0; }
.cname { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.closelist select { width: 100%; font: inherit; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); }
/* wiersz płatności: kwota i przyciski nie rozjeżdżają się na wąskim ekranie */
.payments li { gap: 6px 10px; }
.payments .pactions { display: inline-flex; gap: 6px; align-items: center; flex-wrap: nowrap; flex: 0 0 auto; }
.payments .pactions .btn.small { padding: 6px 10px; font-size: .8rem; white-space: nowrap; }
.payments .pamt { white-space: nowrap; }
/* gotowość uczestników i organizator (zadania: gotowość, zmiana organizatora) */
.readypanel { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.readytitle { margin-bottom: 8px; }
.readychips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chip.rdy { background: var(--tag); color: var(--tag-text); font-weight: 700; }
.chip.notrdy { background: var(--bg); border: 1px solid var(--line); }
.readyform { margin: 0 0 6px; }
.readypanel .nudge { margin-top: 6px; }
.orgcard { padding: 12px 16px; }
.orgcard p { margin: 0 0 6px; }
/* tożsamość gościa (zadanie 15) */
.pickrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.pickrow .btn { width: auto; padding: 12px 18px; }
.orline { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .9rem; margin: 14px 0; }
.orline::before, .orline::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.inapp { background: var(--tag); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; font-size: .9rem; }
.inapp .btn { margin-top: 6px; }
.personallink .rotate { margin-top: 8px; }
/* preferencje (ikona w nagłówku): motyw */
.lang { display: flex; align-items: center; gap: 2px; }
.prefs { position: relative; margin-left: 6px; }
.prefs > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; color: var(--muted); }
.prefs > summary::-webkit-details-marker { display: none; }
.prefs > summary::after { display: none; }
.prefs[open] > summary { background: var(--line); color: var(--text); }
.prefsmenu { position: absolute; right: 0; top: 42px; z-index: 5; min-width: 190px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.prefsmenu p { margin: 2px 8px 6px; font-size: .8rem; }
.prefsmenu a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--text); text-decoration: none; }
.prefsmenu a.on { background: var(--tag); color: var(--tag-text); font-weight: 700; }

/* zaznaczanie za kogoś (zadanie 19) */
.actas { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 12px; }
.actas label { margin: 0; font-weight: 600; font-size: .9rem; white-space: nowrap; }
.actas select { flex: 1 1 auto; min-width: 0; font: inherit; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--text); }
.chip.byorg { border: 1px dashed var(--muted); }

/* instalacja PWA w menu preferencji */
.installbox { margin: 6px 4px 2px; padding-top: 8px; border-top: 1px solid var(--line); }
.installbox .btn { width: 100%; }
.installbox .hint { margin: 6px 0 0; }

details > summary h2 { margin: 0; }
details.cardfold > summary h1, details.cardfold > summary h2 { flex: 1 1 auto; }
/* wąskie ekrany (np. iPhone SE, 320 px): pole z linkiem i przycisk jeden pod drugim */
@media (max-width: 420px) {
  .linkrow { flex-wrap: wrap; }
  .linkrow input { flex: 1 1 100%; }
  .linkrow .btn { flex: 1 1 100%; width: 100%; }
}
/* wiersze płatności i zwrotów na wąskim ekranie: nazwa i kwota w pierwszej linii, przyciski zawsze w drugiej (równo) */
@media (max-width: 420px) {
  .payments li { flex-wrap: wrap; }
  .payments .pactions { flex: 1 1 100%; justify-content: flex-end; }
}

.rotate .btn { width: 100%; white-space: normal; text-align: center; }

.reportbar { max-width: 560px; margin: 0 auto 32px; padding: 0 16px; }
.reportbar textarea { width: 100%; box-sizing: border-box; margin: 6px 0 10px; padding: 10px 12px; font: inherit; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 10px; resize: vertical; }

.receiptview { margin-top: 8px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.receiptview img { display: block; width: 100%; height: auto; }

/* poprawa pozycji na wąskim ekranie: pełna nazwa w pierwszej linii, cena i przyciski w drugiej */
@media (max-width: 420px) {
  .items .itemrow { flex-wrap: wrap; }
  .items .itemrow input[name=name] { flex: 1 1 100%; }
  .items .itemrow input[name=price] { flex: 1 1 5.5rem; }
}

.itemrow.unsaved input[type=text] { border-color: var(--amber); }

.settingrow { padding: 10px 0; border-bottom: 1px solid var(--line); }
.settingrow .hint { margin: 2px 0 6px; }

.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tabs .btn { flex: 1 1 8rem; text-align: center; }
details.why > summary { overflow-wrap: anywhere; }

.loginform { display: grid; gap: 10px; }
.loginform input[type=email] { width: 100%; box-sizing: border-box; padding: 12px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
.accountlink { margin: 8px 0; font-size: .9rem; }
.accountlink a { color: var(--text); }
.check { display: flex; gap: 8px; align-items: center; margin: 8px 0; }

.kinds { border: 0; padding: 0; margin: 10px 0; }
.kinds legend { color: var(--muted); font-size: .9rem; padding: 0; }
.groupname { margin: 4px 0 12px; }

.addbill { margin-top: 10px; }
.periodhead { font-size: .85rem; margin-top: 8px; }

.wname { flex: 1 1 auto; }

.shares { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 12px 10px 48px; }
.shares form { margin: 0; display: inline; }
.stepbtn { width: 36px; height: 36px; font: inherit; font-size: 1.2rem; line-height: 1; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text); cursor: pointer; }
.stepbtn:disabled { opacity: .4; cursor: default; }
.sharesn { min-width: 1.4em; text-align: center; font-variant-numeric: tabular-nums; }
.sharesinfo { font-size: .8rem; }
.treatmenu { margin: 0; padding: 0 12px 10px 48px; }
.treatopts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.treatopts form { margin: 0; }
.chip.treat { background: var(--tag); color: var(--tag-text); font-weight: 600; }
.treatchips { padding-top: 0; }
.treatpanel { margin: 14px 0 0; }

.acctico { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: var(--text); text-decoration: none; margin-right: 4px; font-weight: 700; }
.acctico.on { background: var(--accent); color: var(--accent-text); }
.gate { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--tag); }
.gate p { margin: 0 0 8px; }
.fbbtns { display: flex; gap: 10px; margin-top: 8px; }
.fbbtns .btn { flex: 1 1 0; font-size: 1.4rem; }

.treatchips .btn.small { padding: 3px 10px; font-size: .8rem; min-height: 0; width: auto; }

/* Natywne kontrolki (radio, checkbox) w kolorze akcentu zamiast domyslnego niebieskiego przegladarki */
:root { accent-color: var(--accent); }

/* "Jak poszło?": pole wyboru przyczyny w stylu reszty formularzy (natywny select wygladal obco) */
#feedback select { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); }
/* oddech między listą (płatności, przelewy) a kolejnym nagłówkiem sekcji */
ul.list + h2 { margin-top: 20px; }

/* wordmark marki w nagłówku: wariant na jasne i na ciemne tło */
.brand { display: inline-flex; align-items: center; }
.wm { height: 22px; width: auto; display: block; }
.wm-d { display: none; }
:root[data-theme="dark"] .wm-l { display: none; }
:root[data-theme="dark"] .wm-d { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .wm-l { display: none; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .wm-d { display: block; }
}

/* pola tekstowe w formularzach: pełna szerokość i czcionka aplikacji (nie domyślna monospace) */
textarea { width: 100%; box-sizing: border-box; margin: 6px 0 10px; padding: 10px 12px; font: inherit; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 10px; resize: vertical; }
/* linki w stopce (Napisz do nas, O projekcie): w kolumnie treści */
.footlinks { max-width: 560px; margin: 0 auto 24px; padding: 0 16px; box-sizing: border-box; }
.footlinks a { margin-right: 14px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.maintbanner { margin: 0 0 12px; }

/* słoik obok wordmarku: wariant na jasne i na ciemne tło */
.brand { gap: 8px; }
.jar { height: 26px; width: 26px; display: block; }
.jar-d { display: none; }
:root[data-theme="dark"] .jar-l { display: none; }
:root[data-theme="dark"] .jar-d { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .jar-l { display: none; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .jar-d { display: block; }
}

/* przyjazna podpowiedź (nie ostrzeżenie): miodowa belka z lewej */
.nudge { background: var(--bg); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px; padding: 10px 12px; margin: 10px 0; font-size: 14px; color: var(--text); }

/* hasło marki: trzy kroki, ostatni wyróżniony miodem */
.slogan { max-width: 560px; margin: 4px auto 14px; text-align: center; font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--text); }
.slogan.left { text-align: left; margin: 0 0 10px; }
.slogan em { font-style: normal; color: var(--accent-border, var(--amber)); white-space: nowrap; }

/* pomoc: przycisk "?" w nagłówku i okienko "Jak to działa" */
.helpbtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-right: 4px; border-radius: 50%; border: 1.5px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; }
.helpbtn:hover, .helpbtn:focus-visible { color: var(--text); border-color: var(--muted); }
.helpdlg { width: min(92vw, 480px); max-height: 90vh; padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--text); box-shadow: 0 10px 40px rgba(0, 0, 0, .25); }
.helpdlg::backdrop { background: rgba(20, 17, 13, .55); }
.helpbox { padding: 20px 20px 16px; overflow-y: auto; max-height: 90vh; }
.helpbox h2 { margin: 6px 0 10px; font-size: 1.1rem; }
.helpbox p { margin: 0 0 10px; }
.helpactions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.helpactions .btn { width: auto; }
.linkbtn { background: none; border: 0; padding: 4px 0; font: inherit; font-size: .9rem; font-weight: 400; color: var(--muted); text-decoration: underline; cursor: pointer; }

.helpnow { font-size: 1.05rem; margin: 0 0 12px; }
.helpbox details.why { margin-top: 6px; }

.settingsgroup { margin: 8px 0; }
.settingsgroup > summary { cursor: pointer; padding: 6px 0; }

/* Panel admina na dużym ekranie (dodatkowy tryb: poniżej 1000 px wygląda jak dotąd). Strony z body.wide dostają szerszą kolumnę,
   karty w dwóch kolumnach (pierwsza karta z zakładkami na całą szerokość), tabele i listy swobodniej, ustawienia w dwóch kolumnach. */
@media (min-width: 1000px) {
  body.wide { padding: 0 32px; }
  body.wide .top, body.wide main, body.wide .reportbar { max-width: 1400px; }
  body.wide main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; align-items: start; }
  body.wide main > * { grid-column: 1 / -1; }
  body.wide main > section.card { grid-column: auto; margin: 0; }
  body.wide main > section.card:first-of-type, body.wide main > section.card.fullrow { grid-column: 1 / -1; }
  body.wide .tabs { display: flex; flex-wrap: wrap; gap: 8px; }
  body.wide .settingsrows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
  body.wide input[type="text"], body.wide input[type="password"], body.wide select { max-width: 520px; }
  body.wide .itemrow input[type="text"] { max-width: 420px; }
}
@media (min-width: 1500px) {
  body.wide main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.wide main > section.card.fullrow, body.wide main > section.card:first-of-type { grid-column: 1 / -1; }
}

@media (min-width: 1000px) {
  body.wide .btn { width: auto; min-width: 0; }
  body.wide .tabs .btn { padding-left: 18px; padding-right: 18px; }
  body.wide .settingsrows { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.wide .settingrow { padding-right: 8px; }
}
@media (min-width: 1000px) and (max-width: 1399px) {
  body.wide .settingsrows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* awatary z inicjałem (zadanie 35, etap 1): osiem kolorów o dobrym kontraście do ciemnego tekstu, stałych dla osoby */
.av { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 6px; border-radius: 50%; font-size: 12px; font-weight: 700; line-height: 1; color: #1f1a14; vertical-align: -5px; flex: none; }
.av0 { background: #f5c97a; } .av1 { background: #f2a48c; } .av2 { background: #e9a3b8; } .av3 { background: #c9b0e8; }
.av4 { background: #a9c3ee; } .av5 { background: #8fd3c9; } .av6 { background: #b8dc8f; } .av7 { background: #d8d2a6; }
.chip .av { width: 18px; height: 18px; font-size: 10px; margin-right: 4px; vertical-align: -4px; }
.btn .av { width: 20px; height: 20px; font-size: 11px; }

.stattable { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 6px 0; }
.stattable th, .stattable td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.stattable th { color: var(--muted); font-weight: 600; font-size: .8rem; }
.card { overflow-x: auto; }

.tabsauto .btn { flex: 0 0 auto; }
.tabsauto .muted { align-self: center; }
@media (min-width: 1000px) { body.wide .tabs .btn { flex: 0 0 auto; } }

/* rabat do pozycji: formularz wyboru w osobnej linii pod pozycją, bez wypychania szerokości */
.items li { flex-wrap: wrap; }
.items li .itemrow.discountform { flex: 1 1 100%; }
.itemrow.discountform select { flex: 1 1 auto; min-width: 0; max-width: 100%; }

/* Adres e-mail odwrócony w HTML i odwracany stylem (ochrona przed skraperami); zaznaczenie/kopiowanie daje tekst od końca, więc klik składa mailto skryptem */
.emlrv { unicode-bidi: bidi-override; direction: rtl; }

/* Panel admina: formularz przerwy technicznej i zapowiedzi prac (pole nie wypycha przycisków poza kartę) */
.maintform { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin-bottom: 8px; }
.maintform input[type=text] { flex: 1 1 100%; margin-bottom: 0; }
.annform input[type=text], .annform input[type=datetime-local] {
  width: 100%; font: inherit; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); margin-bottom: 10px;
}
.annform .fbbtns { display: flex; flex-wrap: wrap; gap: 8px; }

/* Panel admina: lista źródeł z kodami QR (BIZ-03) */
.refsrc { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.refqrimg { width: 140px; flex: 0 0 140px; background: #fff; border-radius: 10px; line-height: 0; }
.refqrimg svg { width: 100%; height: auto; display: block; }
.refinfo { flex: 1 1 260px; min-width: 0; word-break: break-all; }
.refinfo .fbbtns { display: flex; flex-wrap: wrap; gap: 8px; }

/* Strony narzędzi pod wyszukiwarkę (zadanie 40) */
.toolform input[type=text] { margin-bottom: 12px; }
.tipbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.toolresult { margin-top: 8px; padding: 14px; border-radius: 12px; background: var(--tag); color: var(--tag-text); }
.toolresult p { margin: 4px 0; }
.toolresult .eachline { font-size: 1.15rem; }
.toolresult .list { list-style: none; margin: 8px 0; padding: 0; }
.toolresult .list li { display: flex; justify-content: space-between; padding: 4px 0; }

/* Wzrost przez uczestników (zadanie 38): karta CTA, udostępnianie obrazu, korona organizatora */
.growthcta, .sharebox { margin-top: 18px; padding: 14px; border-radius: 12px; background: var(--tag); color: var(--tag-text); }
.growthcta h2, .sharebox h2 { margin-top: 0; }
.ctabtns { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.crown { display: inline-flex; vertical-align: middle; color: var(--amber); margin-right: 4px; }
.linkrow [data-sendgroup] { flex: 0 0 auto; }

/* Formularz zgłoszenia ambasadora (zadanie 39) */
.ambform input[type=text], .ambform input[type=email], .ambform textarea { margin-bottom: 12px; }