/* ============================================================
   UNIVERSAL COMBINED CSS
   Generated: style.main.css
   Date: 2026-09-28 03:18:00
   Every original CSS file is marked below.
   ============================================================ */

/* ============================================================
   SOURCE-START: base.css
   ------------------------------------------------------------
   Original location: base.css
   ============================================================ */

/* ============================================================
   Bulk Image Compressor — base.css
   Classes  : ic-*
   Approach : Mobile-first (base = mobile, @media min-width = desktop)
   Brand    : #42B5A4 (teal) — same system as Resize / Watermark / Convert
   ============================================================ */


/* ══════════════════════════════════════════
   0. BASE / RESET / BRAND TOKENS
   ══════════════════════════════════════════ */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

.ic-wrap,
.ic-wrap * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

.ic-wrap {
  /* ── Brand color — single source of truth, never hardcoded elsewhere ── */
  --ic-brand: #42B5A4;
  --ic-brand-dark: #2E8577;
  --ic-brand-soft: #E8F8F6;

  --ic-ink: #1a1a22;
  --ic-ink-soft: #55555f;
  --ic-line: #e4e4ee;
  --ic-line-strong: #c4c4d4;
  --ic-bg: #f5f5fa;
  --ic-error: #c0392b;
  --ic-error-soft: #fbebe9;
  --ic-success: #1e8e5a;
  --ic-success-soft: #e9f7f0;

  font-size: 15px;
  max-width: 920px;
  margin: 0 auto;
  padding: 24px 16px 56px;
  touch-action: manipulation;
  overscroll-behavior-y: contain;
}


/* ══════════════════════════════════════════
   1. HEADER
   ══════════════════════════════════════════ */
.ic-header {
  text-align: center;
  margin-bottom: 24px;
}

.ic-header__title {
  font-weight: 800;
  font-size: clamp(1.75rem, 6.5vw, 2.6rem);
  letter-spacing: -1px;
  line-height: 1.15;
  color: var(--ic-ink);
  margin: 0 0 10px;
}

.ic-header__title strong {
  font-weight: 800;
  color: var(--ic-brand);
}

/* Still inside the <h1> — search engines read it as headline text —
   but sized down so the three modes read as a feature strip, not a
   second line of the big hero font. */
.ic-header__title-modes {
  display: block;
  margin-top: 6px;
  font-size: clamp(13px, 2.1vw, 15px);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ic-brand-dark);
}

.ic-header__subtitle {
  font-size: clamp(15px, 2.6vw, 17px);
  font-weight: 700;
  color: var(--ic-ink);
  line-height: 1.55;
  margin: 0;
}

.ic-header__subtitle .ic-header__formats {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 6px;
  margin-top: 6px;
  font-size: clamp(13.5px, 2.2vw, 15px);
  font-weight: 600;
  color: var(--ic-ink-soft);
}

.ic-header__formats a {
  font-weight: 800;
  color: var(--ic-brand-dark);
  text-decoration: none;
  border-bottom: 1.5px solid var(--ic-brand-soft);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.ic-header__formats a:hover,
.ic-header__formats a:focus-visible {
  color: var(--ic-brand);
  border-bottom-color: var(--ic-brand);
}


/* ══════════════════════════════════════════
   2. STEPPER
   ══════════════════════════════════════════ */
.ic-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 28px;
}

.ic-stepper__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.ic-stepper__dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  color: #9999a2;
  background: #fff;
  border: 1.5px solid var(--ic-line);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ic-stepper__step.is-active .ic-stepper__dot {
  background: var(--ic-brand);
  border-color: var(--ic-brand);
  color: #fff;
}

.ic-stepper__step.is-done .ic-stepper__dot {
  background: var(--ic-brand-soft);
  border-color: var(--ic-brand);
  color: var(--ic-brand);
}

.ic-stepper__dot--export {
  width: auto;
  border-radius: 9999px;
  padding: 0 16px;
  font-size: 13px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.ic-stepper__label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ic-ink-soft);
}

.ic-stepper__line {
  width: 28px;
  height: 2px;
  background: var(--ic-line);
  margin-top: -18px;
}


/* ══════════════════════════════════════════
   3. PANELS
   ══════════════════════════════════════════ */
.ic-panel {
  display: none;
}

.ic-panel.is-active {
  display: block;
  animation: icFadeIn 0.28s ease both;
}

@keyframes icFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ══════════════════════════════════════════
   4. ACTION BUTTONS (shared across steps)
   ══════════════════════════════════════════ */
