:root {
    --border: #d9d9d9;
    --bg-muted: #f5f7ff;
    --text-muted: #666;
    --accent: #2f4f8f;
    --danger: #a10202;
    /* Ka tik apziureta kortele. Violetine tycia: zalia jau reiskia prilinkinta,
       raudona - netinkama formata, melyna - veiksmo mygtukus. Sodri, nes
       pazymeta visada tik viena kortele - blanki tarp keturiasdesimties
       vienodu pavadinimu pasimestu. */
    --viewed: #6d28d9;
    /* Stebimas pardavejas (sirdele). Ne --danger: raudona programoje reiskia
       "cia bloga zinia", o stebejimas yra kaip tik geras dalykas - todel
       siltas raudonas, ne kraujo spalvos. */
    --heart: #c0392b;
}

* { box-sizing: border-box; }

/* Juosta virsuje yra ne virs turinio, o pries ji - todel slinkdamas prie
   kortelės (compare.js, zymes puslapio adrese) puslapis pasilieka jai vietos.
   Antraip pati kortele, prie kurios buvo slenkama, atsistoja po juosta. */
html { scroll-padding-top: 64px; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    line-height: 1.5;
}

/* --- karkasas --- */

.topbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-muted);
    /* Juosta lieka virsuje ir nuslinkus: ID ivedimo laukas yra vienintelis
       kelias prie naujo daikto, o sarase ju yra po penkiasdesimt - be sito
       pirmiausia reikia grizti i puslapio virsu. Fonas tycia netamsintas ir
       nepermatomas: po juosta slenka korteles, ir persisviecianti eilute
       atrodytu kaip brokas.

       Uzuominai po lauku (.paste-hint) reikia atskaitos tasko - sticky ji
       duoda taip pat, kaip anksciau duodavo relative.

       z-index 40: virs saraso uzuominu (30), bet po iskylanciu langu (50) -
       nuotrauku palyginimas turi uzdengti ir juosta. */
    position: sticky;
    top: 0;
    z-index: 40;
}

.brand {
    font-weight: 600;
    text-decoration: none;
    color: inherit;
}

.nav {
    display: flex;
    gap: 14px;
    font-size: 14px;
}

.nav a { color: var(--accent); }

/* Atverta skiltis - juoda ir stora, be pabraukimo: nuoroda i ta vieta, kurioje
   jau stovi, nera nuoroda. Butent tai ir pasako puslapio pavadinima - todel
   antrasciu po juosta nebera, ir sarasas prasideda is karto. */
.nav a.nav-on {
    color: #111;
    font-weight: 700;
    text-decoration: none;
    cursor: default;
}

/* Skiltis, kurios viduje stovim, bet ne pati jos vieta: vieno daikto
   darbastalis, kainu istorija. Storis tas pats - skiltis juk ta - bet
   pabraukimas paliktas, ir butent jis pasako, kad cia dar yra kur spausti:
   sita nuoroda grazina i sarasa. Pabraukimas blankus, kad juostoje nesikirstu
   su paciu uzrasu. */
.nav a.nav-in {
    color: #111;
    font-weight: 700;
    text-decoration-color: var(--border);
}

.spacer { flex: 1; }

.who {
    color: var(--text-muted);
    font-size: 14px;
}

.logout {
    color: var(--accent);
    font-size: 14px;
}

main { padding: 16px; }

.empty { color: var(--text-muted); }

.items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.items li {
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}

/* --- eBay paemimas --- */

/* Laukas stovi virsutineje juostoje, todel matmenys juostos, o ne puslapio:
   auksti mygtukai ja issitemptu, o platus laukas isspaustu prisijungusiojo
   varda. Uz 260px nesispaudzia - trumpiau nei eBay ID nebent langas visai
   siauras, o tada juosta persilauzia i antra eile. */
.lookup {
    display: flex;
    gap: 6px;
    flex: 1 1 260px;
    max-width: 420px;
    min-width: 0;
    margin: 0;
}

.lookup input {
    flex: 1;
    min-width: 0;
    padding: 5px 9px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: 4px;
}

