:root{--bg:#eef1f6;--panel:#fff;--panel2:#f3f5f9;--ink:#1a1f2b;--muted:#5a6472;--line:#e2e6ee;--accent:#bf1b2c;--green:#12996a;--amber:#b7791a;--brandred:#bf1b2c;--violet:#6d4bce} @media(prefers-color-scheme:dark){:root{--bg:#0f1115;--panel:#171a21;--panel2:#1e222b;--ink:#e8ebf0;--muted:#9aa3b2;--line:#2a2f3a;--accent:#ec3a4b;--green:#37c98b;--amber:#f0b429;--violet:#a992f0}} :root[data-theme="light"]{--bg:#eef1f6;--panel:#fff;--panel2:#f3f5f9;--ink:#1a1f2b;--muted:#5a6472;--line:#e2e6ee;--accent:#bf1b2c;--green:#12996a;--amber:#b7791a;--brandred:#bf1b2c;--violet:#6d4bce} :root[data-theme="dark"]{--bg:#0f1115;--panel:#171a21;--panel2:#1e222b;--ink:#e8ebf0;--muted:#9aa3b2;--line:#2a2f3a;--accent:#ec3a4b;--green:#37c98b;--amber:#f0b429;--brandred:#ec3a4b;--violet:#a992f0} *{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif} a{color:var(--accent);text-decoration:none} /* Pasek zostaje na gorze. To jedyna nawigacja tej strony - wiadomosci, wylogowanie, panel - a konto jest dlugie: zawody, platnosci, psy, druzyny, dane. Bez tego kazde klikniecie w pasek zaczyna sie od przewiniecia na sama gore. Cien zamiast kreski, bo kreska nad trescia wyglada jak druga ramka. */ .pbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;padding:10px 20px; background:var(--panel);border-bottom:1px solid var(--line);box-shadow:0 2px 10px rgba(0,0,0,.06)} .pbar .lg img{height:34px;width:auto;display:block} .pbar .lg{background:#fff;border:1px solid var(--line);border-radius:9px;padding:5px 9px;display:flex} .pbar .who{margin-left:auto;color:var(--muted);font-size:13px} .pbtn{border:1px solid var(--line);background:var(--panel2);color:var(--ink);padding:7px 13px;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;display:inline-block} .pbtn.pri{background:var(--accent);color:#fff;border-color:transparent} .pbtn.dng{color:var(--brandred)} .pbtn.mbx{position:relative;padding:7px 10px;display:inline-flex;align-items:center} .pbtn.mbx .mbdot{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--brandred);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1;box-shadow:0 0 0 2px var(--panel)} .wrap{max-width:820px;margin:22px auto;padding:0 14px} .authwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px} .card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin-bottom:18px} .authbox{width:390px;max-width:94vw} .brandbox{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:18px;display:flex;justify-content:center} h1{font-size:21px;margin:0 0 3px}h2{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 12px} .sub{color:var(--muted);font-size:13.5px;margin-bottom:16px} label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;margin:12px 0 5px} input,select{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:10px 12px;font-size:14px;font-family:inherit} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .chk{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--muted);margin-top:12px;cursor:pointer}.chk input{width:16px;height:16px;margin-top:2px} .err{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);border-radius:9px;padding:10px 12px;font-size:13.5px;font-weight:600;margin-bottom:10px} .ok{background:color-mix(in srgb,var(--green) 15%,transparent);color:var(--green);border-radius:9px;padding:10px 12px;font-size:13.5px;font-weight:600;margin-bottom:10px} table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);font-size:13.5px} th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em} .dogtag{display:inline-block;font-size:11px;font-weight:700;padding:1px 8px;border-radius:6px;background:var(--panel2);border:1px solid var(--line);color:var(--muted)} .dogtag.warn{background:color-mix(in srgb,var(--amber) 18%,transparent);color:var(--amber);border-color:transparent} .muted{color:var(--muted)} .ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:60;align-items:center;justify-content:center;padding:16px} .ov .card{width:460px;max-width:95vw;margin:0} @media(max-width:560px){ /* Zakaz zawijania byl bledem: szesc elementow nie miesci sie na 390 px, wiec przegladarka lamala napisy W SRODKU przyciskow ("Organizer / panel", "Log / out") i pasek robil sie trzy razy wyzszy niz mial byc. Teraz przyciski sa krotsze - "Organizer panel" schodzi do samej strzalki, bo obok stoi logo portalu i nikt nie zgadnie tego zle - a pasek zostaje jednolinijkowy naturalnie. */ .pbar{gap:6px;padding:6px 10px;flex-wrap:nowrap} .pbar .lg{padding:3px 6px} .pbar .lg img{height:24px} .pbar .who{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:26vw} .pbtn{padding:6px 9px;font-size:12.5px;white-space:nowrap;flex:none} .pbtn-label{display:none} .wrap{margin:16px auto;padding:0 12px} .card{padding:18px 16px} /* Tabele na koncie zamieniaja sie w kafelki - kazda wartosc z podpisem, jedna pod druga. Przewijanie w bok bylo dotad odpowiedzia na "za szeroko" i konczylo sie tym, ze kolumna Edit z przyciskiem Return leżała poza ekranem i nikt o niej nie wiedzial. */ .stacked, .stacked tbody, .stacked tr, .stacked td{display:block;width:auto} .stacked thead{display:none} .stacked tr{border:1px solid var(--line);border-radius:12px;padding:6px 10px;margin:10px 0} .stacked td{border-bottom:0;padding:6px 0;display:flex;gap:12px;align-items:flex-start; justify-content:space-between;text-align:right;overflow-wrap:break-word} .stacked td+td{border-top:1px dashed var(--line)} .stacked td::before{content:attr(data-label);flex:none;color:var(--muted);font-size:11px;font-weight:700; letter-spacing:.05em;text-transform:uppercase;text-align:left;padding-top:2px} .stacked td:empty{display:none} .stacked td[colspan]{display:block;text-align:left} .stacked td[colspan]::before{content:none} .grid2{grid-template-columns:1fr} h1{font-size:19px} table{font-size:13px}th,td{padding:8px 8px} } /* Team create: height-category picker chips */ .team-cat-chip{cursor:pointer;user-select:none} .team-cat-chip.on{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);border-color:transparent} /* "To pay" — dwie czesci to dwa rozne momenty i miejsca placenia (gotowka na rejestracji, przelew teraz), wiec kazda dostaje wlasna ramke i naglowek. Wczesniej byly to dwa pogrubione wiersze jeden pod drugim i nie bylo wiadomo, gdzie konczy sie jedno, a zaczyna drugie. */ .pay-part{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px;background:var(--panel2)} /* Karty metod siedza WEWNATRZ bloku przelewowego, wiec nie moga miec tego samego tla - inaczej ramka znika i modul znowu wyglada na rozsypany. */ .pay-part .pay-method{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-bottom:9px} .pay-part-head{font-weight:800;font-size:13px;letter-spacing:.01em;margin-bottom:2px} .pay-part-note{font-size:12.5px;margin-bottom:8px} /* Miedzy blokami walut. Nie ozdoba: mowi, ze to alternatywa, a nie dwie naleznosci. */ .pay-or{display:flex;align-items:center;gap:10px;margin:12px 0 6px;color:var(--muted); font-size:11.5px;font-weight:800;letter-spacing:.14em} .pay-or::before,.pay-or::after{content:"";flex:1;height:1px;background:var(--line)} /* Przycisk, ktorego nie da sie jeszcze uzyc, ma tak wygladac. Bez tego "Create team" byl pelnym, czerwonym przyciskiem, ktory po prostu nie reagowal - a to czyta sie jak zepsuty portal. */ .pbtn:disabled,.pbtn[disabled]{opacity:.42;cursor:not-allowed;filter:saturate(.55)} .pbtn:disabled:hover,.pbtn[disabled]:hover{filter:saturate(.55)} /* Naglowki modulow na koncie zawodnika: wysrodkowane i w pelnym kolorze tekstu, zeby bylo widac, gdzie zaczyna sie kolejna sekcja. Rozmiar zostaje - chodzi o czytelnosc, nie o krzyk. Zawezone do konta: h2 jest wspolne dla calego portalu (sklep, druzyny, logowanie). */ body.account-page .card h2, body.account-page .wrap > h2{color:var(--ink);text-align:center} body.account-page .card h2{margin-bottom:14px} /* Naglowek modulu bywa wierszem flex razem z licznikiem albo przyciskiem - wtedy wysrodkowanie tekstu dziala w pudelku szerokim na tekst i nic nie daje. Srodkujemy caly wiersz. !important, bo czesc tych wierszy ma justify-content wpisane w znacznik. */ /* Naglowek modulu stoi sam w swojej linii, a to, co mu towarzyszy - licznik, plakietka, przycisk - schodzi linie nizej. Srodkowanie calego wiersza srodkowalo PARE (nazwa + przycisk), wiec sama nazwa nadal nie stala na srodku karty. */ body.account-page .acct-head{ flex-direction:column;align-items:center;justify-content:center !important; text-align:center;gap:8px; } body.account-page .acct-head h2{width:100%} /* Podmodul wewnatrz modulu (zawody w "My competitions", rywalizacja w platnosciach). Oddziela bez budowania drugiej karty w karcie - to od kart w kartach strona robila sie ciezka. */ .acct-sub{ border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px; background:var(--panel2); } .acct-sub:last-child{margin-bottom:0} /* Kupka psow o tym samym statusie. Kolejnosc kupek to kolejnosc pilnosci, wiec naglowek ma byc czytelny, ale nie glosniejszy od nazwy psa. */ .acct-group{margin:14px 0 2px;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)} .acct-group:first-of-type{margin-top:8px} /* Trening spoleczny wewnatrz eventu: oddzielony linia, nie kolejnym ciemnym prostokatem. To ta sama impreza, wiec ma zostac w tym samym pudelku - osobna karta sugerowalaby osobne zapisy. */ /* Kod QR z podpisem i przyciskiem powiekszenia. Obrazek i przycisk w jednej kolumnie, opis obok. */ /* Wybor kraju: pole wyszukiwania nad ukrytym