.ic-actions {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

.ic-btn {
  flex: 1;
  height: 48px;
  border-radius: 9999px;
  font-family: inherit;
  font-weight: 800;
  font-size: 16px;
  border: 1.5px solid transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.ic-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ic-btn--primary {
  background: var(--ic-brand);
  color: #fff;
  box-shadow: 0 2px 10px rgba(66,181,164,0.28);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.ic-btn--primary:active {
  transform: scale(0.98);
}

.ic-btn--ghost {
  background: #fff;
  border-color: var(--ic-line);
  color: var(--ic-ink);
}

.ic-btn--ghost:active {
  background: var(--ic-bg);
}

.ic-btn.is-hidden {
  display: none;
}


/* ══════════════════════════════════════════
   5. TOAST
   ══════════════════════════════════════════ */
.ic-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  background: var(--ic-ink);
  color: #fff;
  padding: 12px 22px;
  border-radius: 9999px;
  font-size: 14.5px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 999;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  max-width: 90vw;
  text-align: center;
}

.ic-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.ic-toast.is-error {
  background: var(--ic-error);
}


/* ══════════════════════════════════════════
   6. DESKTOP ENHANCEMENTS (≥768px)
   ══════════════════════════════════════════ */
@media (min-width: 768px) {
  .ic-wrap {
    padding: 40px 24px 72px;
  }

  .ic-header__subtitle {
    font-size: 18px;
  }

  .ic-stepper {
    gap: 10px;
    margin-bottom: 36px;
  }

  .ic-stepper__line {
    width: 56px;
  }

  .ic-btn--ghost:hover {
    border-color: var(--ic-ink);
  }

  .ic-btn--primary:hover {
    box-shadow: 0 4px 16px rgba(66,181,164,0.36);
  }

  .ic-actions {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* ══════════════════════════════════════════
   7. ACCESSIBILITY
   ══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .ic-panel.is-active {
    animation: none;
  }
}

/* ============================================================
   SOURCE-END: base.css
   ============================================================ */

/* ============================================================
   SOURCE-START: compare.css
   ------------------------------------------------------------
   Original location: compare.css
   ============================================================ */

/* ============================================================
   Bulk Image Compressor — compare.css
   Before / after comparison slider
   Used inside a per-image modal (opened from a card or a result row)
   ============================================================ */

.ic-compare-overlay {
  position: fixed;
  inset: 0;
  z-index: 998;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: rgba(26,26,34,0.55);
  padding: 0;
}

.ic-compare-overlay.is-visible {
  display: flex;
}

.ic-compare-modal {
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 16px 16px 24px;
  animation: icSheetUp 0.24s ease both;
}

@keyframes icSheetUp {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.ic-compare-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.ic-compare-modal__title {
  margin: 0;
  font-size: 16.5px;
  font-weight: 800;
  color: var(--ic-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ic-compare-modal__close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--ic-bg);
  color: var(--ic-ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ic-compare-modal__close svg {
  width: 15px;
  height: 15px;
}


/* ── The actual slider ── */
.ic-compare {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background:
    linear-gradient(45deg, #e9e9ef 25%, transparent 25%) -10px 0/ 16px 16px,
    linear-gradient(-45deg, #e9e9ef 25%, transparent 25%) -10px 0/ 16px 16px,
    #fafafd;
  touch-action: none;
  user-select: none;
  cursor: ew-resize;
}

.ic-compare__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.ic-compare__after-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  width: var(--ic-compare-pos, 50%);
}

.ic-compare__after-wrap .ic-compare__img {
  width: var(--ic-compare-imgw, 100%);
  max-width: none;
}

.ic-compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ic-compare-pos, 50%);
  width: 3px;
  background: #fff;
  transform: translateX(-50%);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}

.ic-compare__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  box-shadow: 0 2px 10px rgba(26,26,34,0.25);
}

.ic-compare__grip svg {
  width: 13px;
  height: 13px;
  color: var(--ic-ink-soft);
}

.ic-compare__tag {
  position: absolute;
  bottom: 10px;
  padding: 4px 10px;
  border-radius: 9999px;
  background: rgba(26,26,34,0.65);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  pointer-events: none;
}

.ic-compare__tag--before {
  left: 10px;
}

.ic-compare__tag--after {
  right: 10px;
}


/* ── Stats row under the slider ── */
.ic-compare-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.ic-compare-stats__box {
  padding: 12px;
  border-radius: 12px;
  background: var(--ic-bg);
  text-align: center;
}

.ic-compare-stats__box--after {
  background: var(--ic-success-soft);
}

.ic-compare-stats__label {
  margin: 0 0 4px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--ic-ink-soft);
}

.ic-compare-stats__value {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  color: var(--ic-ink);
}

.ic-compare-stats__box--after .ic-compare-stats__value {
  color: var(--ic-success);
}

.ic-compare-savings {
  margin: 12px 0 0;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  color: var(--ic-success);
}


/* ══════════════════════════════════════════
   DESKTOP (≥768px)
   ══════════════════════════════════════════ */
@media (min-width: 768px) {
  .ic-compare-overlay {
    align-items: center;
    padding: 24px;
  }

  .ic-compare-modal {
    border-radius: 20px;
    padding: 20px;
    max-height: 88vh;
  }

  .ic-compare-modal__close:hover {
    background: var(--ic-line);
  }
}

/* ============================================================
   SOURCE-END: compare.css
   ============================================================ */

/* ============================================================
   SOURCE-START: controls.css
   ------------------------------------------------------------
   Original location: controls.css
   ============================================================ */

/* ============================================================
   Bulk Image Compressor — controls.css
   Step 2 — Global settings panel
   ============================================================ */

.ic-settings {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px;
  border-radius: 18px;
  background: var(--ic-bg);
  margin-bottom: 20px;
}


/* ══════════════════════════════════════════
   1. MODE TABS — Quality slider vs Target size
   ══════════════════════════════════════════ */
.ic-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ic-tabs__btn {
  height: 38px;
  padding: 0 14px;
  border-radius: 9999px;
  border: 1.5px solid var(--ic-line);
  background: #fff;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ic-ink-soft);
  cursor: pointer;
  touch-action: manipulation;
}

.ic-tabs__btn.is-active {
  border-color: var(--ic-brand);
  color: var(--ic-brand);
  background: var(--ic-brand-soft);
}


/* ══════════════════════════════════════════
   1b. AUTO MODE NOTE
   ══════════════════════════════════════════ */
.ic-auto-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  background: #fff;
  border: 1.5px dashed var(--ic-line-strong);
}

.ic-auto-note svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--ic-brand);
  margin-top: 1px;
}

.ic-auto-note__title {
  margin: 0 0 3px;
  font-size: 15px;
  font-weight: 800;
  color: var(--ic-ink);
}

.ic-auto-note__body {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ic-ink-soft);
  line-height: 1.5;
}


/* ══════════════════════════════════════════
   2. MODE PANELS
   ══════════════════════════════════════════ */
