/* The TinyEnough copy uses the same surfaces and color language as ItsyTools. */
:root {
  color: #152340;
  background: #f5f7fb;
}

.site-shell {
  max-width: 1180px;
  padding: 0 32px;
}

.topbar {
  height: 90px;
  border-color: #dfe6f0;
}

.brand {
  gap: 11px;
  font-size: 1.13rem;
  letter-spacing: -.035em;
}

.brand-mark {
  width: 37px;
  height: 37px;
  border-radius: 0;
  background: transparent;
  transform: none;
}

.brand-mark::before,
.brand-mark::after {
  content: none;
}

.hub-link,
footer a {
  color: #3354aa;
}

.topbar-actions .header-note {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 240px;
  color: #63728c;
  text-align: end;
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: normal;
}

.topbar-actions .header-note .lock {
  color: #2c62df;
  font-size: 1rem;
}

.language-control {
  color: #53637d;
}

.language-control select {
  border-color: #cbd6e6;
  border-radius: 8px;
  color: #172741;
}

.language-control select:focus {
  border-color: #2457d5;
  box-shadow: 0 0 0 3px #dce8ff;
}

.intro {
  display: block;
  max-width: 730px;
  padding: 47px 0 30px;
}

.eyebrow {
  margin-bottom: 13px;
  color: #2457d5;
}

.intro h1 {
  font-size: clamp(2.25rem, 4vw, 3.55rem);
  line-height: 1.09;
  letter-spacing: -.055em;
  font-weight: 800;
}

.intro > p {
  max-width: 620px;
  margin: 16px 0 0;
  color: #5e6c84;
  font-size: 1.05rem;
  line-height: 1.55;
}

.workspace {
  grid-template-columns: minmax(0, 1.45fr) minmax(315px, .9fr);
  gap: 22px;
  align-items: start;
}

.editor-panel,
.result-panel {
  border: 1px solid #dce4ef;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 8px 30px rgba(20, 42, 84, .045);
  padding: 27px;
}

.section-head h2,
.result-top h2 {
  color: #152340;
  font-size: 1.16rem;
  font-weight: 750;
}

.step,
.step-light {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #eaf0ff;
  color: #2457d5;
  font-size: .8rem;
}

.dropzone {
  min-height: 232px;
  border-color: #a7b9db;
  border-radius: 14px;
  background: #f8faff;
}

.dropzone:hover,
.dropzone.dragging,
.dropzone:focus-within {
  border-color: #2457d5;
  background: #e8efff;
}

.upload-icon,
.select-link,
.change-file {
  color: #2457d5;
}

.file-summary {
  border-color: #dce4ef;
  border-radius: 11px;
  background: #f7f9fc;
}

.presets {
  gap: 9px;
}

.preset {
  border-color: #cbd6e6;
  border-radius: 10px;
  color: #293a57;
}

.preset:hover {
  border-color: #8eabdf;
}

.preset.active {
  border-color: #2457d5;
  background: #eaf0ff;
  color: #1746bb;
}

.preset.active span {
  color: #516da7;
}

.field {
  color: #293a57;
}

.field input,
.field select {
  height: 50px;
  border-color: #cbd6e6;
  border-radius: 9px;
  color: #172741;
}

.field input:focus,
.field select:focus {
  border-color: #2457d5;
  box-shadow: 0 0 0 3px #dce8ff;
}

.advanced {
  border-color: #e6ebf3;
}

.advanced summary,
.advanced summary span {
  color: #3354aa;
}

.primary-button {
  border: 1px solid #2457d5;
  border-radius: 10px;
  background: #2457d5;
  box-shadow: 0 5px 11px rgba(36, 87, 213, .16);
}

.primary-button:not(:disabled):hover {
  background: #1746bb;
}

.primary-button:disabled {
  border-color: #9eb1da;
  background: #9eb1da;
  box-shadow: none;
}

.result-panel {
  color: #152340;
  min-height: 560px;
  overflow: hidden;
}

.result-panel::before {
  display: none;
}

.empty-result {
  padding: 60px 0;
}

.empty-result h3 {
  color: #152340;
}

.empty-result p,
.result-note {
  color: #64738d;
}

.graphic-frame {
  border-color: #a7b9db;
  background: #eaf0ff;
  box-shadow: 13px 8px 0 -1px #fff, 13px 8px 0 1px #c3d1eb;
}

.graphic-frame::after {
  background: #a7b9db;
  box-shadow: 0 17px 0 #a7b9db;
}

.graphic-check {
  border-color: #fff;
  background: #d9f5e9;
  color: #167259;
}

.result-bottom {
  border-color: #dfe6f0;
  color: #63728c;
}

.lock-icon {
  color: #2457d5;
}

.output-image-wrap {
  background-color: #eef3fb;
  border: 1px solid #dce4ef;
}

.result-metrics span {
  color: #687790;
}

.result-metrics strong {
  color: #152340;
}

.metric-divider {
  color: #8ba5dc;
}

.savings-line {
  color: #5e6c84;
}

.savings-line span:first-child {
  color: #167259;
}

.download-button {
  border-radius: 9px;
  background: #163c9f;
  color: #fff;
}

