:root {
  --tlo: #faf7f4; --karta: #fff; --tekst: #2a2124; --szary: #7b6f72; --linia: #e7dfdc;
  --akcent: #7a1f35; --akcent-jasny: #f3e3e7;
  --czerwone: #8e2a3c; --biale: #e9dc9a; --rozowe: #e9a7b5; --szampan: #d8c27a; --x: #c9bfc1;
  --wolny: #f1ece9;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tlo: #1b1517; --karta: #261e21; --tekst: #efe7e9; --szary: #a3979a; --linia: #3a2f33;
    --akcent: #d2667f; --akcent-jasny: #3b2229; --wolny: #2c2427;
  }
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--tlo); color: var(--tekst); }
a { color: var(--akcent); }
main { max-width: 1100px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.5rem; margin: .3em 0; } h1 small { font-size: .8rem; color: var(--szary); font-weight: normal; }
h2 { font-size: 1.15rem; margin-top: 1.6em; }
input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea { padding: 8px 10px; border: 1px solid var(--linia); border-radius: 8px; background: var(--karta); min-width: 0; }
button, .przycisk { display: inline-block; padding: 8px 14px; border: 0; border-radius: 8px; background: var(--akcent); color: #fff; cursor: pointer; text-decoration: none; }
.przycisk.drugi { background: var(--akcent-jasny); color: var(--akcent); }
button.link { background: none; color: var(--szary); padding: 4px 6px; }
.szary, small { color: var(--szary); }

.gora { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--akcent); color: #fff; flex-wrap: wrap; }
.gora a { color: #fff; text-decoration: none; }
.gora .logo { font-weight: 700; margin-right: auto; }
.gora nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.gora nav a { padding: 4px 10px; border-radius: 6px; } .gora nav a.akt { background: rgba(255,255,255,.2); }
.gora .plus { font-weight: 700; } .gora button.link { color: #f2d8de; }
.gora form { margin: 0; }

.karta { background: var(--karta); border: 1px solid var(--linia); border-radius: 12px; padding: 16px; }
.logowanie { max-width: 360px; margin: 10vh auto; display: grid; gap: 12px; }
.logowanie label { display: grid; gap: 4px; }
.blad { color: #c0392b; }

.filtry { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; align-items: center; }
.filtry input[type=search] { flex: 1 1 260px; }
.chk { font-size: .9rem; color: var(--szary); display: flex; gap: 4px; align-items: center; }
.podsumowanie { color: var(--szary); margin: 4px 0 8px; }

.wina { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.wina li > a, .wina .wstaw { display: flex; align-items: center; gap: 12px; padding: 8px 10px; background: var(--karta); border: 1px solid var(--linia); border-radius: 10px; text-decoration: none; color: inherit; }
.wina li.wypite { opacity: .55; }
.wina img, .brak-zdj { width: 44px; height: 60px; object-fit: cover; border-radius: 6px; flex: none; }
.brak-zdj { display: block; opacity: .55; }
.opis { flex: 1; min-width: 0; } .opis small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rocznik { color: var(--szary); font-weight: 600; }
.ile { font-size: 1.3rem; font-weight: 700; text-align: right; } .ile small { display: block; font-size: .7rem; font-weight: normal; }
.wstaw input[type=number] { width: 70px; } .wstaw input[name=cena] { width: 80px; }
.pusto { padding: 20px; color: var(--szary); }

.kolor-Czerwone { background: var(--czerwone); } .kolor-Białe { background: var(--biale); }
.kolor-Różowe { background: var(--rozowe); } .kolor-szampan { background: var(--szampan); } .kolor-x { background: var(--x); }

.wino { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 24px; }
.wino .zdjecie img { width: 100%; border-radius: 12px; display: block; }
.brak-zdj.duze { width: 100%; height: 360px; display: grid; place-items: center; color: #fff; font-size: .9rem; }
.upload { margin-top: 8px; }
.ile-duze { font-size: 1.2rem; font-weight: 600; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; } dt { color: var(--szary); } dd { margin: 0; }
.notatka { white-space: pre-wrap; background: var(--karta); padding: 10px; border-radius: 8px; }
@media (max-width: 640px) { .wino { grid-template-columns: 1fr; } .brak-zdj.duze { height: 160px; } }

.pozycje { border-collapse: collapse; width: 100%; } .pozycje td { padding: 8px 4px; border-bottom: 1px solid var(--linia); vertical-align: middle; }
.licznik { white-space: nowrap; text-align: center; } .licznik form { display: inline; }
.licznik b { display: inline-block; min-width: 2.2em; font-size: 1.2rem; }
.licznik button { width: 40px; height: 40px; padding: 0; font-size: 1.3rem; } .licznik .minus { background: #555; }
.przenies summary { cursor: pointer; color: var(--szary); font-size: .9rem; }
.przenies form { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.ruchy { color: var(--szary); font-size: .9rem; padding-left: 18px; }

.edycja { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.edycja label { display: grid; gap: 4px; font-size: .9rem; color: var(--szary); }
.edycja label > * { color: var(--tekst); }
.edycja .szer { grid-column: 1 / -1; }

.regaly { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.regaly a { display: grid; gap: 4px; padding: 12px; background: var(--karta); border: 1px solid var(--linia); border-radius: 10px; text-decoration: none; color: inherit; }
.pasek { height: 6px; background: var(--wolny); border-radius: 3px; overflow: hidden; } .pasek i { display: block; height: 100%; background: var(--akcent); }
.regaly-nav { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 6px; }
.regaly-nav a { padding: 4px 10px; border-radius: 6px; background: var(--karta); border: 1px solid var(--linia); text-decoration: none; white-space: nowrap; font-size: .9rem; }
.regaly-nav a.akt { background: var(--akcent); color: #fff; }

.regal { display: grid; gap: 6px; }
.polka { display: flex; gap: 6px; align-items: stretch; }
.polka .nr { flex: none; width: 26px; display: grid; place-items: center; font-weight: 700; color: var(--szary); background: var(--karta); border-radius: 6px; border: 1px solid var(--linia); }
.sloty { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 3px; flex: 1; min-width: 0; }
.slot { display: flex; flex-direction: column; min-height: 54px; padding: 3px 5px; border-radius: 5px; font-size: .72rem; line-height: 1.2; text-decoration: none; color: #fff; overflow: hidden; }
.slot.wolny { background: var(--wolny); color: var(--szary); }
.slot.kolor-Białe, .slot.kolor-szampan, .slot.kolor-Różowe, .slot.kolor-x { color: #2a2124; }
.slot .poz { opacity: .7; font-size: .65rem; } .slot .n { font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.slot:target { outline: 3px solid var(--akcent); outline-offset: 1px; }

.historia { border-collapse: collapse; width: 100%; font-size: .9rem; } .historia td, .historia th { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--linia); }
@media (max-width: 640px) { .historia td:nth-child(2), .historia th:nth-child(2) { display: none; } }