:root { color-scheme: light dark; }
body { font-family: Arial, sans-serif; margin: 0; min-height: 100vh; background: #f4f6f8; }
.page { width: min(1700px, 96vw); margin: 2rem auto; display: grid; grid-template-columns: repeat(4, minmax(280px, 1fr)); gap: 1rem; }
.panel { background: white; border-radius: 12px; padding: 1.2rem; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); }
.panel h1 { margin-top: 0; margin-bottom: 0.4rem; font-size: 1.35rem; }
.convert-form { display: grid; gap: 0.9rem; margin-top: 1rem; }
.file-summary { margin: -0.3rem 0 0; font-size: 0.92rem; color: #4f5b66; }
.mode-row { display: block; }
.mode-row input[type="radio"] { margin-right: 0.35rem; vertical-align: middle; }
.compression-field { margin-top: 0.35rem; }
.compression-field input[type="number"] { width: 30px; height: 0.95rem; padding: 0.02rem 0.08rem; font-size: 0.78rem; line-height: 1; margin: 0; }
.progress-wrap { display: none; gap: 0.35rem; }
.progress-wrap.is-visible { display: grid; }
.progress-label { font-size: 0.92rem; font-weight: 700; }
.progress-track { width: 100%; height: 10px; border-radius: 999px; overflow: hidden; }
.progress-bar { width: 0; height: 100%; border-radius: 999px; transition: width 0.4s ease; }
.actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.btn { border-radius: 8px; padding: 0.7rem 0.9rem; cursor: pointer; font-weight: 700; }

.panel-png .progress-label, .panel-png .btn-outline { color: #0b5ed7; }
.panel-png .progress-track { background: #dde7f7; }
.panel-png .progress-bar, .panel-png .btn-filled { background: #0b5ed7; color: white; }
.panel-png .btn-outline { border: 2px solid #0b5ed7; background: transparent; }
.panel-png .btn-filled { border: none; }

.panel-jpg .progress-label, .panel-jpg .btn-outline { color: #d63384; }
.panel-jpg .progress-track { background: #f9d7e8; }
.panel-jpg .progress-bar, .panel-jpg .btn-filled { background: #d63384; color: white; }
.panel-jpg .btn-outline { border: 2px solid #d63384; background: transparent; }
.panel-jpg .btn-filled { border: none; }

.panel-pdf .progress-label, .panel-pdf .btn-outline { color: #198754; }
.panel-pdf .progress-track { background: #d8f2e5; }
.panel-pdf .progress-bar, .panel-pdf .btn-filled { background: #198754; color: white; }
.panel-pdf .btn-outline { border: 2px solid #198754; background: transparent; }
.panel-pdf .btn-filled { border: none; }

.panel-avif .progress-label, .panel-avif .btn-outline { color: #b8860b; }
.panel-avif .progress-track { background: #f8e9bf; }
.panel-avif .progress-bar, .panel-avif .btn-filled { background: #b8860b; color: white; }
.panel-avif .btn-outline { border: 2px solid #b8860b; background: transparent; }
.panel-avif .btn-filled { border: none; }

@media (max-width: 1400px) { .page { grid-template-columns: repeat(2, minmax(280px, 1fr)); } }
@media (max-width: 860px) { .page { grid-template-columns: 1fr; } }


.panel-webp .progress-label, .panel-webp .btn-outline { color: #111111; }
.panel-webp .progress-track { background: #d9d9d9; }
.panel-webp .progress-bar, .panel-webp .btn-filled { background: #111111; color: white; }
.panel-webp .btn-outline { border: 2px solid #111111; background: transparent; }
.panel-webp .btn-filled { border: none; }

.panel-tiff .progress-label, .panel-tiff .btn-outline { color: #c0c0c0; }
.panel-tiff .progress-track { background: #f5f5f5; }
.panel-tiff .progress-bar, .panel-tiff .btn-filled { background: #c0c0c0; color: #1f1f1f; }
.panel-tiff .btn-outline { border: 2px solid #c0c0c0; background: transparent; }
.panel-tiff .btn-filled { border: none; }


.panel-avif fieldset { opacity: 0.85; }
.panel-avif input[disabled] { cursor: not-allowed; }


.site-footer {
  width: min(1700px, 96vw);
  margin: 1rem auto 2rem;
  padding-top: 1rem;
  border-top: 1px solid #cfd3d9;
  text-align: center;
  font-size: 1rem;
}

.site-footer a {
  color: #165bd8;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.legal-page {
  width: min(900px, 94vw);
  margin: 2.5rem auto;
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}