* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body {
  background:#1a1a1a; color:#f4f4f4;
  font-family:-apple-system,sans-serif;
  display:flex; flex-direction:column; align-items:center; height:100dvh; height:100vh; overflow:hidden;
}
header {
  width:100%; background:#3a3a3a; padding:12px 16px;
  display:flex; align-items:center; gap:10px; flex-shrink:0;
  overflow:hidden; box-sizing:border-box;
}
header svg { width:26px; height:26px; flex-shrink:0; }
header h1 { font-size:16px; font-weight:700; letter-spacing:.5px; margin:0; }
#header-logo { flex:1; }
#header-logo:active { opacity:0.6; }
#ver-lbl { font-size:8px; color:#9c9c9c; font-family:monospace; opacity:0.85; flex-shrink:1; text-align:right; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
#mode-bar {
  width:100%; background:#2c2c2c; display:flex;
  border-bottom:1px solid #3a3a3a; flex-shrink:0;
}
.mode-btn {
  flex:1; padding:10px 4px; border:none; cursor:pointer;
  font-size:12px; font-weight:600; transition:background .15s;
  background:#2c2c2c; color:#7f7f7f; line-height:1.2;
}
.mode-btn.active { background:#3a3a3a; color:#fff; }
#app-lang-btn {
  padding:10px 12px; border:none; cursor:pointer; font-size:11px; font-weight:700;
  background:#212121; color:#979797; letter-spacing:1px; flex-shrink:0;
}
#app-lang-btn:active { background:#3a3a3a; }

