* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  font-family: system-ui, -apple-system, sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-size: 14px;
  color: #e8ecf7;
  background: #1a1b26;
  background-image: var(--popup-bg-image, none);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.app-layout {
  min-height: 100vh;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.75rem;
}
.app-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.app-title {
  font-size: 1.25rem;
  margin: 0;
  color: #fff;
  font-weight: bold;
}
.app-nav { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.contribution-pitch {
  background: #e6b422;
  color: #1a1b26;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.45;
}
.sub { color: rgba(232, 236, 247, 0.8); font-size: 0.8rem; margin: 0 0 0.75rem; }
.action-hint { margin: 0 0 0.5rem; font-size: 0.8rem; font-style: italic; }
.two-column-main {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
.left-column { flex: 0 1 380px; min-width: 0; }
.right-column { flex: 1 1 420px; min-width: 0; }
.panel {
  background: rgba(20, 22, 38, 0.75);
  border: 1px solid rgba(122, 162, 247, 0.25);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}
.panel-heading {
  font-size: 1rem;
  margin: 0 0 0.5rem;
  color: #a5b8f0;
  font-weight: 600;
}
.command-panel .row { margin-top: 0.35rem; }
.command-panel .label { display: block; margin-top: 0.25rem; }
.row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.35rem; }
.label { font-size: 0.8rem; color: rgba(232, 236, 247, 0.75); }
.label.empty { font-style: italic; }
.row-hint { margin-top: 0.2rem; }
.input-picker-hint { font-size: 0.75rem; color: rgba(232, 236, 247, 0.7); margin-bottom: 0.25rem; }
.label.hint { font-size: 0.75rem; color: rgba(232, 236, 247, 0.65); max-width: 100%; }
.zip-list-section {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: rgba(30, 32, 50, 0.6);
  border-radius: 6px;
  border: 1px solid rgba(122, 162, 247, 0.2);
}
.zip-list-section[hidden] { display: none; }
.zip-list-heading { font-size: 0.9rem; margin: 0 0 0.35rem; color: #a5b8f0; }
.zip-list { list-style: none; margin: 0; padding: 0; max-height: 180px; overflow-y: auto; font-size: 0.8rem; color: #c0caf5; }
.zip-list li { padding: 0.2rem 0; border-bottom: 1px solid rgba(122, 162, 247, 0.15); word-break: break-all; }
.zip-list li:last-child { border-bottom: none; }
.btn {
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  border: none;
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
}
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-primary { background: #7aa2f7; color: #1a1b26; }
.btn-primary:hover:not(:disabled) { filter: brightness(1.1); }
.btn-scan { background: #7aa2f7; color: #1a1b26; }
.btn-apply { background: #14b8a6; color: #1a1b26; }
.btn-scan:hover:not(:disabled), .btn-apply:hover:not(:disabled) { filter: brightness(1.1); }
.btn-about { background: #7aa2f7; color: #1a1b26; }
.btn-support { background: #e6b422; color: #1a1b26; font-weight: bold; }
.btn-about:hover, .btn-support:hover { filter: brightness(1.1); }
.btn-secondary { background: #565f89; color: #e8ecf7; font-size: 0.8rem; }
.btn-secondary:hover { filter: brightness(1.1); }
.advance-section { margin-top: 0.5rem; }
.advance-trigger { margin-bottom: 0.35rem; }
.advance-panel { margin-top: 0.35rem; padding-top: 0.5rem; border-top: 1px solid rgba(122, 162, 247, 0.2); }
.advance-panel[hidden] { display: none; }
.report-hint { font-size: 0.75rem; color: rgba(232, 236, 247, 0.7); margin: 0 0 0.35rem; }
.advance-options-section { margin-top: 0.75rem; padding-top: 0.5rem; border-top: 1px solid rgba(122, 162, 247, 0.2); }
.advance-subsection { margin-top: 0.75rem; padding-top: 0.5rem; border-top: 1px solid rgba(122, 162, 247, 0.2); transition: opacity 0.2s; }
.advance-subsection.disabled { opacity: 0.5; pointer-events: none; }
.options-heading { font-size: 0.9rem; margin: 0 0 0.35rem; color: #a5b8f0; }
.options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  margin-top: 0.35rem;
}
.options label { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; cursor: pointer; color: #c0caf5; }
.options input[type="checkbox"] {
  position: relative;
  width: 2.25rem;
  height: 1.2rem;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: #565f89;
  border-radius: 999px;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.2s;
}
.options input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #e8ecf7;
  transition: transform 0.2s;
}
.options input[type="checkbox"]:checked {
  background: #14b8a6;
}
.options input[type="checkbox"]:checked::before {
  transform: translateX(1.05rem);
}
.actions-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }
.live-activity-panel .report-column { margin-top: 0.5rem; }
.report-column .report { margin-top: 0.35rem; }
.report-column .report:first-child { margin-top: 0; }
.report {
  white-space: pre-wrap;
  word-break: break-all;
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  padding: 0.5rem;
  background: rgba(26, 27, 38, 0.9);
  color: #c0caf5;
  border-radius: 6px;
  min-height: 120px;
  max-height: 280px;
  overflow: auto;
  margin: 0.35rem 0 0;
  border: 1px solid rgba(122, 162, 247, 0.2);
}
.report.empty { color: #565f89; }
#remarks { min-height: 100px; max-height: 280px; }
.progress-section { margin: 0.5rem 0 0.35rem; }
.progress-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
}
.progress-row .progress-label { font-size: 0.8rem; color: rgba(232, 236, 247, 0.9); min-width: 6rem; }
.progress-row progress {
  flex: 1;
  height: 0.6rem;
  border-radius: 4px;
  overflow: hidden;
  accent-color: #14b8a6;
}
.progress-row progress::-webkit-progress-bar { background: rgba(86, 95, 137, 0.5); border-radius: 4px; }
.progress-row progress::-webkit-progress-value { background: #14b8a6; border-radius: 4px; }
.progress-row progress::-moz-progress-bar { background: #14b8a6; border-radius: 4px; }
.progress-pct { font-size: 0.8rem; color: rgba(232, 236, 247, 0.9); min-width: 2.5rem; }
.summary-and-image-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem;
  align-items: flex-start;
  margin-top: 0.75rem;
}
.summary-panel {
  flex: 1;
  min-width: 0;
  padding: 0.5rem;
  background: rgba(20, 22, 38, 0.6);
  border-radius: 8px;
  border: 1px solid rgba(122, 162, 247, 0.2);
}
.summary-panel-heading {
  font-size: 0.9rem;
  margin: 0 0 0.35rem;
  color: #a5b8f0;
  font-weight: 600;
}
.random-image-panel {
  flex: 0 0 auto;
  width: 320px;
  max-width: 50%;
  padding: 0.5rem;
  background: rgba(20, 22, 38, 0.6);
  border-radius: 8px;
  border: 1px solid rgba(122, 162, 247, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.random-image-panel .random-image-img {
  width: 100%;
  max-width: 360px;
  height: 260px;
  object-fit: contain;
  background: rgba(26, 27, 38, 0.9);
  border-radius: 6px;
  border: 1px solid rgba(122, 162, 247, 0.2);
}
.random-image-panel .random-image-caption {
  font-size: 0.75rem;
  color: rgba(232, 236, 247, 0.75);
  margin: 0.35rem 0 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.summary-line {
  font-size: 0.85rem;
  color: #14b8a6;
  margin: 0;
  white-space: pre-line;
  font-weight: 600;
}
.summary-line:empty { display: none; }
@media (max-width: 900px) {
  .two-column-main { flex-direction: column; }
  .right-column { width: 100%; }
  .summary-and-image-row { flex-wrap: wrap; }
  .random-image-panel { max-width: 100%; width: 100%; }
}
