/* White converter shell for APK, JAR, TAR and GZIP. Behavior stays in the existing scripts. */

.zarch-page { --za-blue: #2563eb; --za-green: #16a34a; --za-gold: #f5b400; }
.zarch-page [hidden] { display: none !important; }

@media (min-width: 1100px) {
  .zarch-page { --cv-aside: clamp(230px, 18vw, 280px); }
  .zarch-page .conv-board {
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
  }
}

.zarch-page .conv-title {
  font-size: clamp(1.7rem, 2.2vw, 2.2rem);
  letter-spacing: -0.04em;
  line-height: 1.08;
  hyphens: manual;
  overflow-wrap: normal;
}
.article .zarch-page .conv-lede {
  margin: 0 0 16px;
  color: #3b4d9a;
  font-size: 1.02rem;
  line-height: 1.4;
}
.article .zarch-page .conv-perks { gap: 14px; }
.article .zarch-page .conv-perks li { font-size: 0.84rem; }
.zarch-page .conv-perks strong { color: #1d3fd8; }
.article .zarch-page img.conv-art {
  max-width: 260px;
  margin-top: 22px;
}

.zarch-page .zarch-app {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--cv-ink, #172033);
}
.zarch-page .conv-board,
.zarch-page .conv-stack { gap: 12px; }
.zarch-page .conv-card,
.zarch-page .conv-steps {
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.zarch-page .conv-steps [data-conv-step="1"] > span:first-child { background: var(--za-blue); color: #fff; }
.zarch-page .conv-steps [data-conv-step="1"] strong { color: var(--za-blue); }
.zarch-page:is(:has(#zipe-search-wrap:not([hidden])), :has(#tar-list-empty[hidden]), :has(#gzip-btn-run:not([disabled]))) .conv-steps [data-conv-step="1"] > span:first-child { background: var(--za-green); color: #fff; }
.zarch-page:is(:has(#zipe-search-wrap:not([hidden])), :has(#tar-list-empty[hidden]), :has(#gzip-btn-run:not([disabled]))) .conv-steps [data-conv-step="1"] strong { color: var(--cv-ink, #172033); }
.zarch-page:is(:has(#zipe-search-wrap:not([hidden])), :has(#tar-list-empty[hidden]), :has(#gzip-btn-run:not([disabled]))) .conv-steps [data-conv-step="2"] > span:first-child { background: var(--za-blue); color: #fff; }
.zarch-page:is(:has(#zipe-search-wrap:not([hidden])), :has(#tar-list-empty[hidden]), :has(#gzip-btn-run:not([disabled]))) .conv-steps [data-conv-step="2"] strong { color: var(--za-blue); }
.zarch-page:is(:has(#zipe-list:not(:empty)), :has(#tar-list:not(:empty)), :has(#gzip-stat-out:not(.is-muted))) .conv-steps [data-conv-step="2"] > span:first-child { background: var(--za-green); }
.zarch-page:is(:has(#zipe-list:not(:empty)), :has(#tar-list:not(:empty)), :has(#gzip-stat-out:not(.is-muted))) .conv-steps [data-conv-step="2"] strong { color: var(--cv-ink, #172033); }
.zarch-page:is(:has(#zipe-list:not(:empty)), :has(#tar-list:not(:empty)), :has(#gzip-stat-out:not(.is-muted))) .conv-steps [data-conv-step="3"] > span:first-child { background: var(--za-blue); color: #fff; }
.zarch-page:is(:has(#zipe-list:not(:empty)), :has(#tar-list:not(:empty)), :has(#gzip-stat-out:not(.is-muted))) .conv-steps [data-conv-step="3"] strong { color: var(--za-blue); }

.article .zarch-page h2.conv-card-title { color: #1d3fd8; font-size: 1.02rem; }
.zarch-badge {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--za-blue);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
}

.zarch-page .zarch-app .itool-drop {
  min-height: 200px;
  margin: 0;
  padding: 22px 16px;
  border: 1.5px dashed #93c5fd;
  border-radius: 14px;
  background: #f5f9ff;
  box-shadow: none;
}
.zarch-page .zarch-app .itool-drop.is-dragover { background: #e6efff; }
.zarch-page .zarch-app .conv-cloud { width: 64px; height: 64px; background-size: 40px; }
.zarch-page .zarch-app .itool-drop-title {
  color: var(--cv-ink, #172033);
  font-size: 1.05rem;
  font-weight: 800;
}
.zarch-page .zarch-app .itool-drop-hint { color: #64748b; }
.zarch-page .itool-hint[data-qa-mobile-note] { margin: 0 0 12px; }
@media (min-width: 900px) {
  .zarch-page .itool-hint[data-qa-mobile-note] { display: none; }
}

.zarch-page .zarch-app .itool-fields { margin: 0; }
.zarch-page .zarch-app .itool-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  color: var(--cv-ink, #172033);
}
.zarch-page .zarch-app .itool-select,
.zarch-page .zarch-app .itool-input {
  width: 100%;
  box-sizing: border-box;
}
.zarch-page .zip-pass-wrap { margin-top: 12px; }
.zarch-page .zip-pass-hint a { color: var(--za-blue); font-weight: 700; }
.article .zarch-page .itool-status { margin: 0; color: #475569; font-size: 0.9rem; line-height: 1.4; }
.article .zarch-page .itool-list-empty { margin: 12px 0 0; color: #64748b; }
.article .zarch-page .itool-file-list,
.article .zarch-page .itool-file-list li { margin-left: 0; padding-left: 0; list-style: none; }
.article .zarch-page .itool-file-list li::before,
.article .zarch-page .itool-hist-list > li::before { content: none; }
.article .zarch-page .itool-hist-list > li { margin: 0; }

.zarch-actions { display: grid; gap: 8px; margin-top: 14px; }
.zarch-row { display: flex; flex-wrap: wrap; gap: 8px; }
.zarch-row .itool-btn { flex: 1 1 120px; }
.zarch-page .zarch-app button.zarch-go {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  background: var(--za-gold);
  color: #1f2937;
  font-size: 1rem;
  font-weight: 800;
}
.zarch-page .zarch-app button.zarch-go:hover:not(:disabled) {
  background: #e5a800;
  border-color: transparent;
  color: #1f2937;
}
.zarch-page .zarch-app button.zarch-go:disabled { opacity: 0.45; }

.zarch-page .zarch-recents {
  display: none;
  width: auto;
  max-width: none;
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.zarch-page .zarch-recents:has(.itool-hist-host:not([hidden])) { display: block; }
.zarch-page .zarch-recents .itool-hist-list {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.zarch-page .zarch-recents .itool-hist-thumb { aspect-ratio: 4 / 3; }

html[data-theme="dark"] .zarch-page .zarch-app .itool-drop { background: #0f1b33; border-color: #3b5b99; }
html[data-theme="dark"] .zarch-page .zarch-app button.zarch-go { color: #1f2937; }
html[data-theme="dark"] .article .zarch-page .conv-lede { color: #a5b4fc; }