/* ── Archive panel ── */
#archive-panel { display:none; width:100%; max-width:480px; flex-direction:column; flex:1; overflow:hidden; }
#archive-panel.visible { display:flex; }
#archive-header { background:#2c2c2c; padding:8px 12px 0; display:flex; flex-direction:column; gap:6px; flex-shrink:0; border-bottom:1px solid #3a3a3a; }
#arch-header-row1 { display:flex; gap:8px; align-items:center; }
#arch-filter-row { display:flex; gap:4px; padding-bottom:8px; overflow-x:auto; }
.arch-wp-link { color:#9c9c9c; font-size:16px; text-decoration:none; flex-shrink:0; font-weight:bold; padding:4px 8px; }
.arch-filter-btn { padding:4px 10px; background:#1a1a1a; border:1px solid #3a3a3a; border-radius:14px; color:#676767; font-size:11px; cursor:pointer; white-space:nowrap; flex-shrink:0; }
.arch-filter-btn.active { background:#3a3a3a; color:#e6e6e6; border-color:#9c9c9c; }
#arch-search-wrap { flex:1; position:relative; display:flex; min-width:0; }
#archive-search { flex:1; background:#1a1a1a; border:1px solid #3a3a3a; color:#f4f4f4; border-radius:6px; padding:7px 32px 7px 10px; font-size:13px; min-width:0; }
#archive-search::placeholder { color:#565656; }
/* Slėpti native iOS Safari clear button — naudosim mūsų X (matomas visur) */
#archive-search::-webkit-search-cancel-button { -webkit-appearance:none; appearance:none; }
#arch-search-clear { position:absolute; top:50%; right:6px; transform:translateY(-50%); background:transparent; border:none; color:#7a7a7a; font-size:20px; line-height:1; cursor:pointer; padding:2px 8px; border-radius:4px; display:none; font-weight:300; }
#arch-search-wrap.has-value #arch-search-clear { display:block; }
#arch-search-clear:hover, #arch-search-clear:active { color:#ff8080; background:#2a1a1a; }
#sync-btn { background:#3a3a3a; color:#bcbcbc; border:none; border-radius:6px; padding:7px 10px; font-size:12px; cursor:pointer; white-space:nowrap; flex-shrink:0; }
#sync-btn:active { background:#9c9c9c; color:#fff; }
#enrich-all-btn { background:#3a3a3a; color:#9c9c9c; border:none; border-radius:6px; padding:7px 10px; font-size:14px; cursor:pointer; flex-shrink:0; }
#enrich-all-btn:active { background:#9c9c9c; color:#fff; }
#sync-status { padding:6px 14px; font-size:12px; flex-shrink:0; display:none; border-bottom:1px solid #3a3a3a; }
#archive-list-view { display:flex; flex-direction:column; flex:1; overflow:hidden; }
#archive-items { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.arch-item { padding:11px 16px; border-bottom:1px solid #202020; cursor:pointer; }
.arch-item:active { background:#2c2c2c; }
.arch-name { font-size:13px; color:#e6e6e6; line-height:1.3; }
.arch-meta { font-size:11px; color:#676767; margin-top:2px; }
.arch-missing { color:#f0a030; font-style:italic; }
#archive-detail-view { display:none; flex-direction:column; flex:1; overflow:hidden; }
#arch-detail-hdr { background:#3a3a3a; padding:10px 14px; display:flex; align-items:center; gap:10px; flex-shrink:0; }
#arch-back-btn { background:#2c2c2c; border:1px solid #565656; color:#bcbcbc; border-radius:6px; padding:5px 10px; font-size:12px; cursor:pointer; white-space:nowrap; }
#arch-detail-title { flex:1; font-size:13px; color:#f4f4f4; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#arch-detail-title a { color:#5dc87a; text-decoration:none; }
#arch-detail-title a:hover { text-decoration:underline; }
#arch-dup-btn { background:#2a2a2a; color:#bcbcbc; border:1px solid #565656; border-radius:6px; padding:5px 9px; font-size:12px; cursor:pointer; flex-shrink:0; }
#arch-wp-pull-btn2 { background:#2c2c2c; color:#5aaa7a; border:1px solid #2a6a4e; border-radius:6px; padding:5px 9px; font-size:12px; cursor:pointer; flex-shrink:0; }
#arch-del-btn { background:#3d1a1a; color:#f07070; border:1px solid #7d2020; border-radius:6px; padding:5px 9px; font-size:12px; cursor:pointer; flex-shrink:0; }
#arch-detail-body { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:12px 16px; }
#arch-detail-txt { font-family:ui-monospace,Menlo,monospace; font-size:11px; line-height:1.55; color:#cfcfcf; white-space:pre-wrap; word-break:break-word; }
#arch-edit-area { display:none; flex:1; width:100%; background:#1a1a1a; border:none; color:#f4f4f4; font-family:ui-monospace,Menlo,monospace; font-size:11px; padding:12px 16px; resize:none; -webkit-overflow-scrolling:touch; }
#arch-edit-row { display:none; gap:8px; padding:10px 14px; background:#1a1a1a; border-top:1px solid #3a3a3a; flex-shrink:0; }
#arch-edit-save { flex:2; background:#3a3a3a; color:#fff; border:none; border-radius:8px; padding:11px 8px; font-size:14px; font-weight:700; cursor:pointer; }
#arch-edit-cancel { flex:1; background:#2c2c2c; color:#7f7f7f; border:1px solid #3b3b3b; border-radius:8px; padding:11px 8px; font-size:13px; cursor:pointer; }
#arch-enrich-btn { flex:1; background:#0f1e10; color:#9c9c9c; border:1px solid #3a3a3a; border-radius:8px; padding:11px 8px; font-size:13px; cursor:pointer; }
#arch-action-row { display:flex; gap:6px; padding:10px 14px; background:#1a1a1a; border-top:1px solid #3a3a3a; flex-shrink:0; }
#arch-edit-btn      { flex:1; background:#2c2c2c; color:#bcbcbc; border:1px solid #565656; border-radius:8px; padding:11px 8px; font-size:13px; cursor:pointer; }
#arch-link-wp-btn   { flex:1; background:#1d1d1d; color:#999999; border:1px solid #2f2f2f; border-radius:8px; padding:11px 6px; font-size:12px; cursor:pointer; transition:opacity .2s; }
#arch-link-wp-btn:active { background:#2f2f2f; }
#arch-draft-btn     { flex:1; background:#2a1010; color:#d47070; border:1px solid #4a2020; border-radius:8px; padding:11px 6px; font-size:12px; cursor:pointer; transition:opacity .2s; }
#arch-upload-btn    { flex:1; background:#1a2a10; color:#8bc34a; border:1px solid #3a5a20; border-radius:8px; padding:11px 6px; font-size:12px; cursor:pointer; transition:opacity .2s; }
#arch-published-btn { flex:1; background:#103020; color:#4dd890; border:1px solid #205a30; border-radius:8px; padding:11px 6px; font-size:12px; cursor:pointer; transition:opacity .2s; }
#arch-draft-btn:active    { background:#4a1010; }
#arch-upload-btn:active   { background:#2a4a10; }
#arch-published-btn:active { background:#105a30; }
#arch-draft-btn.tag-inactive, #arch-upload-btn.tag-inactive, #arch-published-btn.tag-inactive { opacity:0.45; filter:grayscale(0.3); }
/* ── Shipping panel ── */
.shipping-panel { display:none; position:relative; flex-direction:column; flex:1; overflow:hidden; width:100%; max-width:480px; }
.shipping-panel.visible { display:flex; }
#ship-addr-section { display:flex; gap:0; border-bottom:1px solid #3a3a3a; flex-shrink:0; }
.ship-addr-card { flex:1; padding:10px 12px; border-right:1px solid #3a3a3a; min-width:0; }
.ship-addr-card:last-child { border-right:none; }
.ship-addr-label { font-size:10px; color:#676767; text-transform:uppercase; letter-spacing:.5px; margin-bottom:5px; }
.ship-addr-name  { font-size:13px; color:#e6e6e6; font-weight:600; }
.ship-addr-line  { font-size:11px; color:#676767; margin-top:1px; }
.ship-inp { display:block; width:100%; box-sizing:border-box; margin-top:4px; background:#1a1a1a; border:1px solid #3a3a3a; border-radius:5px; color:#f4f4f4; font-size:11px; padding:5px 8px; }
.ship-inp::placeholder { color:#565656; }
#ship-prod-hdr { display:flex; align-items:center; gap:8px; padding:8px 12px; background:#1a1a1a; border-bottom:1px solid #3a3a3a; flex-shrink:0; }
.ship-section-lbl { font-size:11px; color:#676767; text-transform:uppercase; letter-spacing:.5px; flex:1; }
.ship-bc-inp { flex:1; max-width:130px; background:#141414; border:1px solid #3a3a3a; border-radius:6px; color:#f4f4f4; font-size:13px; padding:6px 8px; }
#ship-scan-btn, #ship-list-btn { background:#3a3a3a; color:#bcbcbc; border:none; border-radius:6px; padding:7px 11px; font-size:14px; cursor:pointer; flex-shrink:0; }
#ship-products { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.ship-row { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid #202020; }
.ship-row-name { flex:1; font-size:12px; color:#e6e6e6; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ship-row-meta { font-size:10px; color:#676767; margin-top:2px; }
.ship-row-qty  { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.ship-qty-val  { width:30px; text-align:center; background:#141414; border:1px solid #3a3a3a; border-radius:4px; color:#f4f4f4; font-size:13px; padding:3px 2px; }
.ship-qty-btn  { width:24px; height:24px; background:#2c2c2c; border:1px solid #3a3a3a; border-radius:4px; color:#bcbcbc; font-size:15px; cursor:pointer; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
.ship-row-rm   { color:#5a3030; font-size:13px; cursor:pointer; padding:2px 6px; margin-left:8px; float:right; }
#ship-bottom-bar { display:flex; align-items:center; gap:8px; padding:10px 14px; background:#1a1a1a; border-top:1px solid #3a3a3a; flex-shrink:0; }
#ship-clear-btn { padding:9px 14px; background:#2a1010; color:#d47070; border:1px solid #4a2020; border-radius:8px; font-size:12px; cursor:pointer; }
#ship-gen-btn   { flex:1; padding:11px; background:#3a3a3a; color:#fff; border:none; border-radius:8px; font-size:14px; font-weight:700; cursor:pointer; }
.ship-pick-item { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid #202020; cursor:pointer; }
.ship-pick-item input[type=checkbox] { width:18px; height:18px; accent-color:#9c9c9c; flex-shrink:0; }
/* Company lookup row */
.ship-company-row { display:flex; gap:4px; margin-bottom:5px; align-items:center; }
.ship-code-inp { flex:3; min-width:0; font-size:11px; padding:4px 6px; }
.ship-lookup-btn { background:#484848; border:none; color:#e6e6e6; border-radius:5px; padding:5px 8px; font-size:13px; cursor:pointer; flex-shrink:0; }
.ship-cached-sel { flex:1; max-width:72px; background:#1a1a1a; border:1px solid #3a3a3a; color:#676767; border-radius:5px; padding:3px 2px; font-size:11px; cursor:pointer; }
.ship-addr-logo { font-size:20px; margin-bottom:3px; line-height:1; }
.ship-addr-logo img { width:32px; height:32px; object-fit:contain; display:block; }
.ship-inp-sm { font-size:11px; padding:3px 6px; margin-top:2px; display:block; width:100%; box-sizing:border-box; background:#141414; border:1px solid #3a3a3a; border-radius:5px; color:#e6e6e6; }
/* Totals */
#ship-totals { flex-shrink:0; border-top:1px solid #3a3a3a; background:#121212; }
.ship-totals-box { padding:8px 14px; }
.ship-tot-row { display:flex; justify-content:space-between; font-size:11px; color:#898989; padding:2px 0; }
.ship-tot-final { font-size:12px; color:#e6e6e6; font-weight:700; border-top:1px solid #3a3a3a; margin-top:4px; padding-top:5px; }
/* Ship column toggles & price inputs */
#ship-col-bar { display:flex; align-items:center; gap:4px; padding:5px 12px 6px; border-bottom:1px solid #3a3a3a; flex-shrink:0; flex-wrap:wrap; }
.ship-col-lbl { font-size:10px; color:#676767; margin-right:2px; }
.ship-col-btn { background:#1a1a1a; border:1px solid #3a3a3a; color:#676767; border-radius:5px; padding:4px 9px; font-size:11px; cursor:pointer; }
.ship-col-btn.active { background:#3a3a3a; border-color:#9c9c9c; color:#e6e6e6; }
.ship-price-row { display:flex; gap:6px; margin-top:4px; flex-wrap:wrap; }
.ship-price-row label { display:flex; align-items:center; gap:3px; font-size:10px; color:#676767; }
.ship-price-inp { width:58px; background:#141414; border:1px solid #3a3a3a; border-radius:4px; color:#e6e6e6; font-size:11px; padding:3px 5px; }
.ship-ptot { font-size:10px; color:#979797; white-space:nowrap; }
/* Ship archive overlay */
#ship-arch-overlay { position:absolute; inset:0; background:#0e0e0e; z-index:200; flex-direction:column; }
.ship-arch-item { padding:10px 14px; border-bottom:1px solid #202020; cursor:pointer; }
.ship-arch-item:active { background:#1a1a1a; }
/* Category chips */
.cat-chip { display:inline-flex; align-items:center; gap:4px; padding:3px 8px 3px 10px;
  background:#383838; border-radius:12px; font-size:11px; color:#b7b7b7; }
.cat-chip button { background:none; border:none; color:#b7b7b7; cursor:pointer; font-size:12px;
  padding:0 2px; line-height:1; }
/* Cat tree */
.cat-node { padding:7px 2px; border-bottom:1px solid #111; display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; }
.cat-node:active { background:#1c1c1c; }
.cat-node input[type=checkbox] { width:18px; height:18px; accent-color:#9c9c9c; flex-shrink:0; }
.cat-node-name { flex:1; color:#e0e0e0; }
.cat-node-parent { font-size:10px; color:#595959; margin-left:4px; }
/* Flash feedback: žalia banga ~500ms kai kategorija pažymėta/nuimta */
.cat-node.cat-flash { animation: catFlash 500ms ease-out; }
@keyframes catFlash {
  0%   { background:#1b5e20; }
  50%  { background:#2a7a2a; }
  100% { background:transparent; }
}
#arch-sort { background:#3a3a3a; color:#e3e3e3; border:1px solid #595959; border-radius:6px; padding:6px 6px; font-size:11px; flex-shrink:0; }
/* Edit form fields */
#arch-edit-form { display:none; overflow-x:hidden; max-width:100%; }
.ef-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; max-width:100%; }
.ef-row.ef-col { flex-direction:column; align-items:flex-start; }
.ef-lbl { font-size:10px; color:#898989; min-width:70px; max-width:80px; flex-shrink:0; }
@media (min-width:500px) { .ef-lbl { min-width:110px; max-width:none; } }
.ef-inp { flex:1; background:#1a1a1a; border:1px solid #3a3a3a; border-radius:6px; color:#f4f4f4; padding:8px 10px; font-size:16px; width:100%; box-sizing:border-box; -webkit-appearance:none; }
.ef-inp:focus { outline:none; border-color:#737373; }
.ef-ta { background:#1a1a1a; border:1px solid #3a3a3a; border-radius:6px; color:#f4f4f4; padding:8px 10px; font-size:16px; width:100%; box-sizing:border-box; resize:none; line-height:1.5; }
.ef-ta:focus { outline:none; border-color:#737373; }
/* Clear (X) button — vienas paspaudimas išvalo lauką */
.ef-inp-wrap { position:relative; flex:1; display:flex; align-items:stretch; min-width:0; }
.ef-row.ef-col .ef-inp-wrap { width:100%; }
.ef-inp-wrap > .ef-inp, .ef-inp-wrap > .ef-ta { padding-right:34px; }
.ef-clear { position:absolute; top:50%; right:6px; transform:translateY(-50%); background:transparent; border:none; color:#7a7a7a; font-size:20px; line-height:1; cursor:pointer; padding:2px 8px; border-radius:4px; display:none; font-weight:300; }
.ef-row.ef-col .ef-clear { top:8px; transform:none; }
.ef-inp-wrap.has-value .ef-clear { display:block; }
.ef-clear:hover, .ef-clear:active { color:#ff8080; background:#2a1a1a; }
/* Suggestion view */
#arch-suggest-view { display:none; }
/* Version badge */

/* ── Scanner view ── */
#scanner-view { width:100%; max-width:480px; flex-shrink:0; }
#viewfinder { position:relative; background:#000; width:100%; }
#video { width:100%; display:block; max-height:52vh; object-fit:cover; }
#overlay {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; pointer-events:none;
}
#frame {
  width:62%; aspect-ratio:1.8;
  border:2px solid #9c9c9c; border-radius:8px;
  box-shadow:0 0 0 9999px rgba(0,0,0,.5);
}
#scan-status {
  padding:11px 16px; font-size:14px; font-weight:600; min-height:44px;
  line-height:1.4; border-top:1px solid #3a3a3a;
  display:flex; align-items:center; gap:8px;
  transition: color .2s, background .2s;
}
#scan-status.ok   { color:#4caf6f; background:rgba(76,175,111,.08); }
#scan-status.err  { color:#f07070; background:rgba(240,112,112,.08); }
#scan-status.busy { color:#9c9c9c; background:rgba(148,148,148,.08); }
#progress-bar {
  height:3px; background:#3a3a3a; width:100%; overflow:hidden;
}
#progress-fill {
  height:100%; background:#9c9c9c; width:0%;
  transition:width .4s ease; border-radius:2px;
}

/* ── Result card ── */
#result-panel {
  display:none; width:100%; max-width:480px;
  flex-direction:column; flex:1;
}
#result-panel.visible { display:flex; }
#result-header {
  background:#3a3a3a; padding:10px 16px;
  display:flex; justify-content:space-between; align-items:center;
}
#result-title { font-size:14px; font-weight:600; }
#result-sub { font-size:11px; color:#bcbcbc; margin-top:2px; }
#back-btn {
  background:#2c2c2c; border:1px solid #565656; color:#bcbcbc;
  border-radius:6px; padding:6px 12px; font-size:12px; cursor:pointer;
  white-space:nowrap; flex-shrink:0;
}
#back-btn:active { background:#9c9c9c; color:#fff; }
#result-body {
  flex:1; overflow-y:auto; padding:12px 16px;
  -webkit-overflow-scrolling:touch;
}
#arch-gallery-strip { background:#141414; border-radius:6px; margin:4px 12px; padding:6px 8px; }
.arch-gal-label { font-size:11px; color:#5a8a6a; margin-bottom:4px; }
.arch-gal-thumbs { display:flex; gap:4px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
.arch-gal-thumb { width:56px; height:56px; object-fit:cover; border-radius:4px; border:1px solid #3a3a3a; cursor:pointer; flex-shrink:0; }
.arch-gal-thumb:active { border-color:#9c9c9c; }
.arch-gal-local { border-color:#3a7a4a; box-shadow:0 0 3px rgba(60,130,70,0.4); }

/* ── Photo Manager (pm-screen) ── */
#pm-screen { display:none; position:fixed; inset:0; z-index:9800; background:#0d0d0d; flex-direction:column; overflow-y:auto; -webkit-overflow-scrolling:touch; }
#pm-screen.open { display:flex; }
.pm-hdr { display:flex; align-items:center; padding:10px 16px; border-bottom:1px solid #3a3a3a; flex-shrink:0; }
.pm-hdr button { background:none; border:none; color:#979797; font-size:14px; cursor:pointer; padding:4px 8px; }
.pm-hdr span { flex:1; text-align:center; color:#cccccc; font-size:14px; font-weight:600; }
/* Stabilus mažesnio dydžio preview'as — anksčiau (iki 2026-05-07) būdavo
   dynamic toggle (40vh ↔ 14vh) priklausomai nuo scroll'o + slot click'o.
   Vartotojas skundėsi: „tampymasis blaško". Didelis preview reikalingas TIK
   per Photo Editor (crop/adjust) — tai atskiras overlay (`#photo-editor-overlay`).
   PM viewer'is dabar visada compact (~22vh) — kompromisas tarp matomumo ir
   galerijos erdvės. */
.pm-view-window { width:100%; min-height:22vh; max-height:22vh; display:flex; align-items:center; justify-content:center; background:#141414; position:relative; overflow:hidden; flex-shrink:0; }
.pm-view-window img { max-width:100%; max-height:22vh; object-fit:contain; }
.pm-view-window .pm-empty { color:#5b5b5b; font-size:14px; padding:40px; }
#pm-loading-overlay { position:fixed; inset:0; z-index:99999; background:#0a0e08; display:flex; align-items:center; justify-content:center; flex-direction:column; transition:opacity .25s; }
#pm-loading-overlay.hidden { opacity:0; pointer-events:none; visibility:hidden; }
#pm-loading-overlay .crt-wrap { text-align:center; font-family:ui-monospace,'Courier New',monospace; position:relative; }
#pm-loading-overlay .crt-wrap::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0px,rgba(0,0,0,0) 1px,rgba(0,0,0,0.15) 1px,rgba(0,0,0,0.15) 2px); pointer-events:none; z-index:1; }
#pm-loading-overlay svg { width:50px; height:40px; opacity:0.6; margin-bottom:12px; filter:drop-shadow(0 0 6px rgba(80,200,120,0.4)); }
#pm-loading-overlay svg path { fill:#50c878; }
#pm-loading-overlay .crt-text { color:#50c878; font-size:13px; letter-spacing:2px; text-shadow:0 0 8px rgba(80,200,120,0.6); }
#pm-loading-overlay .crt-cursor { display:inline-block; width:8px; height:14px; background:#50c878; margin-left:2px; vertical-align:middle; animation:crt-blink .6s step-end infinite; }
@keyframes crt-blink { 0%,100%{opacity:1} 50%{opacity:0} }
.pm-action-bar { display:flex; gap:8px; padding:8px 16px; justify-content:center; flex-shrink:0; }
.pm-action-bar button { background:#2a2a2a; border:1px solid #565656; color:#bcbcbc; border-radius:8px; padding:8px 16px; font-size:16px; cursor:pointer; }
.pm-action-bar button:active { background:#4a4a4a; }
.pm-slots-bar { display:flex; gap:6px; padding:8px 12px; overflow-x:auto; -webkit-overflow-scrolling:touch; flex-shrink:0; border-top:1px solid #111; border-bottom:1px solid #111; background:#141414; }
.pm-slot { width:60px; height:60px; border-radius:6px; border:2px solid #565656; overflow:hidden; flex-shrink:0; position:relative; cursor:pointer; background:#181818; display:flex; align-items:center; justify-content:center; }
.pm-slot img { width:100%; height:100%; object-fit:cover; }
.pm-slot:active { transform:scale(0.92); transition:transform 0.05s; }
.pm-slot.cover { border-color:#ff9800; }
.pm-slot.cover::after { content:'★'; position:absolute; top:1px; left:3px; color:#ff9800; font-size:10px; text-shadow:0 0 3px #000; }
.pm-slot.active { border-color:#9c9c9c; box-shadow:0 0 10px rgba(148,148,148,0.7),inset 0 0 6px rgba(148,148,148,0.3); }
.pm-slot.empty { border-style:dashed; border-color:#5b5b5b; }
.pm-slot.empty::after { content:'+'; color:#5b5b5b; font-size:22px; }
.pm-slot.drag-over { border-color:#ff9800; background:rgba(255,152,0,0.2); box-shadow:0 0 14px rgba(255,152,0,0.6); animation:pm-pulse .8s infinite alternate; }
@keyframes pm-pulse { from{box-shadow:0 0 8px rgba(255,152,0,0.4)} to{box-shadow:0 0 18px rgba(255,152,0,0.8)} }
.pm-slot .pm-slot-num { position:absolute; bottom:1px; right:3px; color:rgba(255,255,255,0.5); font-size:9px; }
.pm-grid-wrap { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:8px; min-height:120px; }
.pm-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.pm-grid-item { aspect-ratio:1; position:relative; overflow:hidden; border-radius:6px; cursor:pointer; background:#141414; border:3px solid transparent; transition:border-color .15s,box-shadow .15s; }
.pm-grid-item img { width:100%; height:100%; object-fit:cover; display:block; }
.pm-grid-item:active { transform:scale(0.94); transition:transform 0.05s; }
.pm-grid-item.selected { border-color:#ff9800; box-shadow:0 0 14px rgba(255,152,0,0.7),inset 0 0 10px rgba(255,152,0,0.3); }
.pm-grid-item.dragging { opacity:0.4; }
.pm-grid-item .pm-res { position:absolute; top:2px; right:3px; background:rgba(0,0,0,0.7); color:#cccccc; font-size:9px; padding:1px 4px; border-radius:3px; pointer-events:none; }
.pm-ext { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#787878; font-size:13px; font-weight:700; letter-spacing:1px; background:#141414; }
.pm-label { position:absolute; bottom:0; left:0; right:0; padding:2px 4px; background:rgba(0,0,0,.65); font-size:9px; color:#aaa; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; pointer-events:none; }
.pm-folder-row { display:flex; align-items:center; padding:14px 12px; border-bottom:1px solid #2a2a2a; }
.pm-folder-row.clickable { cursor:pointer; }
.pm-folder-row.clickable:active { background:#2a2a2a; }
.pm-folder-row.pm-folder-sub { padding:10px 12px 10px 48px; border-bottom-color:#1c1c1c; background:#121212; }
.pm-folder-icon { font-size:20px; margin-right:12px; flex-shrink:0; }
.pm-folder-branch { color:#595959; margin-right:8px; flex-shrink:0; }
.pm-folder-name { flex:1; color:#f4f4f4; font-size:14px; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.pm-folder-sub .pm-folder-name { color:#b4b4b4; font-size:13px; font-weight:400; }
.pm-folder-count { color:#898989; font-size:12px; flex-shrink:0; margin-left:8px; }
.pm-folder-arrow { color:#595959; margin-left:8px; font-size:16px; flex-shrink:0; }
.pm-source-bar { display:flex; gap:6px; padding:8px 12px; flex-shrink:0; border-top:1px solid #3a3a3a; background:#0d0d0d; flex-wrap:wrap; }
.pm-source-bar button { flex:1; min-width:70px; padding:10px 4px; border-radius:8px; border:1px solid #565656; background:#2a2a2a; color:#bcbcbc; font-size:12px; font-weight:600; cursor:pointer; }
.pm-source-bar button.active { background:#565656; color:#fff; border-color:#9c9c9c; }
.pm-source-bar button:active { background:#4a4a4a; }
.pm-drag-ghost { position:fixed; z-index:9900; pointer-events:none; opacity:0.8; border:2px solid #ff9800; border-radius:6px; width:60px; height:60px; overflow:hidden; }
.pm-drag-ghost img { width:100%; height:100%; object-fit:cover; }
.pm-grid-back { display:flex; align-items:center; gap:6px; padding:8px; color:#979797; font-size:13px; cursor:pointer; background:#1c1c1c; border-radius:6px; margin-bottom:4px; border:none; width:100%; }

.product-photo-wrap {
  text-align:center; margin-bottom:10px;
}
.product-photo-wrap img {
  max-width:100%; max-height:200px; border-radius:8px;
  object-fit:contain; background:#1a1a1a;
}
.photo-btn {
  display:inline-block; margin-top:6px; padding:7px 14px;
  background:#2c2c2c; border:1px dashed #565656; color:#bcbcbc;
  border-radius:8px; font-size:12px; cursor:pointer;
}
.photo-btn:active { background:#454545; }
.photo-edit-btns { display:flex; gap:4px; margin-top:6px; justify-content:center; flex-wrap:wrap; }
.photo-edit-btns button {
  padding:6px 12px; background:#2c2c2c; border:1px solid #565656;
  color:#bcbcbc; border-radius:8px; font-size:13px; cursor:pointer;
}
.photo-edit-btns button:active { background:#454545; }

/* ── Foto Session Monitor ─────────────────────────────────── */
#foto-session-overlay {
  display:none; position:fixed; inset:0; z-index:9998;
  background:#0a0a0a; flex-direction:column;
}
.fs-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; background:#191919; border-bottom:1px solid #303030;
}
.fs-header span { color:#f4f4f4; font-size:14px; font-weight:600; flex:1; }
.fs-header button {
  background:none; border:none; color:#ff6b6b; font-size:22px; cursor:pointer;
  padding:4px 8px;
}
#fs-status {
  padding:10px 16px; text-align:center; font-size:13px; color:#bcbcbc;
  background:#1c1c1c; border-bottom:1px solid #303030;
}
#fs-pending {
  display:flex; flex-direction:column; align-items:center; padding:12px;
  gap:8px; background:#181818;
}
#fs-pending img {
  max-width:100%; max-height:35vh; object-fit:contain; border-radius:6px;
  border:2px solid #565656;
}
#fs-pending-info {
  font-size:14px; font-weight:700; color:#ff9800; text-align:center;
}
.fs-pending-actions {
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
}
.fs-pending-actions button {
  padding:10px 18px; border-radius:8px; font-size:14px; cursor:pointer; border:none;
}
.fs-pending-actions button:first-child {
  background:#1b5e20; color:#fff;
}
.fs-pending-actions button:nth-child(2) {
  background:#4a3800; color:#ff9800;
}
.fs-pending-actions button:last-child {
  background:#3a1a1a; color:#ff6b6b;
}
#fs-gallery-grid {
  display:flex; flex-wrap:wrap; gap:6px; padding:8px 12px;
  overflow-y:auto; flex:1; align-content:flex-start;
}
.fs-thumb-wrap {
  position:relative; cursor:pointer;
  border:2px solid #565656; border-radius:6px; overflow:hidden;
}
.fs-thumb-wrap.fs-is-cover {
  border-color:#ff9800; border-width:3px;
}
#fs-gallery-grid .fs-thumb {
  width:72px; height:72px; object-fit:cover; display:block;
}
.fs-cover-badge {
  position:absolute; bottom:0; left:0; right:0;
  background:rgba(255,152,0,0.85); color:#000; text-align:center;
  font-size:9px; font-weight:800; padding:2px 0; letter-spacing:1px;
}
#fs-counter {
  padding:8px 16px; text-align:center; font-size:12px; color:#7c7c7c;
  background:#191919; border-top:1px solid #303030;
}
#fs-photo-menu {
  display:none; position:fixed; bottom:0; left:0; right:0;
  background:#191919; border-top:2px solid #303030;
  padding:12px 16px 24px; z-index:9999;
}
#fs-photo-menu .fs-menu-preview {
  display:flex; align-items:center; gap:10px; margin-bottom:12px;
}
#fs-photo-menu .fs-menu-preview img {
  width:56px; height:56px; object-fit:cover; border-radius:6px;
}
#fs-photo-menu .fs-menu-preview span {
  font-size:11px; color:#adadad; word-break:break-all;
}
#fs-photo-menu .fs-menu-btns {
  display:flex; gap:8px;
}
#fs-photo-menu .fs-menu-btns button {
  flex:1; padding:14px; border:none; border-radius:10px;
  font-size:15px; font-weight:700; cursor:pointer;
}
.fs-btn-cover { background:#3a2a00; color:#ff9800; }
.fs-btn-delete { background:#3a1a1a; color:#ff6b6b; }
.fs-btn-cancel { background:#2a2a2a; color:#adadad; }
#fs-manual-pick summary { color:#979797; font-size:13px; cursor:pointer; font-weight:600; }
/* Archive/News tab'ų bar'as (po 2026-05-11 — naujienos featured selection). */
.arch-tab-btn {
  background:transparent; color:#5a7a92; border:none; padding:8px 16px;
  font-size:13px; font-weight:600; cursor:pointer; border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s;
}
.arch-tab-btn:hover { color:#9cd; }
.arch-tab-btn.arch-tab-active {
  color:#cef; border-bottom-color:#5a9abf;
}
/* News mode — pridurio item'o checkbox left, click = toggle. */
.arch-item.news-mode { padding-left:30px; position:relative; }
.arch-item .arch-news-cb {
  position:absolute; left:8px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; cursor:pointer; accent-color:#5a9abf;
}
.arch-item.news-featured {
  background:rgba(90,154,191,0.12); border-left:3px solid #5a9abf;
}

/* News mode: order badge + reorder mygtukai (↑↓) */
.news-order-badge {
  font-size:10px; font-weight:700; color:#5a9abf;
  background:rgba(90,154,191,0.18); padding:2px 6px; border-radius:8px;
  min-width:20px; text-align:center;
}
.news-reorder-btn {
  width:24px; height:24px; padding:0;
  background:#1a3050; color:#9cd; border:1px solid #2a5a7e;
  border-radius:4px; font-size:14px; cursor:pointer; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
}
.news-reorder-btn:disabled { opacity:0.3; cursor:not-allowed; }
.news-reorder-btn:not(:disabled):hover { background:#2a4060; }

/* Filter mygtuko active state */
#arch-news-filter-btn.active {
  background:#1a5e7a !important; color:#fff !important; border-color:#5a9abf !important;
}

.fs-pick-btn {
  display:inline-block; padding:8px 14px; background:#303030; color:#979797;
  border:1px solid #565656; border-radius:6px; font-size:12px; cursor:pointer;
  margin-top:6px;
}

#photo-editor-overlay {
  display:none; position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,0.95); flex-direction:column; align-items:stretch;
  /* `100dvh` = dynamic viewport height — iOS Safari nesusišaltina su address bar'u.
     Be šito viewport'as gali būti didesnis nei realiai matomas plotas, dėl ko
     toolbar viršuje ir adjust panel apačioje liktų off-screen. */
  height:100dvh; max-height:100dvh;
  touch-action:none;
}
#photo-editor-overlay .pe-toolbar {
  display:flex; gap:6px; padding:8px; flex-wrap:wrap; justify-content:center;
  flex-shrink:0;  /* Visada matomas — niekada nenusiplauna */
}
#photo-editor-overlay .pe-toolbar button {
  padding:8px 14px; background:#3a3a3a; border:1px solid #565656;
  color:#e6e6e6; border-radius:8px; font-size:14px; cursor:pointer;
}
#photo-editor-overlay .pe-toolbar button:active { background:#565656; }
#photo-editor-overlay .pe-toolbar button.pe-save {
  background:#1a5a3e; border-color:#2a8a5e; color:#c8f0d8;
}
#photo-editor-overlay .pe-toolbar button.pe-cancel {
  background:#5a1a1a; border-color:#8a2a2a; color:#f0c8c8;
}
/* Slider'iai iPad/iPhone — pritempimo zonos optimizuotos.
   Be šitų taisyklių iOS Safari renderina default'ą su mažu thumb (~16px),
   pirštui sunku pataikyti, drag'as šokinėja ir reikia kelių paspaudimų. */
#pe-adjust-panel input[type="range"]::-webkit-slider-runnable-track {
  height:6px; background:#3a5a7a; border-radius:3px;
}
#pe-adjust-panel input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:28px; height:28px;       /* 28×28 = patogus pirštui */
  border-radius:50%;
  background:#9cd; border:2px solid #2a4a6a;
  box-shadow:0 2px 6px rgba(0,0,0,0.4);
  margin-top:-11px;              /* center vertically ant 6px track'o */
  cursor:pointer;
}
#pe-adjust-panel input[type="range"]:active::-webkit-slider-thumb {
  background:#cef; transform:scale(1.15);
  transition:transform .08s ease;
}
#pe-adjust-panel input[type="range"]::-moz-range-track {
  height:6px; background:#3a5a7a; border-radius:3px;
}
#pe-adjust-panel input[type="range"]::-moz-range-thumb {
  width:28px; height:28px; border-radius:50%;
  background:#9cd; border:2px solid #2a4a6a;
  box-shadow:0 2px 6px rgba(0,0,0,0.4); cursor:pointer;
}
#pe-canvas-wrap {
  flex:1 1 0; min-height:0;  /* `min-height:0` BŪTINAS, kad flex:1 realiai
     shrink'intųsi mažesniu nei content (default min-height:auto blokuoja
     flexbox shrink'ą — canvas push'intų kitus elementus off-screen). */
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative; width:100%;
}
#pe-canvas { max-width:100%; max-height:100%; object-fit:contain; }
#pe-crop-box {
  display:none; position:absolute; border:2px solid #000;
  background:transparent; cursor:move; touch-action:none;
  min-width:40px; min-height:40px; overflow:visible;
  /* skaidrus overlay — vartotojas mato visą originalų vaizdą už frame'o */
}
.pe-handle {
  position:absolute; width:22px; height:22px; background:#000;
  border-radius:50%; touch-action:none; z-index:10;
  box-shadow:0 0 6px rgba(255,255,255,.5);
}
/* Taškai ATITOLINTI 30px nuo frame'o kampo — pirštas neuždengia
   tikslios crop ribos drag'inant */
.pe-handle.tl { top:-30px; left:-30px; cursor:nw-resize; }
.pe-handle.tr { top:-30px; right:-30px; cursor:ne-resize; }
.pe-handle.bl { bottom:-30px; left:-30px; cursor:sw-resize; }
.pe-handle.br { bottom:-30px; right:-30px; cursor:se-resize; }
/* Image search picker overlay */
#img-picker-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.95);
  z-index:9500; flex-direction:column; align-items:center; justify-content:center;
}
#img-picker-overlay.open { display:flex; }
.img-picker-frame { width:90%; max-width:400px; height:55vh; border:3px solid #ff9800; border-radius:12px; overflow:hidden; overflow-y:scroll; scroll-snap-type:y mandatory; scroll-snap-stop:always; -webkit-overflow-scrolling:touch; background:#141414; flex-shrink:0; }
.img-picker-item { scroll-snap-align:start; width:100%; height:55vh; display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; box-sizing:border-box; }
.img-picker-item img { max-width:100%; max-height:100%; display:block; object-fit:contain; }
.img-picker-counter { text-align:center; color:#cccccc; font-size:14px; padding:8px; font-weight:600; flex-shrink:0; }
.img-picker-bar { display:flex; gap:10px; padding:8px 12px; width:90%; max-width:400px; justify-content:center; flex-shrink:0; }
.img-picker-bar button { padding:14px 0; border-radius:8px; border:none; font-size:15px; font-weight:700; cursor:pointer; flex:1; }
.img-picker-more { background:#3a3a3a; color:#e6e6e6; }
.img-picker-close { background:#2a1010; color:#d47070; }
#result-txt {
  font-family:ui-monospace,Menlo,monospace; font-size:11px;
  line-height:1.55; color:#cfcfcf; white-space:pre-wrap;
  word-break:break-word;
}
#hint-row {
  display:flex; gap:8px; padding:10px 16px 14px;
  border-top:1px solid #3a3a3a; background:#1a1a1a;
  flex-shrink:0;
}
#hint-input {
  flex:1; background:#2c2c2c; border:1px solid #3a3a3a;
  color:#f4f4f4; border-radius:8px;
  padding:9px 12px; font-size:14px;
}
#hint-input::placeholder { color:#565656; }
#hint-send {
  background:#3a3a3a; color:#fff; border:none;
  border-radius:8px; padding:9px 14px; font-size:13px;
  cursor:pointer; font-weight:600; white-space:nowrap;
}
#hint-send:active { background:#9c9c9c; }
#qty-row {
  display:none; align-items:center; gap:10px;
  padding:10px 16px; border-top:1px solid #3a3a3a; background:#1a1a1a;
  flex-shrink:0;
}
#qty-row label { font-size:13px; color:#bcbcbc; flex:1; }
.qty-btn {
  background:#3a3a3a; color:#fff; border:none; border-radius:8px;
  width:42px; height:42px; font-size:22px; font-weight:700;
  cursor:pointer; line-height:1;
}
.qty-btn:active { background:#9c9c9c; }
#qty-val {
  font-size:22px; font-weight:700; color:#f4f4f4;
  min-width:36px; text-align:center;
}
#action-row {
  display:flex; gap:8px; padding:10px 16px;
  border-top:1px solid #3a3a3a; background:#1a1a1a; flex-shrink:0;
}
#ok-btn {
  flex:1; background:#1e4d35; color:#6fcf97; border:1px solid #2d6a4f;
  border-radius:8px; padding:13px 8px; font-size:15px; font-weight:700; cursor:pointer;
}
#ok-btn:active { background:#2d6a4f; color:#fff; }
#retry-btn {
  flex:1; background:#3d1a1a; color:#f07070; border:1px solid #7d2020;
  border-radius:8px; padding:13px 8px; font-size:15px; font-weight:700; cursor:pointer;
}
#retry-btn:active { background:#7d2020; color:#fff; }
#scan-btn {
  display:none; width:100%; padding:22px 16px;
  background:#3a3a3a; color:#fff; border:none; border-top:2px solid #1a1a1a;
  font-size:22px; font-weight:700; cursor:pointer; letter-spacing:.5px;
  -webkit-tap-highlight-color:rgba(148,148,148,.3);
}
#scan-btn:active { background:#9c9c9c; }
#tap-btn {
  display:none; width:100%; max-width:480px;
  height:200px; align-items:center; justify-content:center;
  background:#1a1a1a; border-top:1px solid #3a3a3a;
  flex-direction:column; gap:12px; cursor:pointer;
}
#tap-btn label {
  background:#3a3a3a; color:#fff; border-radius:14px;
  padding:18px 40px; font-size:18px; font-weight:700;
  cursor:pointer; letter-spacing:.3px; text-align:center;
  box-shadow:0 4px 20px rgba(148,148,148,.25);
}
#tap-btn label:active { background:#9c9c9c; }
#tap-btn small { color:#6b6b6b; font-size:12px; }
#camera-file { display:none; }
/* ── User badge ── */
#user-lbl { font-size:11px; color:#fff; cursor:pointer; }
#user-lbl:active { color:#bcbcbc; }
/* ── Log view ── */
#log-view { display:none; padding:12px 14px; overflow-y:auto; height:calc(100vh - 120px); }
#log-filter-bar { display:flex; gap:8px; margin-bottom:12px; align-items:center; }
#log-filter-bar b { flex:1; font-size:13px; color:#ccc; }
#log-filter-user { background:#141414; color:#ccc; border:1px solid #333; border-radius:6px;
  padding:5px 8px; font-size:12px; }
.log-entry  { padding:9px 0; border-bottom:1px solid #1a1a1a; }
.log-meta   { color:#555; font-size:11px; margin-bottom:3px; }
.log-action { color:#aaa; font-size:13px; }
.log-detail { color:#777; margin-top:4px; font-size:12px; line-height:1.6; }
.log-field  { color:#e85d2e; }
.log-revert { margin-top:6px; padding:4px 12px; background:#1a1a1a; border:1px solid #333;
  border-radius:6px; color:#9c9c9c; font-size:11px; cursor:pointer; }
/* ── Scan type bar ── */
#scan-type-bar { display:flex; border-bottom:1px solid #111; }
.stype-btn { flex:1; display:flex; flex-direction:column; align-items:center;
  gap:3px; padding:8px 4px; background:transparent; border:none;
  border-right:1px solid #111; color:#545454; font-size:10px; cursor:pointer; transition:color .15s; }
.stype-btn:last-child { border-right:none; }
.stype-btn.active { color:#9c9c9c; background:#0e0e0e; }
.stype-btn svg { opacity:0.5; transition:opacity .15s; }
.stype-btn.active svg { opacity:1; }
/* ── List items ── */
.list-item { display:flex; align-items:center; gap:8px; padding:7px 2px;
  border-bottom:1px solid #111; font-size:13px; }
.list-item input[type=checkbox] { width:18px; height:18px; accent-color:#e85d2e; flex-shrink:0; }
.list-item-bc { font-family:ui-monospace,monospace; color:#ccc; flex:1; }
.list-item-st { font-size:11px; color:#555; flex-shrink:0; min-width:14px; text-align:right; }
.list-item.done .list-item-bc  { color:#4caf6f; }
.list-item.done .list-item-st  { color:#4caf6f; }
.list-item.active .list-item-bc { color:#9c9c9c; font-weight:600; }
.list-ctrl-btn { flex:1; padding:8px; background:#1c1c1c; border:1px solid #393939;
  border-radius:6px; font-size:13px; cursor:pointer; color:#ccc; }

/* ── Quiz Pills ────────────────────────────────────────── */
.quiz-pill {
  padding:10px 16px; border-radius:20px; border:2px solid #393939;
  background:#1c1c1c; color:#cfcfcf; font-size:14px; cursor:pointer;
  transition: all .15s; white-space:nowrap;
}
.quiz-pill:active { transform:scale(.95); }
.quiz-pill.recommended { border-color:#2e6a3a; color:#8fd4a0; }
.quiz-pill.selected { border-color:#9c9c9c; background:#2c2c2c; color:#fff; font-weight:600; }
.quiz-pill.quiz-custom { border-style:dashed; color:#909090; }
.quiz-pill.quiz-custom.selected { border-style:solid; color:#fff; }
.btn-primary {
  background:#1a5c3a; border:none; color:#fff; border-radius:10px;
  font-size:16px; padding:14px; cursor:pointer; font-weight:600;
}
.btn-primary:active { background:#12452c; }
.btn-secondary {
  background:#2d2d2d; border:1px solid #494949; color:#b7b7b7; border-radius:10px;
  font-size:14px; padding:14px 20px; cursor:pointer;
}
.btn-secondary:active { background:#202020; }

/* ── Choose Source Dialog ─────────────────────────────── */
/* Po skenavimo: cards su BIG foto + brand/retailer + URL + browse + custom + skip.
   Foto = svarbiausias indikatorius — kortelės dideliais paveikslais, virš info. */
#cs-overlay {
  position: fixed; inset: 0; z-index: 50000;
  display: none; flex-direction: column;
  background: #0a1622;
  overflow: hidden;
}
#cs-modal {
  display: flex; flex-direction: column;
  flex: 1; overflow: hidden;
}
#cs-header {
  display: flex; align-items: center; justify-content: space-between;
  background: #142e4a; border-bottom: 1px solid #2a5a7e;
  padding: 12px 16px;
  flex-shrink: 0;
}
#cs-title { font-size: 16px; font-weight: 700; color: #e8c060; }
#cs-sub   { font-size: 11px; color: #90b8d4; margin-top: 4px; line-height: 1.3; }
#cs-skip-x {
  background: #2a1010; border: 1px solid #5a2020; color: #ff8080;
  border-radius: 8px; padding: 8px 12px; font-size: 12px; cursor: pointer;
  white-space: nowrap;
}
#cs-skip-x:active { background: #3a1818; }

#cs-cards {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 12px; display: flex; flex-direction: column; gap: 12px;
}
.cs-empty {
  text-align: center; color: #607d8b; font-size: 13px;
  padding: 30px 10px; font-style: italic;
}

/* PLAIN BLOCK layout (NO flex) — vengiame iOS Safari nested-flex squish bug'o
   kur info+buttons clip'inami nematomi po image area */
.cs-card {
  background: #112030;
  border: 2px solid #1f3a5a;
  border-radius: 12px;
  /* overflow: hidden PAŠALINTAS — clip'ino info ir buttons! */
  transition: border-color 0.15s;
}
.cs-type-brand    { border-color: #2a5a3e; }       /* žalsvas brand'ams */
.cs-type-retailer { border-color: #4a4530; }       /* gintarinis retailer'iams */
.cs-type-other    { border-color: #2a3a4e; }       /* pilkas other'iams */
/* TOP MATCH — ryškiausias, auksinis border + glow */
.cs-card.cs-top-match {
  border-color: #e8c060;
  box-shadow: 0 0 0 1px #e8c060, 0 4px 16px rgba(232,192,96,0.15);
}

/* Picker = visa foto + info zona, didelis tap target.
   PLAIN BLOCK — ne flex, kad info būtinai būtų žemiau image */
.cs-picker {
  display: block;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(64,128,192,0.2);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
}
.cs-picker:active { background: rgba(64,128,192,0.08); }

.cs-img-wrap {
  position: relative;
  display: block;             /* NE flex */
  width: 100%;
  height: 240px;              /* fiksuotas, kad layout stabilus */
  background: #050a12 center / contain no-repeat;
  border-bottom: 1px solid #1f3a5a;
  text-align: center;
}
.cs-img {
  display: block;
  width: 100%;
  height: 240px;              /* užpildo wrap */
  object-fit: contain;
  background: #050a12;
}
.cs-img-empty {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 240px;
  color: #607d8b; font-size: 13px; font-style: italic;
  background: #050a12;
  text-align: center; padding: 0 20px;
  box-sizing: border-box;
}
.cs-top-label {
  position: absolute; top: 10px; left: 10px;
  background: linear-gradient(135deg, #e8c060, #c89030);
  color: #1a0f00; font-weight: 800; font-size: 11px; letter-spacing: 0.6px;
  padding: 5px 10px; border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  z-index: 2;
}

.cs-info { padding: 10px 14px 4px; }
.cs-badges { margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cs-badge {
  display: inline-block; padding: 3px 8px; border-radius: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.4px;
}
.cs-badge-brand    { background: #1d4828; color: #8be0a0; }
.cs-badge-retailer { background: #4d3a14; color: #f0c060; }
.cs-badge-other    { background: #2a3a4e; color: #90b8d4; }
.cs-badge-plat     { background: #1a3c5e; color: #80b8e0; text-transform: uppercase; }
.cs-price {
  background: #2a1845; color: #d090ff; padding: 3px 8px; border-radius: 4px;
  font-size: 12px; font-weight: 700; margin-left: auto;
}

.cs-titletext {
  color: #e0e8f0; font-size: 14px; font-weight: 600;
  line-height: 1.35; margin: 4px 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.cs-no-title { color: #607d8b; font-style: italic; font-weight: 400; }

.cs-url {
  color: #6a99c0; font-size: 11px; word-break: break-all;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  margin: 4px 0 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.cs-buttons {
  display: flex; gap: 8px; padding: 8px 12px 12px;
}
.cs-browse-btn {
  flex: 1; background: #142e4a; color: #90b8d4;
  border: 1px solid #2a5a7e; border-radius: 8px;
  padding: 11px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.cs-browse-btn:active { background: #1a3c5e; }
.cs-choose-btn {
  flex: 2; background: #1d4828; color: #fff;
  border: none; border-radius: 8px;
  padding: 11px; font-size: 14px; font-weight: 700; cursor: pointer;
}
.cs-choose-btn:active { background: #2a6038; }

#cs-custom {
  display: flex; gap: 8px; padding: 10px 12px;
  background: #0d1b2a; border-top: 1px solid #1f3a5a;
  flex-shrink: 0;
}
#cs-custom-input {
  flex: 1; background: #142e4a; border: 1px solid #2a5a7e; color: #e0e8f0;
  border-radius: 8px; padding: 11px; font-size: 13px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
#cs-custom-input:focus { outline: none; border-color: #4080c0; }
#cs-custom button {
  background: #2a1845; color: #d090ff; border: 1px solid #4a2870;
  border-radius: 8px; padding: 0 14px; font-size: 13px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
#cs-custom button:active { background: #3a2055; }

/* Floating clipboard banner — po csBrowse() pakviečiamas. Vartotojas
   atidaro brand puslapį Safari'je, ten kopijuoja URL, grįžta čia ir
   paspaudžia šį didžiulį mygtuką. */
#cs-clip-banner {
  display: none;
  position: fixed; left: 8px; right: 8px; bottom: 8px;
  z-index: 50500;
  background: linear-gradient(135deg, #2a1845 0%, #4a2870 100%);
  border: 2px solid #d090ff;
  border-radius: 14px;
  padding: 16px 16px 12px;
  flex-direction: column; gap: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.6), 0 0 0 4px rgba(208,144,255,0.15);
  max-height: 75vh; overflow-y: auto;
}
.cs-clip-text {
  color: #f0d8ff; font-size: 14px; line-height: 1.55;
  display: flex; flex-direction: column; gap: 8px;
}
.cs-clip-step {
  display: flex; align-items: flex-start; gap: 10px;
}
.cs-clip-num {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 26px; height: 26px;
  background: #ffe890; color: #1a0033;
  border-radius: 50%;
  font-weight: 800; font-size: 13px;
}
.cs-clip-text b { color: #ffe890; font-weight: 800; }
#cs-clip-btn {
  background: #d090ff; color: #1a0033;
  border: none; border-radius: 10px;
  padding: 16px 18px; font-size: 15px; font-weight: 800;
  letter-spacing: 0.4px; cursor: pointer;
  -webkit-tap-highlight-color: rgba(255,255,255,0.3);
}
#cs-clip-btn:active { background: #f0c0ff; transform: scale(0.98); }
#cs-clip-btn:disabled { opacity: 0.5; }
#cs-clip-btn.cs-clip-pulse {
  animation: cs-pulse 1s ease-in-out 3;
}
@keyframes cs-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(208,144,255,0.7); }
  50%      { box-shadow: 0 0 0 16px rgba(208,144,255,0); }
}
.cs-clip-foot {
  text-align: center; padding-top: 4px;
  border-top: 1px dashed rgba(208,144,255,0.3);
}
.cs-clip-foot a {
  color: #c8a0ff; font-size: 12px; text-decoration: underline;
}

/* Paste modal — iOS Safari fallback kai clipboard.readText() blokuojamas.
   Atidaro input lauką su focus'u; iOS klaviatūros suggestion bar virš
   klaviatūros parodys "Paste" mygtuką (jei clipboard'e turinys). */
#cs-paste-modal {
  position: fixed; inset: 0; z-index: 51500;
  background: rgba(0,0,0,0.85);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 20px 16px;
  padding-top: 60px;  /* virš keyboard'o erdvė */
}
.cs-paste-box {
  background: #112030; border: 2px solid #d090ff;
  border-radius: 14px; padding: 18px;
  max-width: 540px; width: 100%;
  color: #e0e8f0;
  box-shadow: 0 6px 24px rgba(0,0,0,0.6);
}
.cs-paste-box h2 {
  margin: 0 0 8px; font-size: 18px; color: #d090ff;
}
.cs-paste-box p { font-size: 14px; line-height: 1.5; color: #c0d0e0; margin: 0 0 12px; }
.cs-paste-box b { color: #ffe890; }
#cs-paste-input {
  width: 100%; box-sizing: border-box;
  background: #050a12; color: #80e890;
  border: 2px solid #2a5a7e; border-radius: 8px;
  padding: 14px; font-size: 15px;
  font-family: ui-monospace, "SF Mono", monospace;
}
#cs-paste-input:focus { outline: none; border-color: #d090ff; }
#cs-paste-go {
  display: block; width: 100%; margin-top: 12px;
  background: #d090ff; color: #1a0033; border: none;
  border-radius: 10px; padding: 14px; font-size: 15px; font-weight: 800;
  cursor: pointer;
}
#cs-paste-go:disabled { opacity: 0.4; background: #2d2d2d; color: #888; }
#cs-paste-go.cs-paste-flash { animation: cs-pulse 0.6s ease-in-out 2; }
.cs-paste-cancel {
  display: block; width: 100%; margin-top: 8px;
  background: #2d2d2d; color: #b7b7b7; border: none;
  border-radius: 8px; padding: 12px; font-size: 13px; cursor: pointer;
}

/* ── Variant Picker ────────────────────────────────────────────
   Po Choose Source su Shopify URL (be ?variant=) backend grąžina visus
   variant'us. Vartotojas pasirenka tile'ą su image+name+price. */
#vp-overlay {
  position: fixed; inset: 0; z-index: 50800;
  background: #0a1622;
  display: flex; flex-direction: column;
}
#vp-modal {
  display: flex; flex-direction: column;
  flex: 1; overflow: hidden;
}
#vp-header {
  display: flex; align-items: center; justify-content: space-between;
  background: #142e4a; border-bottom: 1px solid #2a5a7e;
  padding: 12px 16px; flex-shrink: 0;
}
#vp-title { font-size: 16px; font-weight: 700; color: #d090ff; }
#vp-sub   { font-size: 11px; color: #90b8d4; margin-top: 4px; line-height: 1.3; }
#vp-back {
  background: #2a3a4e; border: 1px solid #455a6e; color: #b0c8d8;
  border-radius: 8px; padding: 8px 12px; font-size: 12px; cursor: pointer;
  white-space: nowrap;
}
#vp-tiles {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 12px; display: grid;
  /* Mobile (iki 600px) — 1 stulpelis; iPad (600-1024px) — 2; desktop — 3 */
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 600px) { #vp-tiles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { #vp-tiles { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } }
.vp-tile {
  background: #112030; border: 2px solid #2a3a4e;
  border-radius: 12px; overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(208,144,255,0.2);
  transition: border-color 0.15s, transform 0.1s;
  display: flex; flex-direction: column;
  min-height: 180px;  /* niekuomet nesusmąžinkit'ėm į dryžį */
}
.vp-tile:active {
  border-color: #d090ff;
  transform: scale(0.98);
}
.vp-tile.vp-unavail { opacity: 0.5; }
.vp-tile-img {
  display: block; width: 100%; height: 140px;
  object-fit: contain;
  background: #050a12;
  border-bottom: 1px solid #2a3a4e;
  flex-shrink: 0;
}
.vp-tile-img-empty {
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; color: #455a6e;
  height: 80px;  /* mažesnis fallback'as kai be image */
}
.vp-tile-info { padding: 12px 14px; flex: 1; min-height: 60px; }
.vp-tile-title {
  color: #e0e8f0; font-size: 14px; font-weight: 600;
  line-height: 1.3; margin-bottom: 6px;
  /* NE truncate'inti — pilnas matomas variant title */
  word-break: break-word;
}
.vp-tile-meta {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.vp-tile-price {
  background: #2a1845; color: #d090ff;
  padding: 3px 8px; border-radius: 4px;
  font-size: 12px; font-weight: 700;
}
.vp-unavail-tag {
  background: #4a1818; color: #ff8080;
  padding: 3px 8px; border-radius: 4px;
  font-size: 10px; font-weight: 700;
}
.vp-tile-btn {
  display: block; margin: 8px 12px 12px;
  background: #1d4828; color: #fff; border: none;
  border-radius: 8px; padding: 10px;
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.vp-tile-btn:active { background: #2a6038; }

/* Bookmarklet setup modal */
#cs-bm-modal {
  position: fixed; inset: 0; z-index: 51000;
  background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.cs-bm-box {
  background: #112030; border: 2px solid #2a5a7e;
  border-radius: 14px; padding: 20px;
  max-width: 540px; width: 100%; max-height: 85vh; overflow-y: auto;
  color: #e0e8f0;
}
.cs-bm-box h2 {
  margin: 0 0 12px; font-size: 18px; color: #d090ff;
}
.cs-bm-box p, .cs-bm-box li { font-size: 14px; line-height: 1.6; }
.cs-bm-box ol { padding-left: 22px; }
.cs-bm-box li { margin-bottom: 6px; }
.cs-bm-box code {
  background: #050a12; padding: 2px 6px; border-radius: 4px;
  color: #80e890; font-size: 13px;
}
#cs-bm-code {
  width: 100%; min-height: 80px; margin-top: 8px;
  background: #050a12; color: #80e890;
  border: 1px solid #2a5a7e; border-radius: 8px;
  padding: 10px; font-family: ui-monospace, "SF Mono", monospace;
  font-size: 11px; word-break: break-all; resize: vertical;
}
.cs-bm-box button {
  background: #1a3c5e; color: #fff; border: none;
  border-radius: 8px; padding: 12px 18px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  margin-top: 10px;
}
.cs-bm-box button:active { background: #245078; }
.cs-bm-box .cs-bm-close {
  background: #2d2d2d; color: #b7b7b7;
  display: block; width: 100%; margin-top: 16px;
}

/* Inline browser (iframe) — variant peržiūrai */
#cs-browser {
  position: absolute; inset: 0; z-index: 50100;
  display: flex; flex-direction: column;
  background: #0a1622;
}
#cs-browser-bar {
  display: flex; align-items: center; gap: 10px;
  background: #142e4a; border-bottom: 1px solid #2a5a7e;
  padding: 10px 12px; flex-shrink: 0;
}
#cs-browser-bar button,
#cs-browser-bar a {
  background: #1a3c5e; color: #fff; border: none;
  border-radius: 8px; padding: 9px 13px; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  display: inline-flex; align-items: center;
}
#cs-browser-bar button:active,
#cs-browser-bar a:active { background: #245078; }
#cs-browser-bar a { background: #2d2d2d; color: #b7b7b7; }
#cs-browser-url {
  flex: 1; color: #90b8d4; font-size: 11px; word-break: break-all;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
#cs-browser-iframe {
  flex: 1; width: 100%; border: 0; background: #fff;
}

/* ── Light Mode ────────────────────────────────────────── */
html.light-mode {
  filter: invert(1) hue-rotate(180deg);
}
html.light-mode img,
html.light-mode video,
html.light-mode canvas,
html.light-mode .pm-slot img,
html.light-mode .pm-grid-item img,
html.light-mode .arch-detail-photo img,
html.light-mode #barcode-overlay img,
html.light-mode .fs-thumb,
html.light-mode #pm-view-img {
  filter: invert(1) hue-rotate(180deg); /* double-invert images back to normal */
}