.ic-mode-panel {
  display: none;
  flex-direction: column;
  gap: 14px;
}

.ic-mode-panel.is-active {
  display: flex;
}


/* ── Quality slider row ── */
.ic-pctslider-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ic-pctslider-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ic-pctslider-row__head label {
  font-size: 15px;
  font-weight: 800;
  color: var(--ic-ink);
}

.ic-pctslider-row__control {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ic-pctslider-row__control input[type="range"] {
  flex: 1;
  height: 40px;
  accent-color: var(--ic-brand);
  touch-action: manipulation;
}

.ic-pctslider-row__control span {
  min-width: 46px;
  text-align: right;
  font-weight: 800;
  color: var(--ic-brand);
}


/* ── Presets (quality shortcuts) ── */
.ic-presets {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.ic-presets::-webkit-scrollbar {
  height: 4px;
}

.ic-presets::-webkit-scrollbar-thumb {
  background: var(--ic-line-strong);
  border-radius: 9999px;
}

.ic-preset {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 14px;
  border-radius: 14px;
  border: 1.5px solid var(--ic-line);
  background: #fff;
  cursor: pointer;
  touch-action: manipulation;
}

.ic-preset.is-active {
  border-color: var(--ic-brand);
  background: var(--ic-brand-soft);
}

.ic-preset__name {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ic-ink);
  white-space: nowrap;
}

.ic-preset__dims {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ic-ink-soft);
  white-space: nowrap;
}


/* ── Target size mode ── */
.ic-field-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ic-field-row label {
  font-size: 15px;
  font-weight: 800;
  color: var(--ic-ink);
}

.ic-field-hint {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ic-ink-soft);
  line-height: 1.5;
}

.ic-target-input {
  display: flex;
  gap: 8px;
}

.ic-target-input input[type="number"] {
  flex: 1;
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1.5px solid var(--ic-line);
  background: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--ic-ink);
  min-width: 0;
}

.ic-target-input input[type="number"]:focus-visible {
  outline: none;
  border-color: var(--ic-brand);
}

.ic-select--unit {
  flex: 0 0 84px;
}


/* ══════════════════════════════════════════
   3. SHARED ROW — format select + strip metadata
   ══════════════════════════════════════════ */
.ic-settings__row {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ic-line);
}

.ic-select {
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1.5px solid var(--ic-line);
  background: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--ic-ink);
  width: 100%;
}

.ic-select:focus-visible {
  outline: none;
  border-color: var(--ic-brand);
}

.ic-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ic-ink);
  cursor: pointer;
  touch-action: manipulation;
}

.ic-checkbox input[type="checkbox"] {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  accent-color: var(--ic-brand);
  cursor: pointer;
}


/* ══════════════════════════════════════════
   DESKTOP (≥768px)
   ══════════════════════════════════════════ */
@media (min-width: 768px) {
  .ic-settings {
    padding: 24px;
  }

  .ic-settings__row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }

  .ic-settings__row .ic-field-row {
    flex: 1;
    max-width: 260px;
  }

  .ic-tabs__btn:hover {
    border-color: var(--ic-brand);
    color: var(--ic-brand);
  }

  .ic-preset:hover {
    border-color: var(--ic-brand);
  }
}

/* ═══════════════════════════════════════════════════
   v6 — the shared settings row carries four controls now (format,
   longest side, engine, strip metadata) instead of two, so the
   flex row above can no longer hold them without squeezing.

   This block is deliberately last in the file: the ≥768px media query
   earlier sets `.ic-settings__row .ic-field-row { max-width: 260px }`,
   which would cap the grid tracks. Same specificity, later in source,
   so these win — rather than fighting it with !important.
═══════════════════════════════════════════════════ */
.ic-settings__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px 18px;
  align-items: end;
  padding-top: 14px;
  border-top: 1px solid var(--ic-line);
}

.ic-settings__row .ic-field-row {
  max-width: none;
  min-width: 0;
}

.ic-settings__row .ic-checkbox {
  align-self: center;
}

.ic-settings__row + .ic-field-hint {
  margin-top: 10px;
}

@media (max-width: 560px) {
  .ic-settings__row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   SOURCE-END: controls.css
   ============================================================ */

/* ============================================================
   SOURCE-START: dropzone.css
   ------------------------------------------------------------
   Original location: dropzone.css
   ============================================================ */

/* ============================================================
   Bulk Image Compressor — dropzone.css
   Step 1 — Upload screen
   ============================================================ */

.ic-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  margin: 8px auto 0;
  padding: 40px 24px;
  border-radius: 24px;
  cursor: pointer;
}

.ic-dropzone__ring {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  border: 1.5px dashed transparent;
  box-shadow: 0 0 0 0 rgba(66, 181, 164, 0);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
  pointer-events: none;
}

.ic-dropzone.is-dragover .ic-dropzone__ring {
  border-color: rgba(66, 181, 164, 0.45);
  box-shadow: 0 0 0 8px rgba(66, 181, 164, 0.08);
}

.ic-dropzone__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 32px;
  border-radius: 9999px;
  background: var(--ic-brand);
  border: 1.5px solid var(--ic-brand);
  color: #fff;
  font-weight: 800;
  font-size: 17.5px;
  letter-spacing: -0.1px;
  box-shadow: 0 2px 10px rgba(66,181,164,0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.ic-dropzone__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #fff;
}

.ic-dropzone:hover .ic-dropzone__button {
  transform: translateY(-2px);
  background: var(--ic-brand-dark);
  border-color: var(--ic-brand-dark);
  box-shadow: 0 14px 32px rgba(66,181,164,0.28);
}

.ic-dropzone:active .ic-dropzone__button {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 6px 16px rgba(66,181,164,0.24);
}

.ic-dropzone:focus-visible {
  outline: none;
}

