/* ==========================================================================
   LogoProof (/logoproof) — panel nástroje: přepínač režimů, pole pro
   přetažení souboru, náhled loga, výsledek a návod.
   ========================================================================== */

.vb-lproof {
  position: relative;
  max-width: 56rem;
  margin-inline: auto;
  text-align: left;
}
/* Přepínač režimů: segment jako výběr jazyka v okně dema, jen v plných
   tónech, aby nezanikl na černé stránce. Červená zůstává akcím. */
.vb-lproof__modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  width: min(100%, 24rem);
  margin: 0 auto clamp(16px, 2vw, 24px);
  padding: 4px;
  border-radius: 12px;
  background: #1f1f1f;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.vb-lproof__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: 8px;
  color: var(--vb-muted);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.vb-lproof__tab:hover { color: var(--vb-text); }
.vb-lproof__tab[aria-selected="true"] { background: #3d3d3d; color: var(--vb-text); }
.vb-lproof__tab:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; }
.vb-lproof__panel { display: flex; flex-direction: column; }
.vb-lproof__panel[hidden] { display: none; }

/* Pole pro přetažení: <label> s ukrytým <input type=file>, klik i klávesnice
   fungují nativně, přetažení řeší vb-logoproof.js */
.vb-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 15rem;
  padding: 32px 24px;
  border: 1.5px dashed rgba(255, 255, 255, 0.2);
  border-radius: var(--vb-radius-xl);
  background: var(--vb-panel);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.vb-drop:hover { border-color: rgba(255, 255, 255, 0.36); background: #1a1a1a; }
.vb-drop.is-over { border-color: var(--vb-brand); background: #1c0d11; }
.vb-drop:focus-within { border-color: var(--vb-brand); border-style: solid; }
.vb-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.vb-drop__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 4px;
  border-radius: 16px;
  background: var(--vb-brand-soft);
  color: var(--vb-brand);
  font-size: 26px;
}
.vb-drop__num {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--vb-tile);
  font-family: var(--vb-font-display);
  font-weight: 600;
  font-size: 0.95rem;
}
.vb-drop__title { font-size: 1.0625rem; font-weight: 600; color: var(--vb-text); }
.vb-drop__hint { max-width: 26rem; font-size: 0.875rem; line-height: 1.5; color: var(--vb-muted); }
.vb-drop__file {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
  max-width: 100%;
  margin-top: 4px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--vb-tile);
  font-size: 0.8125rem;
  color: var(--vb-muted);
}
.vb-drop__file[hidden] { display: none; }
.vb-drop__file strong { min-width: 0; overflow-wrap: anywhere; font-weight: 600; color: var(--vb-text); }
.vb-drop__more { display: none; }
/* Po vytvoření razítka se pole zmenší na lištu pod výsledkem */
.vb-drop.is-compact { order: 2; flex-direction: row; min-height: 0; margin-top: 12px; padding: 14px 20px; }
.vb-drop.is-compact .vb-drop__icon { width: 36px; height: 36px; margin: 0; border-radius: 10px; font-size: 18px; }
.vb-drop.is-compact .vb-drop__title { display: none; }
.vb-drop.is-compact .vb-drop__more { display: block; font-size: 0.9375rem; }
.vb-drop.is-compact .vb-drop__hint { display: none; }
/* Náhled původního souboru v ověření místo čísla */
.vb-drop__thumb { display: grid; place-items: center; width: 72px; height: 72px; padding: 8px; border-radius: 12px; background: #fff; }
.vb-drop__thumb[hidden] { display: none; }
.vb-drop__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.vb-drop__thumb.is-dark { background: #1b1b1b; box-shadow: inset 0 0 0 1px var(--vb-line-strong); }
.vb-drop:has(.vb-drop__thumb:not([hidden])) .vb-drop__num { display: none; }

/* Ověření: razítko a původní soubor vedle sebe */
.vb-lproof__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vb-lproof__pair .vb-drop { min-height: 13rem; }
@media (max-width: 640px) {
  .vb-lproof__pair { grid-template-columns: 1fr; }
  .vb-drop, .vb-lproof__pair .vb-drop { min-height: 11rem; }
}

/* Řádky výsledku */
.vb-lproof__result { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.vb-lproof__result[hidden] { display: none; }
.vb-lproof__row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--vb-radius);
  background: var(--vb-tile);
}
.vb-lproof__state {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--vb-text);
  font-size: 19px;
}
.vb-lproof__row--ok .vb-lproof__state { background: rgba(34, 197, 94, 0.16); color: var(--vb-green); }
.vb-lproof__row--bad .vb-lproof__state { background: var(--vb-brand-soft); color: var(--vb-brand); }
.vb-lproof__row--busy .vb-lproof__state i { animation: vb-lproof-spin 0.9s linear infinite; }
@keyframes vb-lproof-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vb-lproof__row--busy .vb-lproof__state i { animation: none; } }

.vb-lproof__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-top: 6px; }
.vb-lproof__text > strong { font-size: 1rem; font-weight: 600; color: var(--vb-text); }
.vb-lproof__text p { font-size: 0.9375rem; line-height: 1.6; color: var(--vb-muted); }
.vb-lproof__text > div { display: flex; flex-direction: column; gap: 10px; }
.vb-lproof__text .vb-link { align-self: flex-start; font-size: 0.875rem; }
.vb-lproof__hash { display: flex; flex-direction: column; gap: 2px; }
.vb-lproof__hash span { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--vb-faint); }
.vb-lproof__hash code { font-family: var(--vb-font-mono); font-size: 0.8125rem; line-height: 1.5; color: #e6e6e6; overflow-wrap: anywhere; }
.vb-lproof__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.vb-lproof__actions .vb-btn { overflow-wrap: anywhere; }

.vb-lproof__note {
  margin-top: 16px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--vb-faint);
  text-align: center;
  text-wrap: balance;
}
.vb-lproof__note i { margin-right: 6px; font-size: 1rem; vertical-align: -0.15em; color: var(--vb-green); }