.lookup button {
    padding: 5px 14px;
    font-size: 14px;
    color: #fff;
    background: var(--accent);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

/* Uzuomina pasirodo tik tada, kai yra ka pasakyti (iskarpineje ne tai, ko
   reikia). Tuscia ji nezima nei vietos, nei akies, o pasirodziusi guli ant
   turinio - juostos aukstis nekinta ir puslapis nepasistumia. */
.paste-hint {
    position: absolute;
    top: 100%;
    left: 16px;
    z-index: 20;
    max-width: 420px;
    margin: 4px 0 0;
    padding: 6px 10px;
    font-size: 13px;
    color: var(--danger);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

.paste-hint:empty { display: none; }

/* Kortele - vienas atsakymas viename langelyje. Tarpas apacioje yra jos
   dalis, o ne puslapio reikalas: be jo dvi gretimos kortelės susilieja i
   viena remeli su brūkšniu vidury, ir tas brūkšnys atrodo kaip klaida. Del
   tos pacios priezasties tarpas priklauso ir kiekvienam sekanciam blokui -
   skirtukams, paieskos eilutei, sarasui. */
.card {
    max-width: 1100px;
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.card h2 { margin-top: 0; font-size: 19px; }

/* Skiltis kortelės viduje: ta pati tema, bet atskiras veiksmas (pvz.
   kolekcijos skaitymas Discogs paskyros korteleje). Linija kaireje, o ne
   nauja kortele - kitaip atrodytu, kad tai jau kitas nustatymas. */
.sub-block {
    margin: 16px 0 4px;
    padding-left: 12px;
    border-left: 2px solid var(--border);
}

.sub-block h4 { margin: 0 0 6px; font-size: 14px; }
.card h3 { margin: 20px 0 8px; font-size: 15px; color: var(--text-muted); }

.facts {
    border-collapse: collapse;
    width: 100%;
    max-width: 640px;
}

.facts th,
.facts td {
    padding: 5px 10px 5px 0;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
    font-weight: normal;
}

.facts th {
    width: 190px;
    color: var(--text-muted);
    font-size: 14px;
}

.cond {
    max-width: 640px;
    padding: 10px;
    background: var(--bg-muted);
    border-radius: 4px;
    font-size: 14px;
}


.sub {
    margin-top: -6px;
    color: var(--text-muted);
    font-size: 14px;
}

.actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 14px 0 4px;
}

.actions button {
    padding: 7px 16px;
    font-size: 14px;
    color: #fff;
    background: var(--accent);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

.linked-count { font-size: 14px; }

/* --- darbastalis: skelbimas kaireje, Discogs desineje ---
   Abu stulpeliai reikalingi vienu metu: laukus tikslini ziuredamas i aprasyma
   ir nuotraukas, o pririsi cia pat. Siauresniame lange jie sukrenta vienas po
   kito - skelbimas virsuje, nes nuo jo pradedama. */

.work {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 18px;
    align-items: start;
    max-width: 1900px;
}

@media (max-width: 1250px) {
    .work { grid-template-columns: minmax(0, 1fr); }
}

/* Stulpelyje plotį diktuoja pats stulpelis - senos 1100 px ribos ji tik
   siaurintu ir paliktu tuscia vieta desineje. */
.work .card,
.work .facts,
.work .cond,
.work .search-box,
.work .catno-row,
.work .descr,
.work .cand {
    max-width: none;
}

.panel-busy { opacity: 0.55; }

/* --- Discogs kandidatai --- */

.cand {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    max-width: 1100px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 5px;
    margin-bottom: 8px;
}

/* Filtras paslepe - .cand yra flex, todel be sito [hidden] neveiktu. */
.cand[hidden] { display: none; }

/* --- filtrai virs kandidatu ---
   Statomi is to, ka grazino paieska: rodomos tik tos salys ir bukles, kuriu
   rezultatuose is tikruju yra. */

.facets {
    max-width: 1100px;
    margin-bottom: 10px;
    padding: 8px 12px;
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: 5px;
}

.facet-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 4px 0;
}

.facet-name {
    flex: 0 0 62px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.facet-list {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
    min-width: 0;
}

.facet {
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
}

/* Skaicius salia - kiek kandidatu uz to pasirinkimo. */
.facet-count { color: var(--text-muted); font-size: 12px; }

/* Uz penktojo - tik paspaudus "show more". */
.facet-extra { display: none; }
.facet-row.open .facet-extra { display: inline; }

.facet-more {
    padding: 0;
    font-size: 13px;
    color: var(--accent);
    background: none;
    border: 0;
    text-decoration: underline;
    cursor: pointer;
}

.cand-bad {
    background: #fff8f8;
    border-color: #e9c5c5;
}

/* Prilinkintas kandidatas turi issiskirti is pirmo zvilgsnio - jis lieka
   savo vietoje pagal balus, todel zymima pati kortele, o ne eiles tvarka. */
.cand-linked {
    background: #f2faf3;
    border-color: #9ccba4;
    border-left: 4px solid #2e7d3a;
    padding-left: 7px;
}

/* Kortelės busena laikoma vienoje klaseje: is jos seka, kuri forma matoma ir
   ar rodomas zenkliukas. Todel pazymejimas po Link/Unlink yra vienas klases
   perjungimas, be puslapio perkrovimo. */
.cand .unlink-form,
.cand .badge-linked { display: none; }

.cand-linked .link-form { display: none; }

.cand-linked .unlink-form,
.cand-linked .badge-linked { display: block; }

.cand-linked .badge-linked { display: inline-block; }

.cand-busy { opacity: 0.55; }

/* Priezastis "nera siuose rezultatuose" turi prasme tik kol rysys yra. */
.cand:not(.cand-linked) .link-note { display: none; }

.link-error {
    margin-top: 6px;
    font-size: 12px;
    color: var(--danger);
    text-align: right;
}

.badge-linked {
    padding: 1px 8px;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: #2e7d3a;
    border-radius: 10px;
    vertical-align: 2px;
}

/* Jau apziureta pora: zyma lieka ir perkrovus, todel kitą karta iskart matyti,
   kuriuos leidimus tikrinai. Pati kortele pazymima tik plona juostele - jos
   busena (prilinkinta / netinkamo formato) svarbesne. */
.badge-seen {
    display: none;
    padding: 1px 8px;
    margin-left: 8px;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: 10px;
    vertical-align: 2px;
}

.badge-last {
    display: none;
    padding: 1px 8px;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--viewed);
    border-radius: 10px;
    vertical-align: 2px;
}

/* Anksciau matyti zymimi tik zenkliuku - jokios spalvos. Perziurejus deszimt
   kandidatu is eiles spalva turetu visi, ir ji nebepasakytu nieko. */
.cand-seen .badge-seen { display: inline-block; }

/* Ka tik ziurejai - vienintele violetine kortele sarase. Zymima remeliu, o ne
   fonu: fonas jau uzimtas kortelės busenos (zalia - prilinkinta, raudona -
   netinkamas formatas), ir remelis matomas ant abieju, nieko neuzstodamas. */
.cand-last {
    outline: 3px solid var(--viewed);
    outline-offset: 2px;
    box-shadow: 0 0 0 7px rgba(109, 40, 217, .16);
}

.cand-last .badge-seen { display: none; }
.cand-last .badge-last { display: inline-block; }
.cand-last .cand-cover { box-shadow: 0 0 0 2px var(--viewed); }

/* Kandidato nuotraukos - ta pati perziura kaip skelbimo, tik suspausta i
   kortele: leiblo spalva turi matytis nepaspaudus nieko. */
.cand-cover {
    flex: 0 0 330px;
    --stage-height: 250px;
}

.cand-cover .viewer {
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 6px;
    margin-bottom: 0;
}

.cand-cover .vt img { width: 44px; height: 44px; }

/* Sviesus fonas: kortelėje juodas staciakampis atrodytu kaip skyle sarase. */
.cand-cover .viewer-stage { background-color: var(--bg-muted); }

.cand-cover .viewer-arrow { width: 26px; height: 44px; font-size: 20px; }

/* Nuoroda i failo originala kortelėje netelpa ir nera reikalinga - didinimas
   veikia vietoje, o visos nuotraukos yra "compare photos" lange. */
.cand-cover .viewer-open { display: none; }

/* Kol scenarijus dar nepavertė galerijos perziura (arba jis blokuojamas). */
.cand-cover .gallery { margin-bottom: 0; }
.cand-cover .gallery > .shot > img { height: 250px; }

/* Nuotrauku paemimas kainuoja uzklausa, todel sprendzia naudotojas. Mygtukas
   tylus - jis pasiulymas, o ne raginimas. */
.load-photos {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 4px;
    font-size: 12px;
    color: var(--accent);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 3px;
    cursor: pointer;
}

.load-photos:hover { background: var(--bg-muted); }

/* Atsakyta: daugiau nuotrauku nera, spausti nebeverta. */
.load-done {
    color: var(--text-muted);
    cursor: default;
}

.cand-body { flex: 1; min-width: 0; }

.cand-title { font-weight: 600; margin-bottom: 3px; }

.cand-meta {
    color: var(--text-muted);
    font-size: 13px;
}

/* Stilius kursyvu - taip pat, kaip ji rodo pats Discogs, kad viena eilute
   nesusiplaktu i viena zodziu sriuba: "Rock, Pop · Country Rock". */
.cand-style { font-style: italic; }

.why {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: 12px;
    color: var(--text-muted);
}

.cand-action {
    flex: 0 0 150px;
    text-align: right;
}

.score {
    font-size: 20px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 6px;
}

.cand-action button {
    width: 100%;
    padding: 7px;
    font-size: 14px;
    color: #fff;
    background: var(--accent);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

.cand-action button.danger { background: var(--danger); }

.tick {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 3px;
    cursor: pointer;
}

.tick-warn { color: var(--danger); }

.tag {
    display: inline-block;
    padding: 1px 6px;
    font-size: 11px;
    background: var(--bg-muted);
    border-radius: 3px;
    margin-left: 4px;
}

/* Dublikatu lyderis: i ta irasa sudetos kolekcijos ir wantlist'ai. Auksine,
   nes tai ne busena (kaip zalia ar raudona), o pirmenybe tarp lygiu. */
.tag-top { background: #fff2cc; color: #7a5b00; font-weight: 600; }

.market-count { color: var(--text-muted); }

.tag-done { background: #dff0e0; color: #1c6b2b; }
.tag-warn { background: #fdeaea; color: var(--danger); }

/* Nepabaigtas darbas: daiktas paimtas, bet dar nesusietas. Zyma yra nuoroda i
   darbastali - butent ten tas darbas ir pabaigiamas. */
.tag-todo {
    background: #fdf2e0;
    color: #8a5a00;
    text-decoration: none;
}

.tag-todo:hover { background: #8a5a00; color: #fff; }

/* Aukcionas ir fiksuota kaina turi atsiskirti vienu zvilgsniu - nuo tipo
   priklauso ir tai, kur ves pardavejo nuoroda. */
.tag-auction { background: #e7edfa; color: var(--accent); }
.tag-bin { background: #fdf2e0; color: #8a5a00; }

/* --- koreguojama paieska --- */

.search-box {
    max-width: 1100px;
    padding: 12px 14px;
    margin-bottom: 16px;
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: 5px;
}

.search-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}

.search-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px 12px;
}

.search-grid label {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: var(--text-muted);
}

.search-grid input,
.search-grid select {
    margin-top: 2px;
    padding: 6px 8px;
    font-size: 14px;
    color: #000;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 3px;
}

.search-grid select { height: 33px; }

/* Laisvas tekstas - per visa eile. Jis vienintelis renkamas dalimis, ir
   190 tasku lauke iskart nesimato, kas jame jau yra; visi kiti laukai yra
   vieno zodzio ilgio. */
.search-grid .field-wide { grid-column: 1 / -1; }

/* Kryzelis lauko viduje. Lauko desiniajame krašte, o ne salia jo: laukai
   stovi tankiai, ir atskiras mygtukas pastumtu visa eile. */
.search-grid label { position: relative; }

.field-clear,
.field-open {
    position: absolute;
    right: 5px;
    bottom: 6px;
    width: 20px;
    height: 20px;
    padding: 0;
    font-size: 15px;
    line-height: 1;
    color: var(--text-muted);
    background: #fff;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
}

.field-clear:hover,
.field-clear:focus-visible {
    color: #fff;
    background: var(--danger);
}

/* Rodykle stovi lygiai ten, kur ir kryzelis - matoma visada tik viena is ju:
   tuscias laukas turi ka pasiulyti, uzpildytas - ka isvalyti. Todel salies
   laukas atrodo lygiai kaip Free text, o ne kaip suspaustas dvieju mygtuku.
   Isvalyti yra pavojinga, tad kryzelis raudonas; atverti sarasa nera, tad
   rodykle tik pamelsta. */
.field-open {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Rodykle piesiam krastinemis, o ne raide: trikampio zenklas kiekviename
   srifte yra kitokio dydzio ir kitokiame aukstyje, o cia rodykle turi stoveti
   lygiai ten pat, kur kryzelis. */
.field-open::after {
    content: "";
    border: 4px solid transparent;
    border-top-color: currentColor;
    transform: translateY(2px);
}

.field-open:hover,
.field-open:focus-visible {
    color: #fff;
    background: var(--accent);
}

/* Kad tekstas nepalystu po kryzeliu. */
.search-grid input[type="text"] { padding-right: 26px; }

/* Saliu sarasas po lauku.
   Savas, o ne narsykles <datalist>: to langelio nei plocio, nei vietos, nei
   sriftu pakeisti negalima - jis krisdavo siauresnis uz lauka ir ne pagal ji
   sulygiuotas. Sitas remiasi i abu lauko krastus, todel yra tokio pat plocio
   ir stovi tiesiai po juo.
   z-index 30: virs gretimu lauku ir korteliu, bet po virsutine juosta (40). */
.field-list {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 30;
    max-height: 232px;
    margin-top: 2px;
    overflow-y: auto;
    /* Butinai atskirai: nurodzius tik overflow-y, kita asis tampa "auto" ir
       apacioje issoka nereikalinga horizontali juosta. */
    overflow-x: hidden;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 3px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .14);
}

/* Salies vardas kaireje, kiek ju rasta - desineje. Skaicius yra tas pats, kuri
   rodo filtrai zemiau, ir butent jis pasako, ar verta ta sali rinktis: "US 17"
   ir "Argentina 2" yra du labai skirtingi pasirinkimai. Anksciau matytos salys
   skaiciaus neturi - jos is praeitos paieskos, ir sitie rezultatai apie jas
   nieko nebesako. */
.field-opt {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 6px 9px;
    font-family: inherit;
    font-size: 14px;
    color: #000;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
}

/* Rasant sarasas persijungia - .field-opt yra flex, todel be sito [hidden]
   neveiktu (taip pat, kaip ir kortelėms). */
.field-opt[hidden] { display: none; }

.field-opt:hover,
.field-opt:focus-visible {
    color: #fff;
    background: var(--accent);
    outline: 0;
}

.opt-count {
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Pazymetoje eiluteje pilkas skaicius ant melynos nebesimatytu. */
.field-opt:hover .opt-count,
.field-opt:focus-visible .opt-count { color: #dbe4f7; }

.search-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

/* Antrinis veiksmas prie Search: blankus ir be uzpildo, kad nekonkuruotu su
   pagrindiniu mygtuku - jo ieskoma tik tada, kai laukuose netvarka. */
.clear-all {
    padding: 6px 12px;
    font-size: 13px;
    color: var(--text-muted);
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
}

.clear-all:hover,
.clear-all:focus-visible {
    color: #fff;
    background: var(--danger);
    border-color: var(--danger);
}

/* Tik siuntimo mygtukas: prie jo dabar stovi ir "clear all", o tas turi buti
   blankus - kitaip du vienodi mygtukai konkuruotu tarpusavyje. */
.search-actions button[type="submit"] {
    padding: 7px 20px;
    font-size: 14px;
    color: #fff;
    background: var(--accent);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

.catno-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    max-width: 1100px;
    margin-bottom: 14px;
}

.chip-form { display: inline; }

/* Pasiulymai is pardavejo aprasymo. Ta pati sandara kaip filtruose (vardas
   kaireje, reiksmes desineje), tik cia spaudziama vieno karto reiksme, o ne
   jungiamas filtras. */

.hint {
    max-width: 320px;
    overflow: hidden;
    padding: 3px 10px;
    font-size: 13px;
    color: var(--accent);
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
}

.hint:hover { border-color: var(--accent); }

.hint-on {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}

.memo-form { display: inline; }


.hint-off { color: var(--danger); }

/* Issaugoti maketai nustatymuose. */
.recipe {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.recipe:last-child { border-bottom: 0; }
.recipe .memo-form { margin-top: 4px; }

.chip {
    padding: 4px 12px;
    font-size: 13px;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    color: var(--accent);
    background: #fff;
    border: 1px solid var(--accent);
    border-radius: 12px;
    cursor: pointer;
}

.chip:hover {
    color: #fff;
    background: var(--accent);
}

.chip-on {
    color: #fff;
    background: var(--accent);
    font-weight: 600;
}

.descr {
    max-width: 1100px;
    margin-bottom: 14px;
}

/* Be vidinio slankstuklio: aprasymas ir savybes issitiesia per visa ilgi ir
   puslapis slankstomas vienas. Langelis langelyje reiske, kad ratukas sustoja
   ne ten, kur nori, o teksto galo nesimato tol, kol nepataikai i vidini krasta -
   o butent aprasymo gale guli siuntimo kainos ir pastabos apie ibrezimus. */
.descr p {
    padding: 10px 12px;
    margin: 6px 0 0;
    font-size: 13px;
    /* Pardavejo eilutes - buklė, matrica, siuntimas - islaiko savo vietas. */
    white-space: pre-wrap;
    background: var(--bg-muted);
    border-radius: 4px;
}

.specs-body {
    padding: 4px 12px 10px;
    margin: 6px 0 0;
    background: var(--bg-muted);
    border-radius: 4px;
}

/* Savybiu lentele cia siauresne nei prekes puslapy - salia jos dar telpa akiai
   svarbesnis kandidatu sarasas. */
.specs-body .facts th {
    width: 150px;
    font-size: 13px;
}

.specs-body .facts td {
    font-size: 13px;
}

.photos-link {
    display: block;
    font-size: 12px;
    margin-bottom: 6px;
}

/* --- nuotrauku palyginimas --- */

/* Sarasas be JavaScript. Su juo static/js/viewer.js ji pakeicia perziura. */
.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 6px;
}

.gallery > .shot > img {
    height: 300px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--bg-muted);
    display: block;
}

/* --- nuotrauku perziura (static/js/viewer.js) ---
   Miniatiuros sone, didelis kadras salia - taip, kaip eBay skelbime. Juostos
   ir kadro aukstis vienodas, kad juosta baigtusi ties kadro apacia. */

.viewer {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}

.viewer-single { grid-template-columns: minmax(0, 1fr); }

.viewer-thumbs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: var(--stage-height, 540px);
    overflow-y: auto;
    /* Butinai atskirai: nurodzius tik overflow-y, kita asis tampa "auto" ir
       apacioje issoka nereikalinga horizontali juosta. Miniatiuros i plotį
       telpa visada, todel cia slinkti nera ko. */
    overflow-x: hidden;
    /* Plona, bet matoma: be jos nesimatytu, kad juosta apskritai slenkasi. */
    scrollbar-width: thin;
    scrollbar-color: var(--text-muted) transparent;
}

.vt {
    flex: 0 0 auto;
    padding: 0;
    background: none;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
}

/* Siauresnes uz stulpeli - likusi vieta paliekama slinkties juostai, kad ji
   nespaustu miniatiuru ir neisprovokuotu antros juostos apacioje. */
.vt img {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 2px;
    background: var(--bg-muted);
}

.vt-on { border-color: var(--accent); }

.viewer-stage {
    position: relative;
    height: var(--stage-height, 540px);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Tamsus fonas: siauras vinilo kadras ant balto atrodo kaip klaida, o ant
       tamsaus matyti pati nuotrauka, ne jos kraštai. */
    background: #111 no-repeat;
    border-radius: 4px;
    overflow: hidden;
    cursor: zoom-in;
}

.viewer-main {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Priartinus rodomas fonas - pats paveikslas paslepiamas, kad nesidubliuotu. */
.viewer-stage.zoomed { cursor: zoom-out; }
.viewer-stage.zoomed .viewer-main { visibility: hidden; }

.viewer-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 60px;
    font-size: 26px;
    line-height: 1;
    color: #fff;
    background: rgba(0, 0, 0, .45);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

.viewer-arrow:hover { background: rgba(0, 0, 0, .75); }

.viewer-prev { left: 8px; }
.viewer-next { right: 8px; }

.viewer-count,
.viewer-open {
    position: absolute;
    bottom: 8px;
    padding: 3px 9px;
    font-size: 12px;
    color: #fff;
    background: rgba(0, 0, 0, .5);
    border-radius: 3px;
}

.viewer-count { left: 8px; }
.viewer-open { right: 8px; text-decoration: none; }
.viewer-open:hover { background: rgba(0, 0, 0, .8); }

/* Prekes puslapyje perziura dalinasi stulpeliu su savybemis ir aprasymu, todel
   kadras zemesnis nei palyginimo lange, kur jis vienas. */
.work-left { --stage-height: 400px; }

/* Sava nuotrauka iskylanciame lange (static/js/photos.js): cia perziura yra
   visas lango turinys, todel kadras imamas pagal ekrano auksti, o ne pagal
   fiksuotus taskus. Atimta dalis - lango parasas ir jo virsutine juostele su
   uzdarymo mygtuku; be sito kadro apacia atsidurtu uz ekrano, ir priartinta
   nuotrauka vestu slinkti puslapi vietoj to, kad ja apziuretum. */
.photo-preview { --stage-height: calc(100vh - 210px); }

.photo-preview .cand-meta { margin: 0; }

/* Savo nuotraukos yra pilno dydzio (Discogs atiduoda tik iki 600 px), todel
   siame lange kadrui verta atiduoti daugiau plocio nei palyginimui. `:has`
   nepazistancioje naršyklėje langas tiesiog lieka iprasto plocio - perziura nuo
   to niekur nedingsta. */
.modal-box:has(.photo-preview) { max-width: 1500px; }

@media (max-width: 700px) {
    .viewer { grid-template-columns: minmax(0, 1fr); }
    .viewer-thumbs { flex-direction: row; max-height: none; overflow-x: auto; }
}

/* --- iskylantis langas (static/js/photos.js) ---
   Nuotrauku palyginimas rodomas virs saraso, o ne kitame puslapyje: patikslinta
   paieska ir vieta sarase islieka. Lupa (z-index 100) turi likti virsuje. */

.modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, .55);
    overflow-y: auto;
}

/* Virsuje palikta juostele uzdarymo mygtukui. Be jos jis atsistodavo ant
   pirmos kortelės viršutinio krasto: mygtukas absoliutus, o turinys pradeda
   nuo 18-o tasko - jie tiesiog persidengdavo. */
.modal-box {
    position: relative;
    width: 100%;
    max-width: 1100px;
    padding: 40px 22px 22px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}

/* Kvadratas, o ne raide: uzvedus pele issidega visas kampas, ir taikytis
   pele i viena simboli nebereikia. Lango kampas apvalus, todel ir mygtukas
   apvalintas is tos pacios puses. */
.modal-close {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 22px;
    line-height: 1;
    color: var(--text-muted);
    background: none;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

.modal-close:hover,
.modal-close:focus-visible {
    color: #000;
    background: var(--bg-muted);
}

.modal-body h3 { margin: 16px 0 8px; font-size: 15px; color: var(--text-muted); }

/* --- patvirtinimo langas (static/js/ui.js) ---
   Tas pats iskylantis langas kaip nuotraukoms, tik mazas ir su klausimu:
   anksciau cia buvo naršykles `window.confirm`, kuris atrodo kaip sistemos
   klaida - kitas sriftas, kitos spalvos ir mygtukai "OK/Cancel", nepasakantys,
   kas atsitiks. Vienas langas visoms vietoms: atsiejimui, trynimui,
   atjungimui, idejimui i kolekcija ir rasymui i Discogs. */

/* Viduryje, o ne virsuje: klausimas yra dvi eilutes, ir prilipęs prie lango
   krasto jis atrodytu kaip pranesimu juostele. Nuotrauku langas lieka
   virsuje - jis auksta, ir centruotas isslystu uz ekrano. */
.confirm-modal { align-items: center; }

.confirm-box {
    max-width: 440px;
    padding: 22px;
}

/* Klausimas yra visas langas - todel didesnis uz iprasta teksta, bet ne
   antraste: tai sakinys, kuri reikia perskaityti, o ne pavadinimas. */
.confirm-text {
    margin: 0 0 18px;
    font-size: 15px;
}

/* Mygtukai desineje, patvirtinimas - paskutinis: skaitoma kaireje-desineje, ir
   veiksmas stovi ten, kur zvilgsnis nukrenta perskaitęs klausima. */
.confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.confirm-actions button {
    padding: 8px 18px;
    font-size: 15px;
    border-radius: 4px;
    cursor: pointer;
}

/* "Cancel" - blankus. Du vienodi mygtukai konkuruotu tarpusavyje, o cia
   nesutikimas yra numatytas atsakymas: jis pasiekiamas ir Esc, ir paspaudimu
   salia lango. */
.confirm-no {
    color: var(--text-muted);
    background: #fff;
    border: 1px solid var(--border);
}

.confirm-no:hover,
.confirm-no:focus-visible {
    color: #000;
    background: var(--bg-muted);
}

.confirm-yes {
    color: #fff;
    background: var(--accent);
    border: 0;
}

/* Negriztami veiksmai - raudonai. Ta pati spalva, kaip ir mygtuku, kurie i
   toki langa atveda (`.danger` stebejimo juostoje ir kortelese). */
.confirm-yes.danger { background: var(--danger); }

/* Nuotraukos nuoroda sarase, kol jos dar nepakeite perziura. */
.shot {
    display: inline-block;
}

/* --- issaugotu daiktu sarasas --- */

.tabs {
    display: flex;
    gap: 4px;
    max-width: 1300px;
    margin: 0 0 14px;
    border-bottom: 1px solid var(--border);
}

.tab {
    padding: 6px 14px;
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: none;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    /* Kad pazymetas skirtukas nepastumtu gretimu, ribos vieta lieka visada. */
    margin-bottom: -1px;
}

.tab:hover { background: var(--bg-muted); }

.tab-on {
    color: var(--accent);
    font-weight: 600;
    background: #fff;
    border-color: var(--border);
}

.tab-count { color: var(--text-muted); font-weight: normal; }

/* "Recent" atskirtas tarpu: jis rodo ne ta pati, ka kiti trys - jame yra ir
   nesusietu daiktu, ir rikiuojama ne pagal pabaigos laika. Tarpas pasako, kad
   tai kito pobudzio pjuvis, dar nepaspaudus. */
.tab-apart { margin-left: auto; }

/* Paieska toje pacioje eiluteje kaip skirtukai - desiniajame gale. Sava eilute
   po juosta reikstu dar viena horizontale prie triju jau esanciu (skirtukai,
   formatai, dienos), o sarasas nuo to nusistumtu dar zemiau. */
.tab-search {
    display: flex;
    align-items: center;
    /* Prie pat juostos apacios: skirtukai tempiasi per visa juostos auksti, ir
       be sito laukas issitemptu kartu su jais. */
    align-self: flex-end;
    gap: 6px;
    margin: 0 0 4px 18px;
}

.tab-search input[type="search"] {
    width: 260px;
    padding: 4px 8px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 3px;
}

.tab-search input[type="search"]:focus {
    border-color: var(--accent);
    outline: none;
}

.tab-search button {
    padding: 4px 10px;
    font-size: 13px;
}

/* Siauresniame lange paieska nusileidzia po skirtukais, o ne spaudzia ju i
   kelias eilutes: skirtuku juosta yra pati navigacija, ir ji turi likti
   viena eilute. */
@media (max-width: 1100px) {
    .tabs { flex-wrap: wrap; }
    .tab-search { margin-left: 0; width: 100%; }
    .tab-search input[type="search"] { flex: 1 1 auto; width: auto; }
}

/* Dienu juosta: kada vyksta aukcionai. Tuscios dienos lieka vietoje ir
   pritemdytos - "rytoj nieko" yra atsakymas, o ne dingusi diena. */

.days {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 1300px;
    margin: 0 0 14px;
}

.day {
    padding: 4px 10px;
    font-size: 13px;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 13px;
}

.day:hover { background: var(--bg-muted); }

.day-count { color: var(--text-muted); }

.day-empty { color: var(--text-muted); }

.day-on {
    color: #fff;
    font-weight: 600;
    background: var(--accent);
    border-color: var(--accent);
}

.day-on .day-count { color: #dbe4f5; }

/* Formatu juosta - tokie pat mygtukai kaip dienu, tik viena eile auksciau.
   Svarbu, kad atrodytu vienodai: abu yra to paties saraso pjuviai, ir
   skirtingas apipavidalinimas verstu ju skirtuma ieskoti akimis. */

.fmts { margin-bottom: 10px; }

/* Saraso antraste: kiek rodoma ir po kiek rodyti. Abu dalykai vienoje
   eiluteje - klausimas ir atsakymas viena salia kito. */

.list-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    max-width: 1300px;
}

.per-page {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
}

.per-page select { padding: 2px 4px; font-size: 13px; }

/* Puslapiu juosta saraso gale. */

.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    max-width: 1300px;
    margin: 16px 0 30px;
}

.page-num,
.page-step {
    padding: 4px 10px;
    font-size: 13px;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 4px;
}

.page-num:hover,
.page-step:hover { background: var(--bg-muted); }

.page-on {
    color: #fff;
    font-weight: 600;
    background: var(--accent);
    border-color: var(--accent);
}

.page-on:hover { background: var(--accent); }

/* Krastiniame puslapyje mygtukas lieka vietoje, tik nebeveda niekur - taip
   juosta nesitraukia ir "next" nesoka po pele. */
.page-off {
    color: var(--text-muted);
    background: var(--bg-muted);
    border-color: var(--border);
}

.page-off:hover { background: var(--bg-muted); }

.page-gap { padding: 0 2px; color: var(--text-muted); }

/* Pasibaiges aukcionas nebeaktualus pirkti, bet svarbus kainu istorijai -
   todel pritemdomas, o ne pasleptas. */
.row-ended { background: #fafafa; }
.row-ended .row-cover img { opacity: 0.6; }
.row-ended .row-title a { color: var(--text-muted); }

/* Nupirkta - zalia juostele per visa eilutes kraste.
   Krastas, o ne zyma prie pavadinimo: vartant simta eiluciu akis pagauna
   nepertraukiama vertikale nesustodama skaityti, o pavadinimo eilute lieka
   neuzteršta. Kada ir uz kiek pasako uzrasas uzvedus pele. */
.row-bought { position: relative; }

.bought-stripe {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: #2e9e4b;
    /* Klaustukas, o ne rodykle: juostele nera nuoroda, bet uzvesti verta. */
    cursor: help;
}

/* Platesnis nei kiti puslapiai: eilute nesa septynis stulpelius, ir kiekvienas
   atimtas taskas pavadinima lauzo i dvi eilutes. Riba palikta tam, kad labai
   placiame ekrane akis nekeliautu per visa stala. */
.row-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    max-width: 1580px;
    padding: 10px;
    border-bottom: 1px solid var(--border);
}

.row-cover {
    flex: 0 0 80px;
    height: 80px;
}

.row-cover img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: 3px;
}

.row-main { flex: 1; min-width: 0; }

.row-title { font-weight: 600; margin-bottom: 2px; }

.row-link {
    margin-top: 5px;
    padding-left: 10px;
    border-left: 3px solid var(--bg-muted);
    font-size: 14px;
}

/* Discogs turgus - visas skaicius yra pati nuoroda.
   Apibrezta zyma, o ne pabraukta eilute: tokia pat forma kaip formato zyma
   sone, todel sarase is karto matyti, kad tai paspaudziama, o taikytis galima
   i visa teksta, ne i du zodzius jo pradzioje. Zalia todel, kad butent su siuo
   skaiciumi lyginama eBay kaina - jis turi buti perskaitomas nesustojant prie
   leidimo duomenu. */
.market-tag {
    display: inline-block;
    padding: 0 7px 1px;
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
    text-decoration: none;
    color: #1d6b3a;
    background: #eef6f0;
    border: 1px solid currentColor;
    border-radius: 3px;
    cursor: pointer;
}

.market-tag:hover,
.market-tag:focus-visible {
    color: #fff;
    background: #1d6b3a;
    border-color: #1d6b3a;
}

/* Senstelejes - blankiau ir su amziumi salia. Vienoda spalva su sviezumi
   reikstu, kad menesio senumo kaina yra siandienine. */
.market-tag-old {
    color: var(--text-muted);
    background: var(--bg-muted);
}

.market-tag-old:hover,
.market-tag-old:focus-visible {
    color: #fff;
    background: var(--text-muted);
    border-color: var(--text-muted);
}

/* Plotis pagal "auction" ir "buy now", ne pagal ilgiausia imanoma zyma.
   Ismatuota: is 632 issaugotu daiktu "auction" yra 615, "buy now" 15, o
   "auction + buy now" - du. Plotis pagal tuos du reiske 52 tuscius taskus
   kiekvienoje kitoje eiluteje, ir butent jie ir buvo tas tarpas tarp zymos ir
   kainos. Tie du dabar persilauzia i dvi eilutes - tai pigiau. */
.row-type {
    flex: 0 0 66px;
}

.row-type .tag {
    margin-left: 0;
}

.row-price {
    flex: 0 0 150px;
    text-align: right;
}

.price-now {
    font-size: 17px;
    font-weight: 700;
}

/* Aukciono kelimai. Zodziai blankus kaip visa smulkme kainos stulpelyje, o
   skaiciai - tamsus ir stori: sarase svarbus butent jie, o "bid" ir "bidder"
   yra tik ju paaiskinimas. Skaicius kiek didesnis uz likusia smulkme, kad
   vartant sarasa uztektu perbegti stulpeli akimis.

   Nulis kelimu rodomas ta pacia blankia spalva be jokio pastorinimo: ten
   skaiciaus nera, ir eilute turi bylotis kaip tyla, o ne kaip rezultatas. */
.bid-line {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
}

.bid-line b {
    font-size: 14px;
    font-weight: 700;
    color: #222;
}

.bid-line-quiet { font-style: italic; }

.row-side {
    flex: 0 0 150px;
    text-align: right;
}

/* Pardavejo vardas ir sirdele - viena eile. Flex, o ne inline: 22 tasku
   langelis salia 13 tasku teksto sedetu ant teksto pagrindo linijos ir
   kabetu keliais taskais zemiau vardo. `flex-end` todel, kad visas
   stulpelis lygiuojamas i desine, o flex apie `text-align` nezino. */
.seller-line {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

/* Ilgas slapyvardis nustumtu sirdele uz stulpelio krasto - todel trumpinamas
   vardas, o ne stumiamas zenklas: sirdeles vieta eiluteje turi buti ta pati
   visose eilutese. */
/* Butent vardas, o ne bet kuri nuoroda eiluteje: uzpildyta sirdele taip pat
   yra <a>, o `overflow: hidden` ant jos nukirptu jos pacios uzrasa (jis
   piesiamas uz mygtuko krastu). */
.seller-line > a:not(.heart-btn) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pardavejo stebejimas. Be remelio ir be fono - kitaip nei zenklai kaireje:
   ten jie stovi savo stulpelyje ir yra visos eilutes mygtukai, o cia sirdele
   priklauso vardui, prie kurio stovi, ir remelis ja atskirtu nuo jo.

   Vienodo pavidalo ir mygtukas, ir nuoroda: <button> atsineša savo vidinius
   tarpus ir sistemos fona, todel abu nulinami cia. */
.heart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    padding: 0;
    color: var(--text-muted);
    background: none;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

.heart-btn .ico {
    width: 15px;
    height: 15px;
}

/* Uzvedus pele tuscia sirdele parausta, bet nepasidaro pilna: pilna reiskia
   "jau stebi", ir po pele ji pasakytu netiesa. */
.heart-btn:hover,
.heart-btn:focus-visible {
    color: var(--heart);
}

/* Jau stebimas. Uzpildyta ta pacia spalva, kuria nubreztas kontūras - todel
   uzpildymui nereikia nei atskiros piktogramos, nei antros spalvos. */
.heart-on { color: var(--heart); }
.heart-on .ico { fill: currentColor; }

/* Turgaus veliavele. Ne .ico: tos taisykles nuima uzpildyma ir viska
   nudazo teksto spalva - veliavelei kaip tik reikia priesingo, savu spalvu
   ir be jokio brūkšnio.

   Zieduotas remelis (box-shadow, ne border) todel, kad nesumazintu paties
   piesinio: 16x11 langelyje vieno tasko remelis iš vidaus nukirstu juostos
   krasta, ir Vokietijos veliaveleje geltona liktu plonesne uz raudona.
   Baltos veliaveles (PL, NL) be jo istirptu puslapio fone. */
.flag {
    flex: 0 0 auto;
    width: 16px;
    height: 11px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
    /* Teksto eiluteje (kainu palyginimas, nustatymai) veliavele stovi salia
       zodziu, o ne flex langelyje: be sito ji sedetu ant pagrindo linijos ir
       kabetu per taska zemiau vardo. Flex vaikams tai nedaro nieko. */
    vertical-align: -1px;
}

/* Veliavele ir turgaus vardas vienoje eileje. Kaip ir pardavejo eiluteje,
   flex su `flex-end`: stulpelis lygiuojamas i desine, o flex apie
   `text-align` nezino. */
.mk-line {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

/* Rysiu skaicius. Zenklas ir skaicius vienoje eileje, be remelio: tai
   nuoroda tarp kitu smulkiu uzrasu stulpelyje, o ne mygtukas savo
   stulpelyje - remelis padarytu ji sunkiausiu dalyku desineje pusėje. */
.link-cell {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
    font-size: 13px;
    color: var(--text-muted);
}

.link-cell .ico {
    width: 14px;
    height: 14px;
}

.link-cell:hover,
.link-cell:focus-visible { color: var(--accent); }

details { margin-top: 20px; }
details summary { cursor: pointer; color: var(--text-muted); font-size: 14px; }

details pre {
    max-height: 420px;
    overflow: auto;
    padding: 12px;
    background: #1e1e1e;
    color: #d4d4d4;
    border-radius: 4px;
    font-size: 12px;
}

/* --- prisijungimas --- */

.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--bg-muted);
}

.login-box {
    width: 100%;
    max-width: 320px;
    padding: 28px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.login-box h1 {
    margin: 0 0 20px;
    font-size: 22px;
    text-align: center;
}

.login-box input {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding: 9px 11px;
    font-size: 15px;
    border: 1px solid var(--border);
    border-radius: 4px;
}

.login-box input:focus {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
}

.login-box button {
    width: 100%;
    padding: 10px;
    font-size: 15px;
    color: #fff;
    background: var(--accent);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

.login-box button:hover { background: #24406f; }

.error {
    margin-bottom: 14px;
    padding: 9px 11px;
    font-size: 14px;
    color: var(--danger);
    background: #fdeaea;
    border-radius: 4px;
}

.notice {
    margin-bottom: 14px;
    padding: 9px 11px;
    font-size: 14px;
    background: var(--bg-muted);
    border-radius: 4px;
}

.notice-warn {
    background: #fdf2e0;
    border-left: 4px solid #8a5a00;
}

.ok  { color: #1c6b2b; font-weight: 600; }
.bad { color: var(--danger); font-weight: 600; }

/* --- nustatymai --- */

.tz-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 12px 0 6px;
}

.sort-slot {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--text-muted);
}

/* Rikiavimo sarasas kandidatu virsuje - salia skaiciaus, ne atskira eilute. */
.sort-pick {
    margin-left: 10px;
    font-size: 13px;
    color: var(--text-muted);
}

.sort-pick select {
    padding: 2px 4px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 3px;
}

.tz-form select {
    padding: 7px 8px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: 4px;
}

.tz-form button {
    padding: 7px 16px;
    font-size: 14px;
    color: #fff;
    background: var(--accent);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

.tz-form button[type="button"] {
    color: var(--accent);
    background: #fff;
    border: 1px solid var(--accent);
}

/* Ismetamu zodziu laukas nustatymuose. Per visa plotį ir su savo eilute
   virsuje: sarasas yra tekstas, o ne reiksme, ir salia mygtuko jis atrodytu
   kaip dar vienas trumpas langelis. */
.drop-form { align-items: flex-start; }

.drop-words {
    display: block;
    flex: 1 1 100%;
}

.drop-words textarea {
    display: block;
    width: 100%;
    margin-top: 3px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.45;
    border: 1px solid var(--border);
    border-radius: 4px;
    resize: vertical;
}

.drop-words textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
}

.inline-form { margin-top: 16px; }

.inline-form button {
    padding: 8px 18px;
    font-size: 15px;
    color: #fff;
    background: var(--accent);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

.inline-form button.danger { background: var(--danger); }

/* Nuoroda, atrodanti kaip mygtukas: veiksmas tas pats, tik nieko nekeicia. */
.inline-form .button {
    display: inline-block;
    padding: 8px 18px;
    font-size: 15px;
    color: #fff;
    text-decoration: none;
    background: var(--accent);
    border-radius: 4px;
}

/* --- vieno leidimo kainu istorija --- */

.rel-head { border-bottom: 2px solid var(--border); }

/* Antrastėje virselis yra viena miniatiura, o ne perziura su rodyklemis -
   platus kandidato stulpelis (330 px) cia paliktu tuscia duobe per pusę
   lango. */
.rel-head .cand-cover {
    flex: 0 0 90px;
    height: 90px;
}

.rel-head .cand-cover img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: 3px;
}

/* Suvestine yra puslapio atsakymas, todel ji stambesne uz eilutes zemiau -
   i sarasa leidziamasi tik tada, kai norima pamatyti, is ko tie skaiciai. */
.price-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0;
}

.price-band {
    padding: 10px 16px;
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.price-band-head {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.price-band-nums {
    display: flex;
    gap: 18px;
    font-size: 17px;
    font-weight: 600;
}

.price-band-nums em {
    display: block;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Mediana - tas vienas skaicius, kuriuo remiamasi statant kaina. Kraštines
   reiksmes salia jos lieka blankesnes: jos parodo issibarstyma, o ne kaina. */
.price-mid { color: var(--accent); }

/* --- kainu palyginimas: kas skaiciuojasi i mediana --- */

/* Data, kuri yra ir filtras. Melyna nedazom: eiluciu lange yra dvylika, ir
   dvylika melynu datu atrodytu kaip svarbiausia, kas puslapyje yra, nors
   svarbiausia cia - kaina. Punktyras po tekstu pasako, kad paspaudziama, o
   spalva uzsidega uzvedus pele - taip pat, kaip visi kiti prislopinti
   mygtukai sarase. */
.day-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted var(--text-muted);
}

.day-link:hover,
.day-link:focus-visible {
    color: var(--accent);
    border-bottom-color: var(--accent);
}


/* Parduota. Zalia juostele per visa krasta ir tokia pat zalia kaina: butent
   sios eilutes ir sudaro mediana, ir jas reikia atskirti nesustojant skaityti
   zymu. Fono nedazom - eiluciu lange buna dvylika, ir dvylika spalvotu juostu
   butu ne sarasas, o veliava. */
.row-counts {
    border-left: 3px solid #1c6b2b;
}

.row-counts .price-now { color: #1c6b2b; }

/* Neparduota (arba dingę is eBay). Kaina lieka matoma - ji pasako, ko
   pardavejas prase, - bet blanki ir nestora: tai ne kaina, o prasymas, ir
   lyginant ji sveria tiek pat, kiek tyla. */
.row-nosale .price-now {
    color: var(--text-muted);
    font-weight: 600;
}

/* Skelbimas, is kurio i si puslapi ateita. Be zymes tarp desimties vienodu
   pavadinimu jo tektu ieskoti akimis. */
.row-source {
    background: #fffaf0;
    border-left: 3px solid #e0a800;
}

/* --- formato ir istorijos stulpeliai sarase --- */

/* Piktogramu aprasas - tik saugykla, ne turinys. */
.ico-defs { display: none; }

.ico {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- kada baigiasi --- */

/* Savas stulpelis pries mygtukus. Turinys sucentruotas ir vertikaleje
   sulygintas su mygtuku eile: 30 tasku - mygtuko aukstis, todel dvieju eiluciu
   langelis stovi toje pacioje juostoje kaip palyginimo ir uzraso zenklai, ir
   akis vartydama sarasa nesoka aukstyn zemyn. */
.row-ends {
    flex: 0 0 74px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 30px;
    text-align: center;
}

.ends-cell {
    /* Klaustukas: pats langelis niekur neveda, bet pilna data ir UTC guli
       uzrase uzvedus pele. */
    cursor: help;
    line-height: 1.25;
}

/* Kiek liko - stambiai ir storai. Butent tai skaitoma perbegant stulpeli:
   "2h 20m" pasako, ar dar spesi, o valanda be sito reikalauja skaiciuoti
   pačiam. */
.ends-span {
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

/* Kelinta valanda - blankiai po skaiciumi: reikalinga tik apsisprendus grizti,
   ir stulpelyje neturi konkuruoti su likusiu laiku. */
.ends-at {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Maziau nei valanda - raudonai. Ta pati riba, ties kuria aukcionas nustoja
   buti stebimu ir tampa sprendimu: po jos statymo nebeatidesi. */
.ends-soon .ends-span { color: var(--danger); }
.ends-soon .ends-at { color: var(--danger); opacity: .8; }

/* Pasibaiges - blankus visas langelis. Skaicius ten nereikalingas: kiek laiko
   praejo, pirkimui nekeicia nieko, o eilute ir taip pilkinama. */
.ends-over .ends-span {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

/* Mygtukai greta, o ne vienas po kitu: du 30 tasku mygtukai su tarpu uzima
   64 taskus - maziau, nei atlaisvino tipo stulpelis, todel eilute nuo to net
   praplato. Trecias (kai priristi keli leidimai) persisuka i antra eile. */
.row-photos {
    flex: 0 0 68px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 4px;
}

/* Mygtukas, o ne nuoroda: sarase jis turi buti pastebimas is karto, bet
   prislopintas - spalva uzsidega tik uzvedus pele, kad desimtys eiluciu
   neatrodytu kaip desimtys sviesos signalu. */
.photos-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #fff;
}

.photos-btn:hover,
.photos-btn:focus-visible {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}

/* Uzrasas, kas uz mygtuko. Piktograma viena nepasako, kad be nuotrauku ten
   dar ir savybes su aprasymu, o butent del ju nebereikia atidaryti eBay -
   todel tai pasakoma zodziais.

   Kairen, o ne desnen: desineje stovi formatas, tipas ir kaina, o kaireje -
   platus pavadinimo stulpelis, kuriame uzrasas visada telpa nesiremdamas i
   lango krasta. */
.photos-btn::after,
.photo-pill::after,
.heart-btn::after,
.link-cell::after {
    content: attr(data-tip);
    position: absolute;
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    width: max-content;
    max-width: 300px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    color: #fff;
    background: #222;
    border-radius: 4px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .28);
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease .35s, visibility 0s linear .35s;
}

.photos-btn:hover::after,
.photos-btn:focus-visible::after,
.photo-pill:hover::after,
.photo-pill:focus-visible::after,
.heart-btn:hover::after,
.heart-btn:focus-visible::after,
.link-cell:hover::after,
.link-cell:focus-visible::after {
    opacity: 1;
    visibility: visible;
}

.row-format { flex: 0 0 86px; }

/* Zyma, o ne tiesiog tekstas: sarase ji turi buti pastebima nesustojus
   skaityti, bet neuzgozti pavadinimo - todel siaura ir prislopintu spalvu. */
.fmt-tag {
    display: inline-block;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
    border: 1px solid currentColor;
    border-radius: 3px;
}

/* Spalva pagal seima. Ieskant kaseciu akis uzkliuva uz ju pacios, net
   nepersiskaicius uzraso. */
.fmt-vinyl { color: #3b3b6b; background: #eeeef8; }
.fmt-cassette { color: #7a4a00; background: #fdf3e3; }
.fmt-cd { color: #10606b; background: #e6f4f6; }
.fmt-reel { color: #5a4a2a; background: #f5f0e6; }
.fmt-8track { color: #6b3b5a; background: #f8ecf4; }
.fmt-shellac { color: #4a4a4a; background: #f0f0f0; }

/* --- bukles vertinimas --- */

/* Stulpelis sarase. Plotis pagal ilgiausia turini - langelis su "VG+" ir
   pardavejo zodis skliaustuose greta; siauresniame jie lauztusi, o vertinimas
   ir jo pagrindas turi buti vienoje eiluteje. */
.row-grade { flex: 0 0 148px; }

.grade-form {
    display: flex;
    align-items: flex-start;
    gap: 3px;
}

/* Sarase - vienas po kitu (ploksle, virselis), darbastalyje - viena eilute
   faktu lenteleje, kur vietos i platuma yra. */
.grade-stack { flex-direction: column; }
.grade-inline { flex-direction: row; align-items: center; gap: 16px; flex-wrap: wrap; }

.grade-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    font-size: 12px;
    cursor: pointer;
}

/* Raide vietoj zodzio: "V" ir "S" stulpelyje uzima viena simboli, o ka jie
   reiskia, pasako uzrasas uzvedus pele. Fiksuotas plotis - kad langeliai
   abiejose eilutese butu vienoje vertikaleje. */
.grade-kind {
    flex: 0 0 10px;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 11px;
}

.grade-select {
    flex: 0 0 auto;
    max-width: 58px;
    padding: 1px 2px;
    font-size: 12px;
}

.grade-inline .grade-select { max-width: 190px; }

/* Reiksme, paimta is eBay savybiu ir dar nepatvirtinta. Punktyras, o ne kita
   spalva: eilute sarase pilna zymu, o punktyras pastebimas nesustojant
   skaityti. Be sio skirtumo po menesio nebeatskirtum, kur tavo sprendimas, o
   kur masinos spejimas. */
.grade-guess {
    border: 1px dashed #a08a3c;
    color: #6b5a1e;
    background: #fdfaf0;
}

/* Pardavejo zodis. Rodomas tik tada, kai jis kitas nei kodas: "VG+ (E-)"
   pasako, kuo kodas pagristas, o "VG+ (VG+)" - nieko.

   Netelpantis nukerpamas trim taskais, o ne isspaudzia stulpeli: visas tekstas
   vis tiek matomas uzvedus pele, o kaina, tipas ir kiti stulpeliai turi likti
   vienoje vertikaleje visose eilutese. */
.grade-raw {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 11px;
}

.grade-inline .grade-raw { overflow: visible; }

/* Greitieji mygtukai - abu vertinimai vienu paspaudimu.
   Po langeliais, o ne virs ju: eile skaitoma "ploksle, virselis, abu", ir
   trumpiausias kelias stovi ten, kur akis jau yra. */
.grade-quick {
    display: flex;
    gap: 3px;
    margin-top: 1px;
    padding-left: 14px;
}

/* Tokia pat sagute kaip katalogo numeriu eileje, tik maziau: stulpelyje jos
   trys, ir jos neturi atimti vietos is pardavejo zodzio. */
.grade-chip {
    padding: 0 6px 1px;
    font-size: 11px;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    line-height: 1.5;
    color: var(--accent);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 9px;
    cursor: pointer;
}

.grade-chip:hover,
.grade-chip:focus-visible {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}

/* Uzsidegęs - butent ta reiksme dabar stovi abiejuose langeliuose. Be sios
   zymos po paspaudimo neliktu jokio pedsako, kuris is triju buvo paspaustas. */
.grade-chip-on {
    color: #fff;
    font-weight: 600;
    background: var(--accent);
    border-color: var(--accent);
}

/* Darbastalyje viskas vienoje eiluteje - ten vietos i platuma yra. */
.grade-inline .grade-quick { padding-left: 0; margin-top: 0; }

.grade-busy { opacity: 0.55; }

.grade-note {
    font-size: 11px;
    color: #2e9e4b;
}

.grade-bad { color: var(--danger); }

/* Vertinimas be langeliu - kainu palyginime. Ten jis tik faktas salia kainos:
   uzdedamas sarase ar darbastalyje, o cia keiciamas buti negali, todel ir
   atrodo kaip uzrasas, o ne kaip laukas. */
.row-grade-flat {
    flex: 0 0 104px;
    padding-top: 1px;
}

.grade-view {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    flex-wrap: wrap;
}

.grade-flat {
    padding: 0 4px;
    font-size: 12px;
    font-weight: 600;
    color: #333;
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: 3px;
    white-space: nowrap;
}

/* Brukšnys tarp dvieju - toks pat, kaip pardavejai raso savo skelbimuose
   ("VG+/VG"). Blankus: skiria, bet pats nieko nesako. */
.grade-slash {
    color: var(--text-muted);
    font-size: 12px;
}

/* Neivertintas laukas. Rodomas, o ne praleidziamas: "VG+/—" pasako, kad
   virselis dar neivertintas, o vien "VG+" atrodytu kaip pilnas atsakymas. */
.grade-flat-off {
    color: var(--text-muted);
    font-weight: 400;
}

/* Reiksme, paimta is eBay savybiu ir dar nepatvirtinta - toks pat punktyras
   kaip ir sarase. Patvirtinti ja cia negalima, bet zinoti, kad tai dar
   spejimas, butina: lyginant kainas nepatvirtintas vertinimas sveria maziau. */
.grade-flat-guess {
    border: 1px dashed #a08a3c;
    color: #6b5a1e;
    background: #fdfaf0;
}

/* Pardavejo zodis - kaip ir sarase, blankiau uz koda. Cia jis nekerpamas:
   butent sis zodis ir pasako, kuo kodas pagristas. */
.grade-flat .grade-raw {
    font-weight: 400;
    overflow: visible;
}

/* Centruotas, o ne prie desinio krasto: stulpelyje stovi vienas 30 tasku
   zenklas, ir prispaustas prie krasto jis atrodytu prilipes prie kainos
   stulpelio, o ne priklausantis savo vietai. */
.row-history {
    flex: 0 0 56px;
    text-align: center;
}

/* Zenklas su skaiciumi vietoj didelio skaiciaus ir uzraso "ended". Toks pat
   mygtukas kaip nuotrauku ir kolekcijos zymos toje pacioje eiluteje - visa ta
   seima yra "atidaryk ir pamatysi", ir viena is ju neturi atrodyti kitaip.

   Uzrasas paliekamas numatytoje vietoje - kairen: kaireje plytisi platus
   pavadinimo stulpelis, kuriame jis telpa nesiremdamas i lango krasta. */
.hist-cell {
    margin-top: 2px;
}

/* Kainu istorija kandidato kortelėje. Toks pat mygtukas kaip nuotrauku sarase -
   abu yra "atidaryk ir pamatysi", ir kortelėje jie turi atrodyti kaip viena
   seima. */
.hist-btn {
    margin-top: 4px;
}

/* Uzrasas desinen, o ne kairen kaip sarase: skydelis stovi desiniajame
   stulpelyje, ir i kaire uzrasas uzgultu ant paties skelbimo. */
.hist-btn::after {
    right: auto;
    left: calc(100% + 8px);
}

/* Kiek ju yra - ant paties zenklo, kaip ir kolekcijos kopiju skaicius.
   Melyna, o ne zalia: zalia sioje sistemoje reiskia "turiu", o cia skaicius
   pasako ne turejima, o kiek kartu tas pats leidimas jau buvo pasibaiges. */
.hist-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    color: #fff;
    background: var(--accent);
    border: 1px solid #fff;
    border-radius: 8px;
}

.hist-btn:hover .hist-badge,
.hist-btn:focus-visible .hist-badge {
    color: var(--accent);
    background: #fff;
}

/* Nesekminga Discogs paieska. Rasoma virs kandidatu skaiciaus, nes butent ten
   akis ir zvelgia ieskodama rezultato - o klaidos spalva reikalinga todel, kad
   nulis rezultatu ir "tie patys kandidatai" is sono atrodo vienodai. */
.search-empty {
    margin: 8px 0 0;
    padding: 8px 10px;
    border-left: 3px solid #c98a1b;
    background: #fdf6e6;
    font-size: 13px;
    line-height: 1.45;
}

/* Paaiskinimas po tipo filtru. Rodomas tik tada, kai varnele uzdejom mes -
   naudotojo paties pasirinkimo aiskinti nereikia. */
.facet-note {
    margin: 2px 0 4px 72px;
    font-size: 12px;
    color: var(--text-muted);
}

/* Numestu lauku uzrasas. Rausvas, o ne raudonas: tai ne klaida - paieska
   pavyko, tik ne su tais laukais, kurie buvo suvesti. Raudona spalva
   priverstu sustoti ir skaityti, o cia uztenka pamatyti. */
.search-drop {
    max-width: 1100px;
    margin-bottom: 10px;
    padding: 6px 12px;
    background: #fffdf5;
    border: 1px solid #e8dcc0;
    border-radius: 5px;
}

/* --- pazymeto teksto mygtukai (static/js/pick.js) ---

   Issoka po pazymejimu bet kurioje skelbimo vietoje: pavadinime, savybese,
   aprasyme. Vienas paspaudimas ideda atkarpa i paieskos lauka.

   Absoliutus, o ne fiksuotas: langelis turi likti prie savo teksto, o ne prie
   ekrano - todel padetis skaiciuojama su puslapio slinkimu, o pasislinkus jis
   tiesiog pasislepia. */
.pick-pop {
    position: absolute;
    z-index: 60;
    display: none;
    /* Sesi mygtukai netelptu i siaura langa vienoje eiluteje, o iskrites uz
       krasto mygtukas yra tas pats, kas jo netureti. */
    flex-wrap: wrap;
    max-width: min(92vw, 470px);
    gap: 4px;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .22);
}

.pick-on { display: flex; }

.pick-btn {
    padding: 3px 9px;
    font-size: 12px;
    white-space: nowrap;
    color: var(--accent);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
}

.pick-btn:hover {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}

/* Paspaustas lauko mygtukas. Langelis lieka atviras - be sios zymos neaisku,
   ar tekstas jau nukeliavo i lauka. */
.pick-done {
    color: #fff;
    background: #2e9e4b;
    border-color: #2e9e4b;
}

/* Vienas paspaudimas iki rezultato: ideda i laisva teksta ir paleidzia
   paieska. Todel issiskiria - butent jo ir ieskoma pirmiausia. */
.pick-go {
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}

.pick-go:hover { background: #24406f; }

/* Isvalymas nesudetu laukus - jis juos istrina, todel blankus ir gale, uz
   Search: tas pats zingsnis ir ta pati vieta kaip "clear all" pacioje formoje.
   Priekyje jis stovetu ten, kur pele skrieja i "Free text". */
.pick-wipe {
    color: var(--text-muted);
}

.pick-wipe:hover,
.pick-wipe:focus-visible {
    color: #fff;
    background: var(--danger);
    border-color: var(--danger);
}

/* Kas jau surinkta i laisva teksta.
   Atskira eilute po mygtukais - `flex-basis: 100%` ja ir nulauzia. Renkant
   atkarpas is aprasymo pati forma lieka virsuje, uz ekrano krasto, ir be sios
   eilutes po trecio paspaudimo nebeaisku, kas lauke jau yra.

   Riba yra: ilgas laisvas tekstas nuvarytu langeli per puse ekrano, o slankiklis
   palieka galimybe perskaityti gala - butent tai, kas ideta paskutini karta. */
.pick-seen {
    flex: 0 0 100%;
    max-height: 4.6em;
    overflow-y: auto;
    padding: 4px 5px 2px;
    font-size: 12px;
    line-height: 1.4;
    border-top: 1px solid var(--border);
    overflow-wrap: anywhere;
}

.pick-seen-name {
    margin-right: 6px;
    color: var(--text-muted);
}

.pick-seen-text { color: #000; }

/* Tuscias laukas nenutylimas: paspaudus "clear" butent tuscia eilute ir yra
   atsakymas, kad isvalyta. */
.pick-seen-none {
    color: var(--text-muted);
    font-style: italic;
}

/* Isvalyta. Ne zalia kaip "ideta": veiksmas priesingas, ir zalia zyma cia
   reikstu, kad kazkas nukeliavo i lauka. */
.pick-wiped {
    color: #fff;
    background: var(--danger);
    border-color: var(--danger);
}

/* --- uzrasas apie skelbima (static/js/note.js) ---

   Virs bukles aprasymo ir nuotrauku: butent i ji surenkama tai, kas svarbu is
   visko, kas zemiau, o grizus prie daikto po menesio jis yra vienintelis
   dalykas, kuri skaitai. */
.note-form {
    max-width: 640px;
    margin-bottom: 12px;
}

/* Ankstesne uz kitas antrastes: virs jos - nuotraukos, ir kiekvienas cia
   sutaupytas taskas yra taskas, kuriuo nuotraukos pakyla i ekrana. */
.note-head { margin: 12px 0 4px; }

.note-form textarea {
    display: block;
    width: 100%;
    min-height: 34px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.45;
    color: #000;
    background: #fffdf5;
    border: 1px solid #e8dcc0;
    border-radius: 4px;
    resize: vertical;
}

.note-form textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
}

.note-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.note-save {
    padding: 5px 14px;
    font-size: 13px;
    color: #fff;
    background: var(--accent);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

.note-state {
    font-size: 12px;
    color: #2e9e4b;
}

.note-bad { color: var(--danger); }

/* Zenkliukas sarase - tokio pat pavidalo kaip palyginimo mygtukas (jo bruozai
   aprasyti prie .photos-btn), tik geltonas: du vienodi mygtukai vienoje
   vertikaleje reikstu du vienodus veiksmus, o jie skirtingi.

   Uzrasas rodomas su islaikytomis eilutemis - `pre-line`. Numatytai CSS
   `content` eiluciu lauzimus suspaudzia i tarpus, ir "Cover VG foxing" su
   "Vinyl EX" suliptu i viena eilute. */
.note-btn { color: #8a5a00; }

.note-btn:hover,
.note-btn:focus-visible {
    background: #8a5a00;
    border-color: #8a5a00;
}

.note-btn::after { white-space: pre-line; }

/* Uzrasas dar neparasytas. Blankus tycia: mygtukas yra kiekvienoje eiluteje,
   ir vartant sarasa akis turi pagauti butent tuos, kuriuose kazkas parasyta.
   Uzvedus pele atsistato i pilna spalva - kad butu aisku, kad jis toks pat
   paspaudziamas kaip ir kiti. */
.note-btn-empty {
    color: #c4c4c4;
    border-color: #ececec;
}

.note-btn-empty:hover,
.note-btn-empty:focus-visible {
    color: #fff;
    background: #8a5a00;
    border-color: #8a5a00;
}

/* "Sita leidima jau turiu" - tokios pat formos langelis kaip nuotrauku ir
   uzraso mygtukai (visa vertikale eiluteje yra viena seima), tik zalias ir
   nepaspaudziamas: cia nera ko atidaryti, tai atsakymas, o ne veiksmas.

   Spalva prislopinta, o ne rysku: eiluciu su savo kopija sarase pasitaiko po
   kelias, ir jos turi buti pastebimos vartant, o ne rekti. */
.own-btn {
    color: #2f6f3e;
    border-color: #cfe3d4;
    background: #f4faf5;
    cursor: default;
}

/* Uzvedus pele zyma uzsidega - taip pat kaip mygtukai salia, tik savo spalva.
   Be sito bendra .photos-btn taisykle nudazytu ja melynai, ir eiluteje
   atrodytu, kad tai dar vienas mygtukas, kuri galima paspausti. */
.own-btn:hover {
    color: #fff;
    background: #2f6f3e;
    border-color: #2f6f3e;
}

/* Kiek kopiju. Kampe, o ne salia: 30 tasku langelyje skaicius greta
   piktogramos butu dvigubai smulkesnis uz abu, o kampe jis skaitomas ir
   nesumazina paties rato.

   Rodomas visada, net kai kopija viena: skaicius, atsirandantis tik nuo
   dvieju, verstu prisiminti, ka reiskia jo nebuvimas. */
.own-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    color: #fff;
    background: #2f6f3e;
    border-radius: 7px;
}

/* Uzsidegus zymai skaicius apsiverčia: zalias ant zalio dingtu. */
.own-btn:hover .own-count { color: #2f6f3e; background: #fff; }

/* Uzrase dvi eilutes - kiek kopiju ir kuri tai ploksle. Kaip ir uzraso
   mygtuke, eiluciu lauzimai islaikomi. */
.own-btn::after { white-space: pre-line; }

/* Dar ne kolekcijoje. Pilkas ir paspaudziamas - lygiai kaip neparasytas
   uzrasas (.note-btn-empty) toje pacioje vertikaleje: blanki busena reiskia
   "cia dar nieko nera", o ne "cia nieko negalima".

   Anksciau tokioje eiluteje zenklo nebuvo visai, ir jo nebuvimas nepasakydavo
   nieko - nei "neturiu", nei "kolekcija dar neperskaityta". Nulis pasako
   pirma, ir tas pats mygtukas ideda i kolekcija nepaliekant saraso.

   Uzvedus pele - zalias, o ne melynas kaip kiti mygtukai: uzsidegusi spalva
   yra ta, kuria zenklas turės po paspaudimo. */
.own-btn-empty {
    color: #c4c4c4;
    border-color: #ececec;
    background: #fff;
    cursor: pointer;
}

.own-btn-empty:hover,
.own-btn-empty:focus-visible {
    color: #fff;
    background: #2f6f3e;
    border-color: #2f6f3e;
}

/* Nulis kampe - pilkas, o ne zalias: zalias skaicius ant blankaus zenklo
   atrodytu kaip turima kopija. */
.own-count-zero { background: #c4c4c4; }
.own-btn-empty:hover .own-count-zero { color: #2f6f3e; background: #fff; }

/* Idėtas zenklas lieka mygtuku (jis atėjo su forma), bet paspausti jo nebera
   ko - isimti is kolekcijos cia negalima. Be sitos eilutes bendra
   `button.photos-btn` taisykle laikytu ji paspaudziamu. */
button.own-btn:not(.own-btn-empty) { cursor: default; }

/* Forma yra tik del narsykliu be JavaScript - ji neturi uzimti vietos
   eiluteje. `contents` palieka mygtuka tarp kitu, tarsi formos nebutu. */
.own-form { display: contents; }

/* Kol uzklausa kelyje. Blyskesnis, bet vietoje: mygtukas 30 tasku, ir bet
   kokia sukamoji zyma jame butu didesne uz pati zenkla. */
.own-form-busy .own-btn { opacity: 0.5; }

/* Nepavyko idėti. Raudona vien tam, kad akis grizti prie zenklo ir uzvestu
   pele - priezastis parasyta uzrase, o eiluteje vietos jai nera. */
.own-btn-bad {
    color: #b03030;
    border-color: #f0d6d6;
    background: #fdf6f6;
}

.own-btn-bad:hover,
.own-btn-bad:focus-visible {
    color: #fff;
    background: #b03030;
    border-color: #b03030;
}

/* "Siuncia tik savo salyje" - tokios pat formos langelis kaip visi kiti toje
   vertikaleje, tik raudonas ir nepaspaudziamas: cia nera ko atidaryti, tai
   atsakymas, o ne veiksmas (lygiai kaip zalioji kolekcijos zyma).

   Raudona todel, kad tai vienintele zyma eiluteje, reiskianti "sio nepirksi".
   Prislopinta, o ne rysku: eilute nera klaida, ji tik nereikalinga, ir
   sarasas neturi atrodyti kaip klaidu sarasas. */
.homeship-btn {
    color: #b03030;
    border-color: #f0d6d6;
    background: #fdf6f6;
    cursor: default;
}

/* Uzvedus pele uzsidega savo spalva - be sito bendra .photos-btn taisykle
   nudazytu ja melynai, ir atrodytu, kad tai dar vienas mygtukas. */
.homeship-btn:hover {
    color: #fff;
    background: #b03030;
    border-color: #b03030;
}

/* Kiek kaina pajudejo nuo pirmo stebejimo. Spalva, o ne vien zenklas: sarasas
   vartomas akimis, ir "+4.00" nuo "-4.00" per viena tasko dydzio skirtuma
   nesiskiria. Abu tonai prislopinti - tai kontekstas prie kainos, o ne
   antraste.

   Kryptis nera "gerai" ir "blogai": kylanti kaina reiskia, kad daiktas
   perkamas ir sprendima teks priimti greitai, o krentanti - kad pardavejas
   nusileidzia ir palukureti apsimoka. Todel siltas ir zalias tonai, o ne
   raudonas su zaliu. */
.price-move { white-space: nowrap; }
.price-up { color: #8a5a00; }
.price-down { color: #2f6f3e; }

/* Tas pats zenklas kandidatu korteleje, po atitikimo priezasciu. Uzrasas
   desinen, o ne kairen kaip sarase: skydelis stovi desiniajame stulpelyje, ir
   i kaire jis uzgultu ant paties skelbimo - lygiai del to paties, del ko
   pasuktas ir kainu istorijos uzrasas. */
.cand-own {
    margin-top: 4px;
}

.cand-own::after {
    right: auto;
    left: calc(100% + 8px);
}

/* Uzraso mygtukas pazymejimo langelyje - atskirtas nuo paieskos lauku:
   jis eina visai kitur. */
.pick-apart {
    margin-left: 6px;
    border-left: 2px solid var(--border);
    border-radius: 4px;
}

/* --- Discogs inventorius --- */

/* Stulpeliai tokie patys kaip senajame puslapyje: komentaras, bukles, kaina,
   statusas. Placiausias yra komentaras - butent jis pasako tai, ko nepasako
   nei vertinimas, nei nuotrauka, todel jam ir atiduota vieta. */

/* Skelbimo redagavimas nuotrauku puslapyje. Laukai tinkleliu, o ne vienas po
   kito: kaina, bukle ir svoris yra trumpi, ir vienas stulpelis is ju padarytu
   pusmetrio juosta, kurios apacioje mygtuko net nesimato. */
.listing-form .lf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px 16px;
    align-items: end;
    margin-bottom: 14px;
}

.listing-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--text-muted);
}

.listing-form input[type="text"],
.listing-form select,
.listing-form textarea {
    font: inherit;
    padding: 6px 8px;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 4px;
}

.listing-form textarea {
    width: 100%;
    resize: vertical;
}

/* Kaina su valiuta salia - ji nera ivedama, tik pasakoma. */
.listing-form .lf-price {
    position: relative;
}

.listing-form .lf-price em {
    position: absolute;
    right: 9px;
    bottom: 7px;
    font-style: normal;
    font-size: 12px;
    color: var(--text-muted);
}

.listing-form .lf-price input { padding-right: 42px; }

/* Varnele lygiuojama su kitu lauku ivestimis, ne su ju antrastemis. */
.listing-form .lf-check {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding-bottom: 7px;
}

.listing-form .lf-comments { margin-bottom: 4px; }

.inv-notes {
    flex: 0 1 320px;
    min-width: 0;
    font-size: 13px;
    color: var(--text-muted);
}

/* Nuoroda i nuotrauku puslapi aprasymo gale. Adresas ilgas ir be tarpu, todel
   be `overflow-wrap` jis pastumtu visa stulpeli - butent tokia viena eilute ir
   sulauzo saraso vertikales. Spalva prislopinta: eiluteje ju yra penkiasdesimt,
   ir penkiasdesimt melynu juostu butu triuksmas, o ne nuoroda. */
.inv-notes a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--border);
    overflow-wrap: anywhere;
}

.inv-notes a:hover {
    color: var(--accent);
    text-decoration-color: currentColor;
}

/* Fiksuoto plocio, nors turinys trumpas: sarase kodai turi stovėti vienoje
   vertikaleje - taip "VG+" tarp simto eiluciu pagaunamas nesustojant skaityti. */
.inv-cond {
    flex: 0 0 64px;
    font-size: 13px;
}

/* Skaitmenys vienodo plocio (tabular-nums): kitaip 8 ir 1 stumia kainas i
   skirtingas puses, ir stulpelis nustoja buti stulpeliu. */
.inv-price {
    flex: 0 0 96px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.inv-status {
    flex: 0 0 104px;
    font-size: 13px;
}

/* Nuoroda i pardavimu puslapi po statuso zyme. Smulki ir prislopinta: sarase
   ju penkiasdesimt, o statusas eiluteje turi likti tas, kuris krenta i akis. */
.inv-market {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 1px dotted var(--border);
}

.inv-market:hover { color: var(--accent); border-bottom-color: currentColor; }

/* Iskritusi is inventoriaus eilute pritemdoma, o ne pasleps: "kas is jo
   iskrito" yra atskiras pjuvis, ir jame tokia eilute yra vienintele, ka
   rodyti. Tas pats budas kaip pasibaigusiems aukcionams. */
.row-gone { background: #fafafa; }
.row-gone .row-cover img { opacity: 0.6; }
.row-gone .row-title a { color: var(--text-muted); }

.inv-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 14px 0;
}

.inv-search input[type="search"] {
    min-width: 300px;
    padding: 7px 9px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: 3px;
}

.inv-search input[type="search"]:focus {
    border-color: var(--accent);
    outline: none;
}

/* Skaiciai kortelėje. Skaicius virs uzraso, o ne salia: taip trys skirtingi
   dalykai perskaitomi vienu zvilgsniu, o ne skaitomi kaip sakinys. */
.inv-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin: 10px 0 14px;
}

.inv-stat strong {
    display: block;
    font-size: 21px;
    line-height: 1.2;
}

.inv-stat span {
    font-size: 12px;
    color: var(--text-muted);
}

/* Importo progreso juosta. Rodoma tik tada, kai importas tikrai vyksta -
   tuscia juosta puslapyje butu tik dar vienas nesuprantamas elementas. */

.inv-progress {
    max-width: 620px;
    margin: 14px 0 18px;
}

.inv-bar {
    height: 10px;
    overflow: hidden;
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.inv-bar-fill {
    height: 100%;
    width: 0;
    background: var(--accent);
    /* Perejimas ilgesnis uz apklausos tarpa (1,5 s): taip juosta slysta
       tolygiai, o ne kapotai persoka kas puslapi. */
    transition: width 1.6s linear;
}

/* Kol nezinia, kiek is viso: bruksnys bega per juosta. Nulis procentu tokiu
   momentu atrodytu kaip uzstrigimas, o judejimas pasako "vyksta". */
.inv-bar-idle {
    width: 30% !important;
    animation: inv-slide 1.4s ease-in-out infinite;
}

@keyframes inv-slide {
    0%   { margin-left: 0; }
    50%  { margin-left: 70%; }
    100% { margin-left: 0; }
}

.inv-bar-text {
    margin: 7px 0 2px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

/* Rikiavimo laukas stovi paieskos eiluteje - abu yra to paties saraso
   nustatymai, ir ju vieta viena. */
.inv-search select {
    padding: 6px 4px;
    font-size: 13px;
}

.inv-search label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
}

/* --- pardavimo nuotraukos --- */

/* Nuoroda, kuri keliauja i Discogs aprasyma. Laukas, o ne tekstas: ji reikia
   nukopijuoti visa, o pazymeti tekste ranka yra ta vieta, kur nukerpama puse
   adreso. Paspaudus laukas pazymimas ir nukopijuojamas pats (photos.js). */
.copy-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
}

.copy-field {
    flex: 1 1 320px;
    min-width: 0;
    padding: 8px 9px;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 14px;
    color: var(--accent);
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: 3px;
    cursor: pointer;
}

/* Trumpas zybsnis nukopijavus. Uzrasas "nukopijuota" cia butu triuksmas:
   veiksmas ivyko, ir tai reikia tik patvirtinti, o ne paaiskinti. */
.copy-field.copied {
    color: #1c6b2b;
    background: #dff0e0;
    border-color: #1c6b2b;
}

.upload-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.upload-state {
    font-size: 13px;
    color: var(--text-muted);
}

/* Miniatiuru tinklelis. Fiksuoto plocio langeliai, o ne prisitaikantis
   tinklelis: cia ne perziura, o tvarkymas - svarbu, kad rodykles ir kryzelis
   butu toje pacioje vietoje kiekvienoje eiluteje. */
.photo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 12px 0 24px;
    max-width: 1300px;
}

.photo-cell {
    width: 160px;
}

/* Ranka virs nuotraukos pasako, kad ja galima pertempti - iprastas budas tai
   pasakyti be jokio uzraso. Pati nuotrauka nezymima (user-select), kad vilkimas
   neatsidurtu teksto zymejimo viduryje. */
.photo-cell[draggable="true"] {
    cursor: grab;
    user-select: none;
}

.photo-cell[draggable="true"]:active { cursor: grabbing; }

/* Velkamas langelis pritemdomas, o ne pasleps: taip matai, ka nesi, ir kartu
   matai vieta, iš kurios jis iseina. */
.photo-dragging {
    opacity: 0.4;
}

/* Kol tvarka rasoma i duomenu baze - vos pastebimas prislopinimas. Jokio
   suktuko: irasymas uztrunka desimtis milisekundziu, ir suktukas per ta laika
   tik sumirgetu. */
.photo-grid-busy {
    opacity: 0.7;
}

.photo-cell img {
    display: block;
    width: 160px;
    height: 160px;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--bg-muted);
}

.photo-meta {
    margin-top: 3px;
    font-size: 11px;
    color: var(--text-muted);
}

.photo-actions {
    display: flex;
    gap: 4px;
    margin-top: 3px;
}

.photo-actions form { display: inline; }

.photo-actions button {
    padding: 1px 7px;
    font-size: 13px;
    line-height: 1.4;
}

.photo-actions button[disabled] {
    opacity: 0.35;
    cursor: default;
}

/* Nuotrauku mygtukas saraso eiluteje.

   Stovi tarp pavadinimo ir aprasymo, savo stulpelyje: butent skaitant
   pavadinima ir kyla klausimas "ar sitai jau nufotografuota". Desinysis
   kraštas tam netiktu - ten kaina ir statusas, o jie atsako i kita klausima. */
.inv-photos {
    flex: 0 0 66px;
    padding-top: 1px;
}

/* Zyma po nuotrauku mygtuku: aprasymo nuoroda neveda i sios pozicijos
   nuotraukas. Stulpelis siauras, todel zyma laužoma i savo eilute ir rasoma
   smulkiau - ji yra atsakymas i klausima, kuris kyla ziurint butent i
   nuotrauku skaiciu, ir stovi salia jo. */
.link-bad {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    text-align: center;
    text-decoration: none;
}

.link-bad:hover { text-decoration: underline; }

/* Piktograma ir skaicius viename mygtuke. Prislopintomis spalvomis: sarase ju
   yra penkiasdesimt, ir penkiasdesimt sviesos signalu nebutu nei vienas.
   Zalia vis tiek lieka - taip vartant akis pagauna, kurios eilutes jau
   nufotografuotos, nesustodama skaityti skaiciaus. */
.photo-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 8px 0 6px;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    color: #2b6b3a;
    background: #f3faf4;
    border: 1px solid #cbe3cf;
    border-radius: 5px;
}

/* Nuotrauku dar nera. Ne pilka, o gintarine: tuscia vieta cia yra ne tyla, o
   nepabaigtas darbas - butent sios pozicijos ir yra tos, kurias reikia
   nufotografuoti. */
.photo-pill-empty {
    color: #8a5a00;
    background: #fdf8ef;
    border-color: #f0dfc0;
}

.photo-pill:hover,
.photo-pill:focus-visible {
    color: #fff;
    background: #2b6b3a;
    border-color: #2b6b3a;
}

.photo-pill-empty:hover,
.photo-pill-empty:focus-visible {
    color: #fff;
    background: #8a5a00;
    border-color: #8a5a00;
}

/* Piktograma cia siek tiek mazesne uz iprasta (20 px): salia jos stovi
   skaicius, ir dviese jie turi atrodyti kaip vienas zenklas, o ne kaip du. */
.photo-pill .ico {
    width: 18px;
    height: 18px;
}

.photo-n { line-height: 1; }


/* --- perziuros: kas atsidaro nuotrauku nuorodas ---
 *
 * Puslapis yra keturios lenteles, ir visos atsako i ta pati klausima
 * skirtingais pjuviais. Todel jos vienodos: skaiciai desineje ir vienodo
 * plocio skaitmenimis, laikas ir naršykles - blankus, adresas - monospace.
 * Vienoda lentele leidzia akiai eiti per puslapi neprisitaikant kiekvienoje
 * vietoje is naujo.
 */

/* Kortele po korteles, su tarpu. Kiekviena ju yra atskiras atsakymas, ir be
   tarpo jos atrodytu kaip viena ilga lentele, kurios vidury kazkodel
   pasikeicia stulpeliai. */
/* Skyriaus antraste puslapio viduryje. Puslapyje yra du atsakymai apie ta
   pati pardavima - kiek turim ir kas i tai ziuri - ir be antrastes antrasis
   atrodytu kaip pirmojo tesinys. */
.stats-section {
    margin: 26px 0 6px;
    font-size: 18px;
}

.stats-note {
    max-width: 900px;
    margin: 0 0 12px;
}

/* Suskleistas paaiskinimas: atsako i klausima, uzduodama viena karta, ir
   uzima daugiau vietos nei patys skaiciai. */
.inv-how summary {
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
}

.inv-how p { margin-top: 6px; }

/* Is kur imamas sarasas - viena eilute virs skirtuku. Kortelės cia nebera:
   inventoriuje svarbus sarasas, o ne suvestine. */
.inv-source { margin: 0 0 12px; }

/* Filtras dienomis. Vienuolika zymu i viena eilute siauresniame lange
   netelpa, todel joms leidziama persilauzti - o ne isstumti ilgesnes
   atkarpas uz ekrano krasto. */
.stats-tabs { flex-wrap: wrap; }

/* Sarasas kaireje, skaiciai desineje.
 *
 * Pagrindinis puslapio dalykas yra apsilankymu sarasas: jame yra atsakymas i
 * "kas ka ka tik atsidare". Suvestine ir salys yra fonas - jos pasako, ar tas
 * sarasas siandien ilgas, ar trumpas, todel stovi salia, o ne pries ji.
 */
.stats-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    max-width: 1500px;
}

.stats-main {
    flex: 1 1 640px;
    min-width: 0;         /* kad plati lentele nepleistu skilties */
}

.stats-main .card { max-width: none; }

/* Siaurame lange skiltis atsistoja po sarasu - skaiciai lieka tie patys, tik
   nebe greta. */
.stats-side {
    flex: 0 1 320px;
    min-width: 260px;
}

.stats-side .card { max-width: none; }
.stats-side .inv-stats { gap: 18px; }
.stats-side .inv-stat strong { font-size: 19px; }
.stats-side .day-bars { max-width: none; }

.vtable {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.vtable th {
    padding: 4px 8px 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.vtable td {
    padding: 5px 8px;
    vertical-align: top;
    border-bottom: 1px solid #f0f0f0;
}

.vtable tr:last-child td { border-bottom: 0; }

/* Skaiciai desineje ir vienodo plocio skaitmenimis: stulpelyje juos lyginam
   tarpusavyje, o ne skaitom po viena. */
.vtable .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.vtable .dim {
    color: var(--text-muted);
    white-space: nowrap;
}

.vtable .mono {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    white-space: nowrap;
}

/* Prisistatymas yra ilgas ir beveik visada nesvarbus - eilute uz ji nesiplecia.
   Visas tekstas lieka uzvedus pele. */
.vtable .ua {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Salies kodas. Zyma, o ne tekstas: sarase jis kartojasi, ir vienodo plocio
   langelis leidzia ji perbegti akimis nesustojant skaityti pavadinimo. */
.cc {
    display: inline-block;
    min-width: 26px;
    margin-right: 4px;
    padding: 1px 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    text-align: center;
    background: #e7edfa;
    border-radius: 3px;
}

.row-form { display: inline; }

/* Paskutinio apsilankymo laikas stovi tarp skaiciu, todel jis mazesnis:
   dvidesimt vieno tasko data butu placiausias dalykas eiluteje. */
.stat-small { font-size: 14px !important; }

/* Dienu stulpeliai. Skaicius pasako, kiek, o stulpeliai - kada: viena diena
   su dvidesimt perziuru ir dvi savaites tylos yra visai kitas atsakymas nei
   tolygus srautas, nors suma ta pati. */
.day-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    max-width: 620px;
    margin: 4px 0 2px;
}

.day-bar {
    flex: 1 1 10px;
    max-width: 30px;
}

.day-bar-box {
    display: flex;
    align-items: flex-end;
    height: 56px;
}

.day-bar-fill {
    width: 100%;
    /* Viena perziura turi buti matoma: nulio auksčio stulpelis atrodytu kaip
       tuscia diena, o tai kitas atsakymas. */
    min-height: 2px;
    background: var(--accent);
    border-radius: 2px 2px 0 0;
}

/* Diena be nei vieno apsilankymo: bruksnys apacioje. Praleista ji reikstu,
   kad tos dienos nebuvo, o tyla yra atsakymas. */
.day-bar-none { background: var(--border); }

/* Nepaisomu adresu forma. Laukai platesni uz numatytus: adresas su
   zvaigzdute turi tilpti visas - nukirstas jis atrodo kaip kitas adresas. */
.ignore-form input[type="text"] {
    padding: 7px 8px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: 4px;
}

.ignore-form label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
}

.ignore-wipe { cursor: pointer; }

.ignore-list { max-width: 620px; margin-top: 10px; }

/* --- stebejimai --- */

/* Skaiciukas juostoje. Rodomas tik tada, kai jis ne nulis: juostoje nuolat
   kabantis "0" po dvieju dienu nustotu buti pastebimas, o kartu su juo
   nustotu buti pastebimas ir tikras skaicius. */
.nav-count {
    display: inline-block;
    min-width: 18px;
    margin-left: 5px;
    padding: 0 5px;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    color: #fff;
    background: var(--danger);
    border-radius: 9px;
}

/* --- fone vykstancio patikrinimo eiga ---
 *
 * Mygtukas nebelaukia, kol patikrinimas baigsis, todel juosta yra vienintelis
 * atsakymas i "ar paspaudimas ka nors padare". Ji stovi is karto po mygtuku -
 * ten, kur klausimas ir buvo uzduotas. Ta pati juosta pasibaigus rodo ir
 * suvestine, todel po ja telpa dar viena eilute smulkaus teksto. */

.watch-progress {
    max-width: 620px;
    margin: 0 0 16px;
}

.watch-progress-bar {
    height: 10px;
    overflow: hidden;
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.watch-progress-fill {
    height: 100%;
    width: 0;
    background: var(--accent);
    /* Perejimas ilgesnis uz apklausos tarpa (2 s): taip juosta slysta
       tolygiai, o ne kapotai persoka kas uzklausa. */
    transition: width 2.1s linear;
}

/* Kol nepatikrintas ne vienas, dalies dar nera: bruksnys bega per juosta.
   Nulis procentu tokiu momentu atrodytu kaip uzstrigimas. */
.watch-progress-idle {
    width: 30% !important;
    animation: watch-slide 1.4s ease-in-out infinite;
}

@keyframes watch-slide {
    0%   { margin-left: 0; }
    50%  { margin-left: 70%; }
    100% { margin-left: 0; }
}

.watch-progress-text {
    margin: 7px 0 2px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.watch-progress-note {
    margin: 2px 0 0;
}

/* --- stebejimu lentele ---
 *
 * Kortelės cia nepasiteisino: stebejimu daug, o klausimas kiekvienam tas pats,
 * ir trys eilutes teksto vienam pardavejui reiskia, kad ekrane matai keturis.
 * Lentele ta pati informacija sudeda i vertikales - kategorija po kategorija,
 * turgus po turgumi - ir dvidesimt pardavejų perbegami akimis nesustojant.
 */
.watch-table {
    max-width: 1240px;
    margin-bottom: 24px;
}

/* Viduryje, o ne virsuje: eilute vienaeile, ir zymos su piktogramomis turi
   stoveti vienoje linijoje su pavadinimu. */
.watch-table td { vertical-align: middle; }

.watch-table tbody tr:hover { background: var(--bg-muted); }

/* Pristabdytas stebejimas lieka sarase ir lieka skaitomas - tik pritemdytas.
   Pasleptas jis butu tas pats, kas istrintas, o pauze yra kaip tik tam, kad
   nereiketu trinti. */
.watch-off { opacity: 0.5; }

/* Skaicius - stambiausias dalykas eiluteje ir pirmas is kaires. Fiksuotas
   plotis, kad skaitmenys stovetu vienoje vertikaleje ir 1 nuo 12 skirtusi
   vieta, o ne skaitymu. */
.watch-new {
    width: 46px;
    padding-right: 12px;
}

.watch-new a {
    font-size: 19px;
    font-weight: 700;
    color: var(--danger);
    text-decoration: none;
}

/* Nulis - blankus ir plonas. "Tikrinta, nieko nauja" yra atsakymas, bet ne
   naujiena, ir jis neturi atrodyti kaip naujiena. */
.watch-count-zero {
    font-weight: 400 !important;
    color: var(--text-muted) !important;
}

/* Pardavejo vardas. Platesnis uz kitus stulpelius, nes tik jis vienas gali
   buti bet kokio ilgio; ilgesnis nukerpamas trimis taskais, o visas
   pavadinimas lieka uzvedus pele. */
.watch-who {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
}

.watch-who a { color: inherit; text-decoration: none; }
.watch-who a:hover { text-decoration: underline; }

/* Raktazodziai salia pavadinimo - plonu ir blankiu, kad butu aisku: vardas
   yra vardas, o tai - klausimas, kuris uzduodamas eBay. */
.watch-kw {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
}

/* Salis, kainos rezis, neigiami zodziai. Vienas stulpelis trims dalykams,
   kurie pasitaiko retai - bet kai yra, butent jie paaiskina, kodel kazko
   sarase nera. */
.watch-extra {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
}

/* Veiksmai desineje: patikrinti ir atidaryti eBay. Dvi piktogramos vietoj
   dvieju uzrasų - eilute nuo to tampa perskaitoma, o ka jos daro, pasako
   uzrasas uzvedus pele (.photos-btn data-tip). */
.watch-acts {
    width: 76px;
    white-space: nowrap;
    text-align: right;
}

.watch-acts-head { width: 76px; }

.watch-acts .photos-btn {
    width: 28px;
    height: 28px;
    vertical-align: middle;
}

/* Tarpas tarp dvieju mygtuku. Forma yra inline, todel tarpas dedamas jai:
   tarp </form> ir <a> HTML tarpas yra vos keturi taskai, ir mygtukai
   atrodo suglaudinti i viena. */
.watch-acts .row-form { margin-right: 5px; }

.watch-acts .photos-btn .ico { width: 17px; height: 17px; }

/* Mygtukas su piktograma turi atrodyti taip pat, kaip nuoroda su piktograma:
   .photos-btn buvo aprasytas <a> elementui, o <button> atsineša savo vidinius
   tarpus ir zymekli. */
button.photos-btn {
    padding: 0;
    cursor: pointer;
}

/* --- vieno stebejimo puslapis --- */

.watch-bar {
    display: flex;
    gap: 10px;
    align-items: center;
    max-width: 1580px;
    margin-bottom: 10px;
}

.watch-bar .danger { background: var(--danger); color: #fff; border: 0; }

.watch-ebay { font-size: 14px; }

.watch-form { max-width: 900px; }

.watch-paste,
.watch-name {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--text-muted);
}

.watch-paste input,
.watch-name input {
    display: block;
    width: 100%;
    padding: 7px 9px;
    font-size: 14px;
    color: #222;
    border: 1px solid var(--border);
    border-radius: 3px;
}

.watch-or {
    margin: 14px 0 8px;
    text-align: center;
}

/* Naujas radinys - melyna juostele kaireje. Ta pati mintis, kaip nupirktos
   eilutes zalia juostele sarase: vartant akis pagauna vertikale, o pavadinimo
   eilute lieka svari. */
.watch-hit-new { border-left: 3px solid var(--accent); }

.watch-id {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 12px;
}

/* Du mygtukai virs saraso: patikrinti viska ir prideti.
   Piktogramos, o ne uzrasai: jie stovi kiekvieno apsilankymo kelyje, o ka
   daro, pasako uzrasas uzvedus pele (.photos-btn data-tip). */
.watch-top {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}

.watch-review {
    margin-left: 6px;
    font-size: 14px;
    font-weight: 600;
}

/* Ka tik issaugota eilute. Zyma trumpalaike ir blanki: ji atsako i klausima
   "kur nukrito tai, ka ka tik taisiau", ir tam uztenka, kad akis ja rastu
   viena karta - nuolatinis paryskinimas po minutes jau butu triuksmas. */
.watch-just {
    background: #fffbe6;
    box-shadow: inset 3px 0 0 #d0a000;
}

.watch-table tbody tr.watch-just:hover { background: #fff6d0; }

/* Nustatymu langas. Platesnis uz nuotrauku palyginima nera - laukai sudeti
   i tinkleli, ir jiems uztenka to paties plocio. */
.modal-body .watch-form { max-width: none; }

.modal-body .watch-form-card { margin-bottom: 0; }

/* Pauze, naikinimas ir nuoroda i radinius - po forma, atskirti bruksniu:
   jie nera nustatymai, o "Delete" po pele vietoj "Save" butu brangi klaida. */
.watch-modal-more {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.watch-modal-more .spacer { flex: 1; }

/* Uzrasas prie piktogramos - i apacia, ne i sona.
 *
 * .photos-btn uzrasa deda i kaire (right: 100% + 8px): sarase mygtukai stovi
 * desiniajame krate, ir ten tai teisinga. Stebejimu puslapyje tie patys
 * mygtukai yra ir kairiajame virsutiniame kampe - ten kairen einantis uzrasas
 * islenda uz lango krasto ir nesimato visai. Todel cia jis leidziasi zemyn, o
 * lygiuojamas i ta puse, kurioje mygtukas stovi: virsuje kaireje - kairen,
 * eiluteje desineje - desinen. Abiem atvejais lieka ekrane.
 */
.watch-top .photos-btn::after {
    right: auto;
    left: 0;
    top: calc(100% + 6px);
    transform: none;
}

.watch-acts .photos-btn::after {
    right: 0;
    left: auto;
    top: calc(100% + 6px);
    transform: none;
}

/* Varnele zalia: ji vienintele is triju eilutes mygtuku kazka uzbaigia. */
.watch-acts .watch-done:hover,
.watch-acts .watch-done:focus-visible {
    background: #1d6b3a;
    border-color: #1d6b3a;
}

/* --- nauji radiniai po stebejimo eilute ---
 *
 * Sub-lentele, o ne atskiras puslapis: klausimas "kas naujo" uzduodamas
 * atidarant si puslapi, ir atsakymas turi buti po ta pacia eilute, kuri ji
 * uzdave. Eilutes be nauju lieka vienaeiles, todel sarasas neissipučia.
 */
.watch-sub > td {
    padding: 0 8px 10px 0;
    border-bottom: 1px solid var(--border);
}

.watch-subtable {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: #fbfcff;
    border-left: 3px solid var(--accent);
}

.watch-subtable td {
    padding: 4px 8px;
    vertical-align: middle;
    border-bottom: 1px solid #eef0f6;
}

.watch-subtable tr:last-child td { border-bottom: 0; }

.watch-sub-cover { width: 46px; }

.watch-sub-cover img {
    display: block;
    width: 38px;
    height: 38px;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: 3px;
}

/* Pavadinimas pasiima visa likusi ploti, o per ilgas nukerpamas: sub-lentele
   negali issitempti placiau uz pati sarasa. */
.watch-sub-title {
    max-width: 0;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.watch-sub-who { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }

.watch-sub-price { white-space: nowrap; font-weight: 600; }

.watch-sub-act { width: 62px; text-align: right; }

/* Kada sarasas paskutini karta atnaujintas. Zalia siame puslapyje daugiau
   niekur nenaudojama, todel butent ji ir reiskia "padaryta" - o pati juosta
   pasibaigus dingsta: pilna juosta nieko nebepasako, o vieta virs saraso yra
   verciausia puslapyje. */
.watch-progress-when {
    color: #1d6b3a;
    font-weight: 600;
    white-space: nowrap;
}

/* Uzrakintas mygtukas: matomas, bet aiskiai nepaspaudziamas. Paslepti ji
   butu blogiau - juosta tada sokinetu, o dingęs mygtukas neatsako, kodel jo
   nebera. Sviesa uzvedus pele nebeuzsidega: butent ji ir reiskia
   "paspaudziama". */
.photos-btn:disabled {
    color: #b9b9b9;
    background: #f6f6f6;
    border-color: #e6e6e6;
    cursor: default;
}

.photos-btn:disabled:hover,
.photos-btn:disabled:focus-visible {
    color: #b9b9b9;
    background: #f6f6f6;
    border-color: #e6e6e6;
}


/* --- parduotuves statistika: piltuvas ---
 *
 * Penki zingsniai vienas po kito, kiekvienas su juosta. Juosta cia nera
 * puosmena: penki skaiciai stulpelyje reikalauja lyginti juos galvoje, o
 * penkios juostos viena po kita parodo tarpa tarp dvieju gretimu is karto - o
 * butent tas tarpas ir yra visas atsakymas.
 */
.funnel {
    margin: 10px 0 12px;
    padding: 0;
    list-style: none;
}

.funnel-step {
    display: grid;
    /* Uzrasas, juosta, skaicius, procentas. Juosta - vienintele, kuri tempiasi:
       likusieji stulpeliai turi likti vienoje linijoje visose eilutese, kitaip
       akiai tenka ju ieskoti kiekvienoje is naujo. */
    grid-template-columns: 190px 1fr 46px 150px;
    align-items: center;
    gap: 10px;
    padding: 3px 0;
}

.funnel-label { font-size: 14px; }

.funnel-bar {
    height: 14px;
    background: #f0f2f6;
    border-radius: 3px;
    overflow: hidden;
}

.funnel-fill {
    display: block;
    height: 100%;
    /* Nulinis zingsnis vis tiek matomas plonu bruksniu: tuscia vieta atrodytu
       kaip neatsakyta, o nulis yra atsakymas. */
    min-width: 2px;
    background: var(--accent);
    border-radius: 3px;
}

.funnel-num {
    font-size: 15px;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.funnel-share {
    font-size: 12px;
    color: var(--text-muted);
}

.funnel-card { max-width: 1500px; }

/* Siaurame lange juosta netenka prasmes anksciau uz skaicius - ji ir
   pasitraukia pirma. */
@media (max-width: 720px) {
    .funnel-step { grid-template-columns: 1fr 46px; }
    .funnel-bar, .funnel-share { display: none; }
}

/* Paaiskinimas po prisijungimo forma: kur pateko ir ko cia nera. */
.login-note {
    margin: 14px 0 0;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}