.ic-dropzone:focus-visible .ic-dropzone__button {
  box-shadow: 0 0 0 4px var(--ic-brand-soft), 0 8px 24px rgba(66,181,164,0.28);
}

.ic-dropzone.is-dragover .ic-dropzone__button {
  transform: translateY(-2px);
  background: var(--ic-brand-dark);
  border-color: var(--ic-brand-dark);
  box-shadow: 0 14px 32px rgba(66,181,164,0.32);
}

.ic-dropzone__divider {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 320px;
  margin-top: 28px;
  color: #a3a3ae;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.ic-dropzone__divider::before,
.ic-dropzone__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--ic-line-strong));
}

.ic-dropzone__divider::after {
  background: linear-gradient(to left, transparent, var(--ic-line-strong));
}

.ic-dropzone__hint {
  margin: 16px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: #a3a3ae;
  text-align: center;
  line-height: 1.5;
}

.ic-dropzone__trust {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 16px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ic-ink-soft);
}

.ic-dropzone__trust svg {
  width: 15px;
  height: 15px;
  color: var(--ic-brand);
  flex-shrink: 0;
}


/* ══════════════════════════════════════════
   DESKTOP (≥768px)
   ══════════════════════════════════════════ */
@media (min-width: 768px) {
  .ic-dropzone {
    max-width: 520px;
    padding: 56px 24px;
  }

  .ic-dropzone__button {
    height: 60px;
    padding: 0 36px;
    font-size: 18px;
  }
}

/* ============================================================
   SOURCE-END: dropzone.css
   ============================================================ */

/* ============================================================
   SOURCE-START: export.css
   ------------------------------------------------------------
   Original location: export.css
   ============================================================ */

/* ============================================================
   Bulk Image Compressor — export.css
   Step 3 — Compressing progress + results + download
   ============================================================ */

/* ══════════════════════════════════════════
   1. PROGRESS BAR
   ══════════════════════════════════════════ */
.ic-progress {
  display: none;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  padding: 16px 18px;
  border: 1px solid var(--ic-line);
  border-radius: 14px;
  background: #fff;
}

.ic-progress.is-visible {
  display: flex;
}

.ic-progress__bar {
  position: relative;
  height: 8px;
  border-radius: 9999px;
  background: var(--ic-line);
  overflow: hidden;
}

.ic-progress__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  width: var(--ic-progress, 0%);
  background: var(--ic-brand);
  border-radius: 9999px;
  transition: width 0.35s ease;
}

/* Shown briefly right after "Compress all" is tapped and while the
   codecs are warming up — the bar width is static during this phase,
   so a gentle pulse keeps it reading as "working" rather than "stuck". */
.ic-progress__bar.is-loading::after {
  animation: icBarPulse 1s ease-in-out infinite;
}

@keyframes icBarPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.ic-progress__foot {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ic-ink-soft);
}


/* ══════════════════════════════════════════
   2. SUMMARY BANNER
   ══════════════════════════════════════════ */
.ic-summary {
  display: none;
  margin: 0 0 20px;
  padding: 18px;
  border-radius: 16px;
  background: var(--ic-success-soft);
  color: var(--ic-success);
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  line-height: 1.6;
}

.ic-summary.is-visible {
  display: block;
}

.ic-summary strong {
  font-size: 22px;
}


/* ══════════════════════════════════════════
   3. RESULTS LIST
   ══════════════════════════════════════════ */
.ic-results {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
  overflow: hidden;
  border-radius: 14px;
}

/* Ambient "still working" sweep — a soft glow band drifting top to
   bottom over the whole list on a loop, independent of which single
   row is actually compressing right now. Purely decorative: the real
   per-row state (spinner / done / queued) is what's actually true,
   this just keeps the whole batch feeling alive while it runs.
   Stops the instant is-compressing is removed (batch finished). */
.ic-results.is-compressing::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 140px;
  top: -140px;
  background: linear-gradient(to bottom, transparent, rgba(66,181,164,0.16), transparent);
  pointer-events: none;
  animation: icResultsSweep 2.4s ease-in-out infinite;
}

@keyframes icResultsSweep {
  0%   { top: -140px; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.ic-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1.5px solid var(--ic-line);
  border-radius: 14px;
  background: #fff;
  transition: opacity 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.ic-result__thumb {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--ic-bg);
}

.ic-result__body {
  flex: 1;
  min-width: 0;
}

.ic-result__name {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--ic-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ic-result__sizes {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ic-ink-soft);
}

.ic-result__sizes s {
  opacity: 0.7;
  text-decoration-color: var(--ic-error);
}

.ic-result__sizes b {
  color: var(--ic-success);
  font-weight: 800;
}

.ic-result__badge {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 9999px;
  background: var(--ic-success-soft);
  color: var(--ic-success);
  font-size: 13px;
  font-weight: 800;
}

.ic-result__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.ic-result__icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--ic-bg);
  color: var(--ic-ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ic-result__icon-btn svg {
  width: 15px;
  height: 15px;
}

.ic-result__icon-btn--compare:active,
.ic-result__icon-btn--download:active {
  background: var(--ic-brand-soft);
  color: var(--ic-brand);
}

/* Not reached yet — sits quietly at the back of the queue */
.ic-result.is-pending {
  opacity: 0.55;
}

.ic-result.is-pending .ic-result__badge {
  background: var(--ic-bg);
  color: var(--ic-ink-soft);
}

/* The one image actively being compressed right now — full opacity,
   a brand-colored outline and a spinner so it visibly stands out as
   the queue works its way down the list. */
.ic-result.is-processing {
  opacity: 1;
  border-color: var(--ic-brand);
  background: var(--ic-brand-soft);
}

.ic-result.is-processing .ic-result__badge {
  background: transparent;
  padding: 0;
}

.ic-result__spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2.5px solid var(--ic-brand-soft);
  border-top-color: var(--ic-brand);
  animation: icSpin 0.7s linear infinite;
}