.vb-lproof.is-busy .vb-drop:not([data-drop="original"]) { pointer-events: none; opacity: 0.6; }

/* Karta nového razítka: náhled vlevo, stav vpravo */
.vb-lproof__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border-radius: var(--vb-radius-xl);
  background: var(--vb-panel);
}
.vb-lproof__side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vb-lproof__side .vb-lproof__row { flex: 1; background: transparent; padding: 12px 8px; }
.vb-lproof__pending { display: flex; gap: 10px; align-items: flex-start; margin: 0 8px 8px; padding: 12px 14px; border-radius: var(--vb-radius); background: var(--vb-tile); font-size: 0.875rem; line-height: 1.5; color: var(--vb-muted); }
.vb-lproof__pending i { margin-top: 1px; font-size: 1.05rem; color: var(--vb-text); }
@media (max-width: 760px) { .vb-lproof__card { grid-template-columns: 1fr; } }

/* Okno s náhledem loga na šachovnici; pozadí jde přepnout na tmavé */
.vb-lproof__win {
  --chk-a: #ffffff;
  --chk-b: #ececec;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  border-radius: var(--vb-radius);
  overflow: hidden;
  background: #0e0e0e;
  box-shadow: inset 0 0 0 1px var(--vb-line);
}
.vb-lproof__win.is-dark { --chk-a: #1b1b1b; --chk-b: #141414; }
.vb-lproof__winbar { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 6px 6px 6px 14px; border-bottom: 1px solid var(--vb-line); }
.vb-lproof__winbar .vb-cl__dots { display: inline-flex; gap: 6px; }
.vb-lproof__winbar .vb-cl__dots i { width: 10px; height: 10px; }
/* Celý název souboru vždy viditelný — dlouhý se zalomí */
.vb-lproof__winname { flex: 1; min-width: 0; font-family: var(--vb-font-mono); font-size: 0.75rem; line-height: 1.45; color: var(--vb-muted); overflow-wrap: anywhere; }
.vb-lproof__bg { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--vb-muted); font-size: 16px; transition: background-color 0.18s ease, color 0.18s ease; }
.vb-lproof__bg:hover { background: var(--vb-tile); color: var(--vb-text); }
.vb-lproof__bg[hidden] { display: none; }
.vb-lproof__stage {
  display: grid;
  place-items: center;
  flex: 1;
  min-height: 15rem;
  padding: clamp(20px, 3vw, 36px);
  background-color: var(--chk-a);
  background-image: conic-gradient(var(--chk-b) 25%, transparent 0 50%, var(--chk-b) 0 75%, transparent 0);
  background-size: 20px 20px;
  transition: background-color 0.2s ease;
}
.vb-lproof__stage img { display: block; width: 100%; height: 100%; max-height: 14rem; object-fit: contain; }
.vb-lproof__win.is-file .vb-lproof__stage { background: #121212; }
.vb-lproof__badge { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--vb-muted); }
.vb-lproof__badge i { font-size: 48px; color: var(--vb-faint); }
.vb-lproof__badge strong { padding: 3px 10px; border-radius: 6px; background: var(--vb-tile); font-family: var(--vb-font-mono); font-size: 0.8125rem; color: var(--vb-text); }

/* Návod po vytvoření razítka */
.vb-lproof__guide { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.vb-lproof__guide-title { margin: 12px 0 4px; font-family: var(--vb-font-display); font-size: 1.25rem; font-weight: 600; text-align: center; color: var(--vb-text); }
.vb-lproof__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: lpstep; }
.vb-lproof__step { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: var(--vb-radius-xl); background: var(--vb-panel); counter-increment: lpstep; }
.vb-lproof__step::before {
  content: counter(lpstep);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--vb-brand);
  font-family: var(--vb-font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
}
.vb-lproof__step strong { font-size: 1rem; font-weight: 600; color: var(--vb-text); }
.vb-lproof__step p { font-size: 0.875rem; line-height: 1.6; color: var(--vb-muted); overflow-wrap: anywhere; }
@media (max-width: 760px) { .vb-lproof__steps { grid-template-columns: 1fr; } }

.vb-lproof__why { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 20px 28px; align-items: center; padding: 22px; border-radius: var(--vb-radius-xl); background: var(--vb-panel); }
.vb-lproof__why strong { display: block; margin-bottom: 6px; font-size: 1rem; font-weight: 600; color: var(--vb-text); }
.vb-lproof__why p { font-size: 0.875rem; line-height: 1.6; color: var(--vb-muted); }
.vb-lproof__eq { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; }
.vb-lproof__chip { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border-radius: 10px; line-height: 1.4; background: var(--vb-tile); font-size: 0.8125rem; font-weight: 600; color: var(--vb-text); }
.vb-lproof__chip span { min-width: 0; overflow-wrap: anywhere; }
.vb-lproof__chip i { flex: none; margin-top: 1px; }
.vb-lproof__chip.is-result { align-self: center; }
.vb-lproof__op { align-self: center; }
.vb-lproof__chip i { color: var(--vb-muted); }
.vb-lproof__chip.is-result { background: rgba(34, 197, 94, 0.16); color: #86efac; }
.vb-lproof__chip.is-result i { color: var(--vb-green); }
.vb-lproof__op { font-size: 0.875rem; font-weight: 600; line-height: 1; color: var(--vb-faint); }
@media (max-width: 640px) { .vb-lproof__why { grid-template-columns: 1fr; } }
.vb-lproof.is-busy .vb-lproof__tab { pointer-events: none; }