/* ==========================================================================
   MMT Image Compressor — scoped styles. Everything under #mmt-compress.
   ========================================================================== */

#mmt-compress {
  --bg:#080c0f;
  --sur:#0d1117;
  --sur2:#111820;
  --green:#22c55e;
  --gglow:rgba(34,197,94,.28);
  --white:#f0f6ff;
  --muted:#5a6a7e;
  --border:rgba(255,255,255,.06);
  --red:#ef4444;

  font-family:'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color:var(--white);
  background:var(--bg);
  border-radius:16px;
  padding:28px;
  max-width:920px;
  margin:0 auto;
  line-height:1.5;
}

/* Mandatory box-sizing reset (prevents overflow bugs) */
#mmt-compress,
#mmt-compress *,
#mmt-compress *::before,
#mmt-compress *::after { box-sizing:border-box; }

#mmt-compress .mmt-wrap { width:100%; min-width:0; }

/* ---------- Header ---------- */
#mmt-compress .mmt-head { text-align:center; margin-bottom:24px; }
#mmt-compress .mmt-title {
  font-size:1.9rem;
  font-weight:800;
  letter-spacing:-.02em;
  margin:0 0 8px;
  color:var(--white);
}
#mmt-compress .mmt-sub {
  font-size:.98rem;
  color:var(--muted);
  margin:0 auto 14px;
  max-width:560px;
}
#mmt-compress .mmt-privacy {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.82rem;
  font-weight:600;
  color:var(--green);
  background:var(--gglow);
  border:1px solid rgba(34,197,94,.35);
  padding:7px 14px;
  border-radius:999px;
  margin:0;
}
#mmt-compress .mmt-privacy svg { flex:0 0 auto; }

/* ---------- Dropzone ---------- */
#mmt-compress .mmt-dropzone {
  border:2px dashed var(--border);
  border-radius:16px;
  background:var(--sur);
  padding:40px 20px;
  text-align:center;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .12s ease;
  min-width:0;
}
#mmt-compress .mmt-dropzone:hover,
#mmt-compress .mmt-dropzone:focus-visible {
  border-color:rgba(34,197,94,.55);
  background:var(--sur2);
  outline:none;
}
#mmt-compress .mmt-dropzone.is-drag {
  border-color:var(--green);
  background:var(--sur2);
  box-shadow:0 0 0 4px var(--gglow);
  transform:translateY(-1px);
}
#mmt-compress .mmt-dz-inner {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  min-width:0;
}
#mmt-compress .mmt-dz-icon { color:var(--green); opacity:.9; }
#mmt-compress .mmt-dz-text { font-size:1.05rem; color:var(--white); }
#mmt-compress .mmt-dz-text strong { font-weight:700; }
#mmt-compress .mmt-dz-link { color:var(--green); text-decoration:underline; text-underline-offset:3px; }
#mmt-compress .mmt-dz-hint { font-size:.78rem; color:var(--muted); letter-spacing:.02em; }

/* ---------- Controls ---------- */
#mmt-compress .mmt-controls {
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:16px;
  margin-top:20px;
  padding:18px;
  background:var(--sur);
  border:1px solid var(--border);
  border-radius:14px;
}
#mmt-compress .mmt-ctrl { display:flex; flex-direction:column; gap:8px; min-width:0; }
#mmt-compress .mmt-label {
  font-size:.78rem;
  font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.04em;
  display:flex;
  align-items:center;
  gap:8px;
}
#mmt-compress .mmt-qval {
  color:var(--green);
  font-weight:700;
  font-size:.85rem;
  background:var(--gglow);
  padding:1px 8px;
  border-radius:6px;
}

/* Range slider */
#mmt-compress input[type="range"] {
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:6px;
  border-radius:999px;
  background:var(--sur2);
  outline:none;
  cursor:pointer;
  margin:8px 0;
}
#mmt-compress input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--green);
  border:3px solid var(--sur);
  box-shadow:0 0 0 3px var(--gglow);
  cursor:pointer;
}
#mmt-compress input[type="range"]::-moz-range-thumb {
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--green);
  border:3px solid var(--sur);
  box-shadow:0 0 0 3px var(--gglow);
  cursor:pointer;
}

/* Select + number inputs */
#mmt-compress .mmt-select,
#mmt-compress .mmt-num {
  width:100%;
  min-width:0;
  background:var(--sur2);
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--white);
  font-family:inherit;
  font-size:.92rem;
  padding:10px 12px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
#mmt-compress .mmt-select:focus,
#mmt-compress .mmt-num:focus {
  outline:none;
  border-color:rgba(34,197,94,.55);
  box-shadow:0 0 0 3px var(--gglow);
}
#mmt-compress .mmt-select { -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><path fill='%235a6a7e' d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:32px;
}
#mmt-compress .mmt-num::placeholder { color:var(--muted); }
/* tidy number spinners */
#mmt-compress .mmt-num::-webkit-outer-spin-button,
#mmt-compress .mmt-num::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
#mmt-compress .mmt-num { -moz-appearance:textfield; }