.ic-result.is-error .ic-result__badge {
  background: var(--ic-error-soft);
  color: var(--ic-error);
}

/* The professional "yes, done" moment: a small check pops in next to
   the savings percentage the instant a row finishes — replacing the
   badge's whole innerHTML (spinner → check + text) is what makes the
   pop-in replay every time, since it's a freshly inserted element. */
.ic-result__check {
  display: inline-flex;
  margin-right: 3px;
  animation: icCheckPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.ic-result__check svg {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
}

@keyframes icCheckPop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}


/* ══════════════════════════════════════════
   DESKTOP (≥768px)
   ══════════════════════════════════════════ */
@media (min-width: 768px) {
  .ic-result {
    padding: 12px 14px;
  }

  .ic-result__thumb {
    width: 56px;
    height: 56px;
  }

  .ic-result__icon-btn:hover {
    background: var(--ic-brand-soft);
    color: var(--ic-brand);
  }
}

/* ============================================================
   SOURCE-END: export.css
   ============================================================ */

/* ============================================================
   SOURCE-START: gallery.css
   ------------------------------------------------------------
   Original location: gallery.css
   ============================================================ */

/* ============================================================
   Bulk Image Compressor — gallery.css
   Step 2 — Toolbar + image grid cards
   ============================================================ */

/* ══════════════════════════════════════════
   1. TOOLBAR
   ══════════════════════════════════════════ */
.ic-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.ic-toolbar__count {
  font-size: 15px;
  font-weight: 800;
  color: var(--ic-ink-soft);
}

.ic-toolbar__actions {
  display: flex;
  gap: 8px;
}

.ic-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border-radius: 9999px;
  border: 1.5px solid var(--ic-line);
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  color: var(--ic-ink-soft);
  cursor: pointer;
  touch-action: manipulation;
}

.ic-chip svg {
  width: 16px;
  height: 16px;
}

.ic-chip:active {
  background: var(--ic-bg);
}

.ic-chip--danger {
  color: var(--ic-error);
}

.ic-chip--danger:active {
  background: var(--ic-error-soft);
}


/* ══════════════════════════════════════════
   2. IMAGE GRID
   ══════════════════════════════════════════ */
.ic-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}

@media (min-width: 480px) {
  .ic-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}


/* ══════════════════════════════════════════
   3. CARD
   ══════════════════════════════════════════ */
.ic-card {
  position: relative;
  background: #fff;
  border: 1.5px solid var(--ic-line);
  border-radius: 16px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0; /* prevents grid items from refusing to shrink and pushing the page wider */
}

.ic-card__remove {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.92);
  color: var(--ic-error);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(26,26,34,0.15);
}

.ic-card__remove svg {
  width: 14px;
  height: 14px;
}