.download-button:hover {
  background: #0d2d81;
}

.start-over {
  color: #3354aa;
}

.guide {
  gap: 45px;
  margin-top: 45px;
  padding: 36px 0 55px;
  border-top: 1px solid #dfe6f0;
  border-bottom: 0;
}

.guide h2 {
  color: #152340;
}

.guide-copy p {
  color: #5e6c84;
}

footer {
  gap: 20px;
  border-top: 1px solid #dfe6f0;
  color: #687790;
  font-size: .9rem;
}

.drop-subtitle {
  margin-top: 3px;
  color: #5e6c84;
  font-size: .9rem;
}

.batch-list {
  margin-top: 15px;
  border: 1px solid #dce4ef;
  border-radius: 12px;
  background: #f8faff;
  overflow: hidden;
}

.batch-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid #dce4ef;
  font-size: .9rem;
}

.batch-text-button {
  border: 0;
  padding: 5px;
  background: transparent;
  color: #3354aa;
  font: inherit;
  font-size: .875rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.batch-text-button:disabled { opacity: .5; cursor: default; }
.batch-files { max-height: 365px; margin: 0; padding: 0; list-style: none; overflow: auto; }
.batch-file { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 10px 12px; border-bottom: 1px solid #e6ebf3; }
.batch-file:last-child { border-bottom: 0; }
.batch-file[data-status="failed"] { background: #fff8f6; }
.batch-thumb { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 8px; object-fit: cover; background: #eaf0ff; }
.batch-info { min-width: 0; flex: 1 1 100px; }
.batch-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; font-weight: 700; }
.batch-meta { margin-top: 3px; color: #64738d; font-size: .82rem; line-height: 1.35; overflow-wrap: anywhere; }
.batch-file[data-status="failed"] .batch-meta { color: #a1322c; }
.batch-download { flex: none; padding: 7px 8px; border-radius: 8px; background: #eaf0ff; color: #1746bb; font-size: .8rem; font-weight: 700; text-decoration: none; }
.batch-remove { flex: none; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: #51617a; font-size: 1.25rem; cursor: pointer; }
.batch-remove:hover { background: #eaf0ff; }
.batch-remove:disabled { opacity: .5; cursor: default; }
.batch-progress { display: block; width: 100%; height: 8px; margin-top: 15px; accent-color: #2457d5; }
.batch-progress-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.batch-progress-line p { margin: 9px 0 0; color: #51617a; font-size: .88rem; }
.batch-summary { margin: 16px 0 0; color: #51617a; font-size: .9rem; font-weight: 650; }
.result-navigation {
  direction: ltr;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
}
.result-nav-button {
  width: 38px;
  height: 38px;
  border: 1px solid #cbd6e6;
  border-radius: 10px;
  background: #f8faff;
  color: #2457d5;
  font: inherit;
  font-size: 1.25rem;
  cursor: pointer;
}
.result-nav-button:hover:not(:disabled) { border-color: #2457d5; background: #eaf0ff; }
.result-nav-button:disabled { opacity: .45; cursor: default; }
.result-position { min-width: 0; text-align: center; font-size: .85rem; }
.result-position strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-position span { display: block; margin-top: 2px; color: #687790; }
.batch-zip-button { margin-top: 10px; background: #2457d5; cursor: pointer; }
.batch-zip-button:disabled { opacity: .65; cursor: default; }
.batch-zip-again { display: block; width: max-content; margin: 12px auto 0; }

@media (max-width: 480px) {
  .batch-file { flex-wrap: wrap; }
  .batch-info { flex-basis: calc(100% - 62px); }
  .batch-download { margin-inline-start: 57px; }
}

@media (max-width: 950px) {
  .topbar-actions .header-note {
    display: none;
  }

  .workspace {
    grid-template-columns: minmax(0, 1.2fr) minmax(290px, .8fr);
  }
}

@media (max-width: 800px) {
  .site-shell {
    padding: 0 20px;
  }

  .topbar {
    height: 72px;
  }
}

@media (max-width: 700px) {
  .site-shell {
    padding: 0 20px;
  }

  .topbar {
    height: 72px;
  }

  .language-control select {
    max-width: 140px;
  }

  .brand {
    font-size: 1rem;
  }

  .intro {
    padding: 35px 4px 26px;
  }

  .intro h1 {
    font-size: clamp(2.25rem, 9vw, 3.45rem);
  }

  .workspace {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .editor-panel,
  .result-panel {
    padding: 22px;
    border-radius: 18px;
  }

  .result-panel {
    min-height: 300px;
  }

  .guide {
    margin-top: 20px;
    padding: 35px 4px 45px;
  }
}

@media (max-width: 480px) {
  .site-shell {
    padding: 0 15px;
  }
}

@media (max-width: 420px) {
  .topbar {
    height: auto;
    min-height: 69px;
    flex-wrap: wrap;
    padding: 13px 0;
    row-gap: 10px;
  }

  .topbar-actions {
    width: 100%;
    justify-content: flex-end;
    margin-inline-start: 0;
  }

  .language-control select {
    max-width: 140px;
  }

  footer #year {
    display: inline;
  }
}