/* ---------- Action bar ---------- */
#mmt-compress .mmt-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:18px;
}
#mmt-compress .mmt-btn {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:inherit;
  font-size:.9rem;
  font-weight:700;
  padding:11px 18px;
  border-radius:10px;
  border:1px solid var(--border);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease;
  min-width:0;
}
#mmt-compress .mmt-btn:active { transform:translateY(1px); }
#mmt-compress .mmt-btn-primary {
  background:var(--green);
  color:#04130a;
  border-color:var(--green);
  box-shadow:0 6px 20px var(--gglow);
}
#mmt-compress .mmt-btn-primary:hover { box-shadow:0 8px 26px var(--gglow); transform:translateY(-1px); }
#mmt-compress .mmt-btn-ghost { background:var(--sur); color:var(--white); }
#mmt-compress .mmt-btn-ghost:hover { background:var(--sur2); border-color:rgba(255,255,255,.14); }
#mmt-compress .mmt-btn-clear:hover { border-color:rgba(239,68,68,.5); color:var(--red); }
#mmt-compress .mmt-btn[disabled] { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

/* ---------- Summary ---------- */
#mmt-compress .mmt-summary {
  margin-top:18px;
  padding:14px 18px;
  background:linear-gradient(90deg, var(--gglow), transparent);
  border:1px solid rgba(34,197,94,.3);
  border-radius:12px;
  font-size:.95rem;
  font-weight:600;
  color:var(--white);
}
#mmt-compress .mmt-summary b { color:var(--green); }

/* ---------- Result list ---------- */
#mmt-compress .mmt-list {
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
#mmt-compress .mmt-card {
  display:flex;
  align-items:center;
  gap:16px;
  padding:14px;
  background:var(--sur);
  border:1px solid var(--border);
  border-radius:14px;
  min-width:0;
}
#mmt-compress .mmt-thumb {
  flex:0 0 auto;
  width:64px;
  height:64px;
  border-radius:10px;
  overflow:hidden;
  background:var(--sur2);
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
}
#mmt-compress .mmt-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
#mmt-compress .mmt-thumb .mmt-thumb-ph { color:var(--muted); font-size:1.4rem; }

#mmt-compress .mmt-info { flex:1 1 auto; min-width:0; }
#mmt-compress .mmt-name {
  font-weight:700;
  font-size:.95rem;
  color:var(--white);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
#mmt-compress .mmt-meta {
  font-size:.82rem;
  color:var(--muted);
  margin-top:4px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 10px;
}
#mmt-compress .mmt-meta .mmt-arrow { color:var(--muted); }
#mmt-compress .mmt-meta .mmt-size-new { color:var(--white); font-weight:600; }
#mmt-compress .mmt-dims { color:var(--muted); }

#mmt-compress .mmt-badge {
  font-weight:700;
  font-size:.82rem;
  padding:3px 9px;
  border-radius:7px;
  white-space:nowrap;
}
#mmt-compress .mmt-badge.is-good { color:var(--green); background:var(--gglow); }
#mmt-compress .mmt-badge.is-bad  { color:var(--muted); background:rgba(255,255,255,.05); }
#mmt-compress .mmt-badge.is-warn { color:#fbbf24; background:rgba(251,191,36,.12); }

#mmt-compress .mmt-card-actions { flex:0 0 auto; }
#mmt-compress .mmt-dl {
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:inherit;
  font-size:.85rem;
  font-weight:700;
  padding:9px 15px;
  border-radius:9px;
  border:1px solid rgba(34,197,94,.4);
  background:transparent;
  color:var(--green);
  cursor:pointer;
  transition:background .18s ease, transform .12s ease;
  white-space:nowrap;
}
#mmt-compress .mmt-dl:hover { background:var(--gglow); transform:translateY(-1px); }
#mmt-compress .mmt-dl:active { transform:translateY(0); }
#mmt-compress .mmt-dl[disabled] { opacity:.5; cursor:not-allowed; }

/* States */
#mmt-compress .mmt-card.is-working { opacity:.7; }
#mmt-compress .mmt-card.is-error { border-color:rgba(239,68,68,.4); }
#mmt-compress .mmt-card.is-error .mmt-name { color:var(--red); }
#mmt-compress .mmt-card.is-note { border-color:rgba(251,191,36,.35); }

#mmt-compress .mmt-spin {
  width:16px; height:16px;
  border:2px solid var(--border);
  border-top-color:var(--green);
  border-radius:50%;
  animation:mmt-spin .7s linear infinite;
  display:inline-block;
  vertical-align:-3px;
}
@keyframes mmt-spin { to { transform:rotate(360deg); } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:580px) {
  #mmt-compress { padding:18px; border-radius:14px; }
  #mmt-compress .mmt-title { font-size:1.5rem; }
  #mmt-compress .mmt-sub { font-size:.9rem; }
  #mmt-compress .mmt-controls {
    grid-template-columns:1fr 1fr;
    gap:14px;
    padding:14px;
  }
  #mmt-compress .mmt-ctrl-quality { grid-column:1 / -1; }
  #mmt-compress .mmt-dropzone { padding:30px 14px; }
  #mmt-compress .mmt-actions .mmt-btn { flex:1 1 auto; justify-content:center; }
}

@media (max-width:430px) {
  #mmt-compress { padding:14px; }
  #mmt-compress .mmt-controls { grid-template-columns:1fr; }
  #mmt-compress .mmt-privacy { font-size:.74rem; padding:6px 11px; }

  /* Stack the result card so nothing overflows at 360px */
  #mmt-compress .mmt-card {
    flex-wrap:wrap;
    gap:12px;
  }
  #mmt-compress .mmt-thumb { width:52px; height:52px; }
  #mmt-compress .mmt-info { flex:1 1 calc(100% - 68px); }
  #mmt-compress .mmt-card-actions { flex:1 1 100%; }
  #mmt-compress .mmt-dl { width:100%; justify-content:center; }
  #mmt-compress .mmt-dz-text { font-size:.95rem; }
}