.ic-card__thumbwrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background:
    linear-gradient(45deg, #e9e9ef 25%, transparent 25%) -10px 0/ 16px 16px,
    linear-gradient(-45deg, #e9e9ef 25%, transparent 25%) -10px 0/ 16px 16px,
    linear-gradient(45deg, transparent 75%, #e9e9ef 75%) -10px 0/ 16px 16px,
    linear-gradient(-45deg, transparent 75%, #e9e9ef 75%) -10px 0/ 16px 16px,
    #fafafd;
}

.ic-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Per-card compression status badge — sits over the thumbnail while
   this image is queued / actively compressing in the worker */
.ic-card__status {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(26,26,34,0.45);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.ic-card.is-processing .ic-card__status {
  display: flex;
}

.ic-card__spinner {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  animation: icSpin 0.7s linear infinite;
}

@keyframes icSpin {
  to { transform: rotate(360deg); }
}

/* Savings badge — shown once this image has a compressed result */
.ic-card__savings {
  position: absolute;
  bottom: 6px;
  left: 6px;
  padding: 3px 9px;
  border-radius: 9999px;
  background: var(--ic-success);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.ic-card__savings.is-hidden {
  display: none;
}

.ic-card__meta {
  min-width: 0;
}

.ic-card__name-wrap {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ic-card__name {
  font-size: 15px;
  font-weight: 800;
  color: var(--ic-ink);
  border-bottom: 1.5px dotted var(--ic-line-strong);
  cursor: pointer;
}

.ic-card__name:hover {
  color: var(--ic-brand);
  border-bottom-color: var(--ic-brand);
}

.ic-card__ext {
  font-size: 15px;
  font-weight: 700;
  color: var(--ic-ink-soft);
}

.ic-card__name-input {
  width: 100%;
  max-width: 140px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  color: var(--ic-ink);
  border: none;
  border-bottom: 1.5px solid var(--ic-brand);
  background: transparent;
  padding: 0;
  outline: none;
}

.ic-card__info {
  margin: 2px 0 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ic-ink-soft);
}

.ic-card__info .ic-card__new-size {
  color: var(--ic-success);
  font-weight: 800;
}


/* ══════════════════════════════════════════
   DESKTOP (≥768px)
   ══════════════════════════════════════════ */
@media (min-width: 768px) {
  .ic-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
  }

  .ic-chip:hover {
    border-color: var(--ic-brand);
    color: var(--ic-brand);
  }

  .ic-chip--danger:hover {
    border-color: var(--ic-error);
    color: var(--ic-error);
  }
}

/* ============================================================
   SOURCE-END: gallery.css
   ============================================================ */

/* ============================================================
   SOURCE-START: imgtry-fonts.css
   ------------------------------------------------------------
   Original location: imgtry-fonts.css
   ============================================================ */

/* ============================================================
   ImgTry — SHARED FONT SYSTEM
   Drop this exact file into every tool project's css/ folder as
   imgtry-fonts.css, and link it FIRST (before any tool-specific
   CSS) in every index.html. Never redeclare font-family or these
   weights anywhere else — every tool should point back to this
   single file so they all stay pixel-identical.
   ============================================================ */

/* Put this <link> block in <head>, in this exact order, on every page:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700;800;900&display=swap">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/imgtry-fonts.css">

*/

:root {
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Weight scale — only ever use these five values. If a design
     needs a weight not in this list, that's a sign to reuse one
     of these rather than add a new one to the Google Fonts URL. */
  --fw-medium: 500;   /* rarely used body text */
  --fw-semibold: 600; /* body copy, hints, meta text */
  --fw-bold: 700;     /* labels, buttons, card titles */
  --fw-extrabold: 800; /* headings, primary CTAs */
  --fw-black: 900;    /* the one accent word/number in a headline */

  /* Size floor — nothing on any tool page should go below 11.5px.
     Anything smaller is genuinely hard to read, especially for
     users with weaker eyesight on a small phone screen. */
  --fs-floor: 11.5px;
}

body {
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}

/* ============================================================
   SOURCE-END: imgtry-fonts.css
   ============================================================ */

/* ============================================================
   SOURCE-START: unvhr.main.css
   ------------------------------------------------------------
   Original location: unvhr.main.css
   ============================================================ */

/* ═══════════════════════════════════════════════════════════════
   UNIVERSAL HEADER — v4.0 — CSS
   ═══════════════════════════════════════════════════════════════
   Load AFTER these two Google Fonts links are in <head>:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">

   Everything here is scoped under .aa0105-universal-header__root and
   .aa0105-universal-header__drawer so pasting this on any page never
   touches that page's own global styles.
   ═══════════════════════════════════════════════════════════════ */

/* Reset default browser margin on html/body so the header can sit
   perfectly flush at the top and both sides with zero gap, on any
   screen size — most browsers add an 8px default body margin which
   otherwise leaves a visible border around a full-width sticky header. */
html,
body {
  margin: 0;
  padding: 0;
}

.aa0105-universal-header__root,
.aa0105-universal-header__root *,
.aa0105-universal-header__root *::before,
.aa0105-universal-header__root *::after,
.aa0105-universal-header__drawer,
.aa0105-universal-header__drawer *,
.aa0105-universal-header__drawer *::before,
.aa0105-universal-header__drawer *::after {
  box-sizing: border-box;
}

.aa0105-universal-header__root {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 500;
  background: #ffffff;
  border-bottom: 1px solid #eceef1;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.aa0105-universal-header__root--scrolled {
  border-color: transparent;
  box-shadow: 0 4px 18px rgba(20, 20, 30, 0.07);
}

/* ════════════════════════════════════════
   NAV LAYOUT
   ════════════════════════════════════════ */
.aa0105-universal-header__nav {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* ════════════════════════════════════════
   BRAND
   ════════════════════════════════════════ */
.aa0105-universal-header__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
  border-radius: 8px;
}

.aa0105-universal-header__brand:focus-visible {
  outline: 2px solid #42B5A4;
  outline-offset: 3px;
}

.aa0105-universal-header__logo-img {
  display: block;
}

/* ════════════════════════════════════════
   MENU (quicklinks + More Tools)
   ════════════════════════════════════════ */
.aa0105-universal-header__menu {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.aa0105-universal-header__quicklinks {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.aa0105-universal-header__quicklink {
  display: inline-block;
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.1px;
  color: #47474f;
  text-decoration: none;
  padding: 7px 10px;
  border-radius: 8px;
  white-space: nowrap;
  transition: color 0.18s ease, background 0.18s ease;
}

.aa0105-universal-header__quicklink:hover {
  color: #1f8a7c;
  background: #f0faf9;
}

.aa0105-universal-header__quicklink.active {
  color: #1f8a7c;
  background: #eef9f7;
}

.aa0105-universal-header__quicklink:focus-visible {
  outline: 2px solid #42B5A4;
  outline-offset: 2px;
}

/* ════════════════════════════════════════
   SHARED DROPDOWN TRIGGER LOOK
   (More Tools + Help both build on this)
   ════════════════════════════════════════ */
.aa0105-universal-header__dropdown-wrap,
.aa0105-universal-header__help-wrap {
  position: relative;
}

.aa0105-universal-header__more-btn,
.aa0105-universal-header__help-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.1px;
  color: #47474f;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 9px;
  padding: 7px 12px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.aa0105-universal-header__more-btn:hover,
.aa0105-universal-header__help-btn:hover {
  background: #f5f6f8;
  color: #1a1a22;
}

.aa0105-universal-header__more-icon,
.aa0105-universal-header__help-icon-mark {
  display: inline-flex;
  width: 17px;
  height: 17px;
  color: #8b8b95;
}
.aa0105-universal-header__more-icon svg,
.aa0105-universal-header__help-icon-mark svg {
  width: 100%;
  height: 100%;
}

.aa0105-universal-header__chevron {
  color: #9999a2;
  transition: transform 0.2s ease;
}

/* Frosted / blurred active look — NOT solid black */
.aa0105-universal-header__more-btn[aria-expanded="true"],
.aa0105-universal-header__help-btn[aria-expanded="true"] {
  background: rgba(66, 181, 164, 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #1f8a7c;
  border-color: #42B5A4;
}

.aa0105-universal-header__more-btn[aria-expanded="true"] .aa0105-universal-header__chevron,
.aa0105-universal-header__help-btn[aria-expanded="true"] .aa0105-universal-header__chevron {
  transform: rotate(180deg);
  color: #1f8a7c;
}

.aa0105-universal-header__more-btn:focus-visible,
.aa0105-universal-header__help-btn:focus-visible {
  outline: 2px solid #42B5A4;
  outline-offset: 2px;
}

/* ════════════════════════════════════════
   MEGA DROPDOWN — 6 categories, ONE row
   ════════════════════════════════════════ */
.aa0105-universal-header__mega {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: min(96vw, 1240px);
  background: #ffffff;
  border: 1px solid #ececef;
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(20, 20, 30, 0.14);
  padding: 22px 24px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  z-index: 200;
}

/* Invisible bridge over the gap between the button and this panel —
   without it, moving the mouse straight down from the button briefly
   leaves the hoverable area and the panel closes before you get there. */
.aa0105-universal-header__mega::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

#aa0105-universal-header-mega[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.aa0105-universal-header__mega-inner {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: start;
  gap: 4px 16px;
  list-style: none;
}

.aa0105-universal-header__mega-col {
  min-width: 0;
}

.aa0105-universal-header__mega-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #b3b3bc;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f3;
}

.aa0105-universal-header__mega-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.aa0105-universal-header__mega-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.aa0105-universal-header__mega-link:hover {
  background: #f7f9f9;
}

.aa0105-universal-header__mega-link:hover .aa0105-universal-header__mega-link-title {
  color: #1f8a7c;
}

.aa0105-universal-header__mega-link:focus-visible {
  outline: 2px solid #42B5A4;
  outline-offset: 1px;
}

.aa0105-universal-header__mega-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  overflow: hidden;
}
.aa0105-universal-header__mega-icon svg {
  width: 32px;
  height: 32px;
  display: block;
}

.aa0105-universal-header__mega-link-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.aa0105-universal-header__mega-link-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: normal;
  word-spacing: normal;
  color: #1a1a22;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.3;
  transition: color 0.15s ease;
}

.aa0105-universal-header__mega-link-desc {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: #9999a2;
  white-space: normal;
  line-height: 1.35;
}

/* ── "Show more" scaffolding ──────────────────────────────────
   Nothing shows this by default. The upcoming JS only injects
   .mega-showmore, and only adds --more-hidden to items, when a
   category's list actually has more than 5 <li>s. */
.aa0105-universal-header__mega-item--more-hidden {
  display: none;
}

.aa0105-universal-header__mega-item--entering {
  animation: aa0105UniversalHeaderFadeIn 0.25s ease both;
}

@keyframes aa0105UniversalHeaderFadeIn {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

.aa0105-universal-header__mega-showmore {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  margin-top: 4px;
  padding: 6px 8px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: #1f8a7c;
  cursor: pointer;
  transition: background 0.15s ease;
}

.aa0105-universal-header__mega-showmore:hover {
  background: #f0faf9;
}

.aa0105-universal-header__mega-showmore-icon {
  display: inline-flex;
  width: 12px;
  height: 12px;
  transition: transform 0.2s ease;
}
.aa0105-universal-header__mega-showmore-icon svg { width: 100%; height: 100%; }

.aa0105-universal-header__mega-showmore[data-expanded="true"] .aa0105-universal-header__mega-showmore-icon {
  transform: rotate(180deg);
}

.aa0105-universal-header__mega-viewall {
  display: block;
  text-align: center;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f3;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #42B5A4;
  text-decoration: none;
  transition: color 0.15s ease;
}

.aa0105-universal-header__mega-viewall:hover {
  color: #1f8a7c;
  text-decoration: underline;
}

/* ════════════════════════════════════════
   ACTIONS (Help + Hamburger)
   ════════════════════════════════════════ */
.aa0105-universal-header__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ════════════════════════════════════════
   HELP DROPDOWN
   ════════════════════════════════════════ */
.aa0105-universal-header__help-drop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 280px;
  background: #ffffff;
  border: 1px solid #ececef;
  border-radius: 14px;
  box-shadow: 0 20px 48px rgba(20, 20, 30, 0.14);
  padding: 10px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  transform: translateY(-6px);
  z-index: 200;
}

.aa0105-universal-header__help-drop::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

#aa0105-universal-header-help-drop[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateY(0);
}

.aa0105-universal-header__help-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.aa0105-universal-header__help-link:hover {
  background: #f7f9f9;
}

.aa0105-universal-header__help-link:hover .aa0105-universal-header__help-link-title {
  color: #1f8a7c;
}

.aa0105-universal-header__help-link:focus-visible {
  outline: 2px solid #42B5A4;
  outline-offset: 1px;
}

.aa0105-universal-header__help-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #eef9f7;
}
.aa0105-universal-header__help-icon svg {
  width: 18px;
  height: 18px;
}

.aa0105-universal-header__help-link-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.aa0105-universal-header__help-link-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.1px;
  color: #1a1a22;
  transition: color 0.15s ease;
}

.aa0105-universal-header__help-link-desc {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  color: #9999a2;
}

.aa0105-universal-header__help-divider {
  height: 1px;
  background: #f0f0f3;
  margin: 6px 4px;
}

/* ════════════════════════════════════════
   HELP SUBMENU — "Legal & Support" flyout,
   opens to the LEFT of the Help panel (the
   Help panel itself sits right-aligned near
   the edge of the viewport, so a rightward
   flyout would run off-screen)
   ════════════════════════════════════════ */
.aa0105-universal-header__help-submenu-trigger {
  width: 100%;
  border: none;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.aa0105-universal-header__help-caret {
  margin-left: auto;
  flex-shrink: 0;
  color: #b3b3bc;
  transition: color 0.15s ease;
}

.aa0105-universal-header__help-submenu-trigger:hover .aa0105-universal-header__help-caret,
.aa0105-universal-header__help-submenu-trigger[aria-expanded="true"] .aa0105-universal-header__help-caret {
  color: #1f8a7c;
}

.aa0105-universal-header__help-submenu-trigger[aria-expanded="true"] {
  background: #f7f9f9;
}

.aa0105-universal-header__help-submenu-trigger[aria-expanded="true"] .aa0105-universal-header__help-link-title {
  color: #1f8a7c;
}

.aa0105-universal-header__help-submenu {
  /* Positioned against .help-drop (the nearest positioned ancestor,
     since .help-submenu-wrap no longer creates its own positioning
     context) so its top border lines up with the Help panel's own
     top border — reads as a second card opening out of the same
     panel, not as something dropping down from the trigger row. */
  position: absolute;
  top: -1px;
  left: -278px; /* 268px width + 10px gap, flush against the Help panel's left edge */
  width: 268px;
  background: #ffffff;
  border: 1px solid #ececef;
  border-radius: 14px;
  box-shadow: 0 20px 48px rgba(20, 20, 30, 0.14);
  padding: 10px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  transform: translateX(6px);
  z-index: 210;
}

/* Invisible bridge over the gap so the mouse can travel from the
   trigger to the flyout without hover being lost mid-way */
.aa0105-universal-header__help-submenu::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -10px;
  width: 10px;
}

#aa0105-universal-header-legal-drop[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(0);
}

/* ════════════════════════════════════════
   HAMBURGER (mobile only — see media query)
   ════════════════════════════════════════ */
.aa0105-universal-header__hamburger {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.18s ease;
}

.aa0105-universal-header__hamburger:hover {
  background: #f5f6f8;
}

.aa0105-universal-header__hamburger span {
  position: absolute;
  left: 10px;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #1a1a22;
  transition: transform 0.22s ease, opacity 0.22s ease, top 0.22s ease;
}
.aa0105-universal-header__hamburger span:nth-child(1) { top: 14px; }
.aa0105-universal-header__hamburger span:nth-child(2) { top: 19px; }
.aa0105-universal-header__hamburger span:nth-child(3) { top: 24px; }

.aa0105-universal-header__hamburger[aria-expanded="true"] {
  background: #1a1a22;
}
.aa0105-universal-header__hamburger[aria-expanded="true"] span {
  background: #ffffff;
}
.aa0105-universal-header__hamburger[aria-expanded="true"] span:nth-child(1) {
  top: 19px;
  transform: rotate(45deg);
}
.aa0105-universal-header__hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.aa0105-universal-header__hamburger[aria-expanded="true"] span:nth-child(3) {
  top: 19px;
  transform: rotate(-45deg);
}

/* ════════════════════════════════════════
   MOBILE DRAWER
   ════════════════════════════════════════ */
.aa0105-universal-header__drawer {
  position: fixed;
  inset: 0;
  z-index: 900;
  visibility: hidden;
}

.aa0105-universal-header__drawer[aria-hidden="false"] {
  visibility: visible;
}

.aa0105-universal-header__drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 30, 0.45);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.aa0105-universal-header__drawer[aria-hidden="false"] .aa0105-universal-header__drawer-overlay {
  opacity: 1;
}

.aa0105-universal-header__drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(84vw, 340px);
  background: #ffffff;
  box-shadow: -12px 0 32px rgba(20, 20, 30, 0.16);
  padding: 16px 14px 24px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.28s ease;
}

.aa0105-universal-header__drawer[aria-hidden="false"] .aa0105-universal-header__drawer-panel {
  transform: translateX(0);
}

.aa0105-universal-header__drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid #f0f0f3;
}

.aa0105-universal-header__drawer-close {
  width: 34px;
  height: 34px;
  border: none;
  background: #f5f6f8;
  border-radius: 9px;
  color: #47474f;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aa0105-universal-header__drawer-close:hover {
  background: #ececef;
}

.aa0105-universal-header__drawer-section {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 10px 6px;
  border-bottom: 1px solid #f5f5f7;
}
.aa0105-universal-header__drawer-section:last-child {
  border-bottom: none;
}

.aa0105-universal-header__drawer-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #b3b3bc;
  margin: 0 0 6px;
  padding: 0 6px;
}

.aa0105-universal-header__drawer-link {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: #33333b;
  text-decoration: none;
  padding: 9px 6px;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease;
}
.aa0105-universal-header__drawer-link:hover,
.aa0105-universal-header__drawer-link:focus-visible {
  background: #f0faf9;
  color: #1f8a7c;
}

/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */

/* Laptop / small desktop — 6 columns still fit but tighter,
   drop to 3x2 once it'd genuinely get cramped */
@media (max-width: 1180px) {
  .aa0105-universal-header__mega {
    padding: 20px 22px;
  }
  .aa0105-universal-header__mega-inner {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 18px;
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .aa0105-universal-header__quicklinks {
    display: none;
  }
}

/* Narrower tablets (iPad portrait and similar) — 3 columns gets tight
   once titles like "Face and Sensitive Area Blur" wrap, so drop to 2 */
@media (max-width: 899.98px) {
  .aa0105-universal-header__mega {
    width: min(94vw, 620px);
    padding: 18px 20px;
  }
  .aa0105-universal-header__mega-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 18px;
  }
  .aa0105-universal-header__mega-link-desc {
    display: none; /* keep rows compact on narrower panels */
  }
}

/* Mobile — collapse to hamburger + drawer */
@media (max-width: 767.98px) {
  .aa0105-universal-header__nav {
    padding: 0 16px;
    height: 60px;
  }
  .aa0105-universal-header__menu,
  .aa0105-universal-header__help-wrap {
    display: none;
  }
  .aa0105-universal-header__hamburger {
    display: block;
  }
}

/* ============================================================
   SOURCE-END: unvhr.main.css
   ============================================================ */