/*
  DD Compressor — design system
  ------------------------------------------------------------
  Concept: "local instrument". The subject of this product is the
  absence of a network round-trip — a file goes in and never leaves
  the device it's on. Rather than a generic dark-SaaS gradient page,
  the palette and layout borrow from precision hardware (light
  meters, mixing desks, lab scales): a graphite body, one confident
  brass/amber signal color standing in for an analog dial, and a
  quiet teal reserved for "safe / contained" states. Numbers that
  matter (file sizes) get tabular figures, like a real readout.
*/

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../vendor/fonts/files/inter-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../vendor/fonts/files/inter-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../vendor/fonts/files/inter-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- color --- */
  --bg: #14161a;
  --bg-raised: #1a1d23;
  --surface: #1c1f26;
  --surface-2: #232732;
  --border: #2b2f3a;
  --border-soft: #22262f;
  --text: #edeef1;
  --text-muted: #9aa1ac;
  --text-faint: #676d78;
  --accent: #e3a24a;
  --accent-strong: #f0b563;
  --accent-ink: #2a1c08;
  --safe: #5eb6a4;
  --safe-ink: #0c211d;
  --danger: #e2685c;
  --danger-ink: #2a1210;

  /* --- type --- */
  --font: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  /* --- scale --- */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --gap: 16px;
  --container: 760px;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 30px -12px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }
html { color-scheme: dark; }

body {
  margin: 0;
  background: var(--bg);
  background-image:
    radial-gradient(560px 320px at 85% -10%, rgba(227, 162, 74, 0.10), transparent 60%),
    radial-gradient(480px 300px at -10% 20%, rgba(94, 182, 164, 0.06), transparent 60%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font-family: inherit; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Focus states — always visible, never suppressed */
:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------------------------------------------------------- header */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.brand .dot { color: var(--accent); }
.header-links {
  display: flex;
  gap: 18px;
  font-size: 14px;
  color: var(--text-muted);
}
.header-links a { text-decoration: none; }
.header-links a:hover { color: var(--text); }

/* ---------------------------------------------------------- hero */
.hero {
  padding: 28px 0 8px;
  animation: rise 560ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero h1 {
  font-size: clamp(28px, 6vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  max-width: 15ch;
}
.hero p {
  color: var(--text-muted);
  font-size: 16px;
  max-width: 52ch;
  margin: 0 0 4px;
}
.privacy-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  padding: 7px 12px 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-muted);
  background: var(--bg-raised);
}
.privacy-pill .led {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--safe);
  box-shadow: 0 0 0 3px rgba(94,182,164,0.15);
}

/* ---------------------------------------------------------- dropzone */
.panel {
  margin-top: 26px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.dropzone {
  padding: 40px 20px;
  text-align: center;
  border-bottom: 1px dashed var(--border);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
  position: relative;
}
.dropzone:hover { background: var(--surface-2); }
.dropzone.drag-over {
  background: var(--surface-2);
  border-bottom-style: solid;
}
.dropzone.drag-over::after {
  content: '';
  position: absolute; inset: 8px;
  border: 1.5px dashed var(--accent);
  border-radius: var(--radius);
  pointer-events: none;
}
.dropzone .icon {
  width: 40px; height: 40px;
  margin: 0 auto 14px;
  color: var(--accent);
}
.dropzone h2 {
  font-size: 17px;
  margin: 0 0 6px;
  font-weight: 600;
}
.dropzone p {
  margin: 0;
  color: var(--text-faint);
  font-size: 13px;
}
.dropzone input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.dropzone:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.panel-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 16px 20px;
  background: var(--bg-raised);
}
.field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
}
.field label { white-space: nowrap; }
.field-controls { margin-left: auto; display: flex; gap: 10px; }

input[type="number"], select {
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 13px;
}
input[type="number"] { width: 84px; }
select { appearance: none; padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239aa1ac'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
}
input[type="number"]:focus, select:focus { border-color: var(--accent); }

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.chip:hover { border-color: var(--accent); color: var(--text); }
.chip.active { border-color: var(--accent); color: var(--accent-strong); background: rgba(227,162,74,0.08); }

/* ---------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-strong); }
.btn-primary:disabled { background: var(--border); color: var(--text-faint); cursor: not-allowed; transform: none; }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--text-muted); }
.btn-ghost:hover { color: var(--text); border-color: var(--text-faint); }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }
.btn-icon { padding: 6px; border: none; background: transparent; color: var(--text-faint); cursor: pointer; border-radius: var(--radius-sm); }
.btn-icon:hover { color: var(--danger); background: rgba(226,104,92,0.1); }

/* ---------------------------------------------------------- file list */
.file-list { padding: 4px 20px 20px; display: flex; flex-direction: column; gap: 10px; }
.file-list:empty { display: none; }

.file-card {
  border: 1px solid var(--border);
  background: var(--bg-raised);
  border-radius: var(--radius);
  padding: 14px 16px;
  animation: settle 320ms cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes settle {
  from { opacity: 0; transform: translateY(6px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .file-card, .hero, .btn { animation: none !important; transition: none !important; }
}

.file-card-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.file-type-icon {
  flex: none;
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.file-type-icon svg { width: 18px; height: 18px; }
.file-meta { min-width: 0; flex: 1; }
.file-name {
  font-weight: 600;
  font-size: 13.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.file-sub {
  font-size: 12px; color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.file-card-actions { display: flex; gap: 4px; flex: none; }

.file-card-settings {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}

.progress-track {
  margin-top: 12px;
  height: 5px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
  display: none;
}
.progress-track.active { display: block; }
.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  transition: width 200ms ease;
}
.status-line {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
  display: none;
  align-items: center;
  gap: 7px;
}
.status-line.active { display: flex; }
.spinner {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  animation: spin 700ms linear infinite;
  flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* result readout — deliberately reads like a small instrument display */
.result {
  display: none;
  margin-top: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.result.active { display: block; }
.result-row {
  display: flex;
  justify-content: space-between;
  padding: 7px 12px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--border-soft);
}
.result-row:last-child { border-bottom: none; }
.result-row .k { color: var(--text-faint); }
.result-row .v { font-variant-numeric: tabular-nums; font-weight: 600; }
.result-row.win .v { color: var(--safe); }
.result-row.status .v { font-weight: 500; color: var(--text-muted); font-variant-numeric: normal; }
.result-rename {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 10px 12px 0;
  background: var(--surface);
}
.result-rename input {
  flex: 1;
  min-width: 0;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font);
  font-size: 12.5px;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  padding: 7px 9px;
}
.result-rename input:focus { border-color: var(--accent); }
.result-rename-ext {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-left: none;
  color: var(--text-faint);
  font-size: 12.5px;
  padding: 7px 9px 7px 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.result-actions { display: flex; gap: 8px; padding: 10px 12px; background: var(--surface); }

.file-card.error .file-card-top { opacity: 0.6; }
.error-line {
  display: none;
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: rgba(226,104,92,0.08);
  border: 1px solid rgba(226,104,92,0.25);
  color: #f0a49c;
  font-size: 12.5px;
}
.error-line.active { display: block; }

/* ---------------------------------------------------------- sections */
section.info { padding: 56px 0; border-top: 1px solid var(--border-soft); }
section.info h2 {
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
section.info > p.lede {
  color: var(--text-muted);
  max-width: 56ch;
  margin: 0 0 30px;
}

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.steps li { display: flex; gap: 14px; }
.steps .num {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.steps h3 { margin: 2px 0 4px; font-size: 14.5px; }
.steps p { margin: 0; color: var(--text-muted); font-size: 13.5px; }

.boundary {
  margin-top: 34px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  display: flex;
  align-items: center;
  gap: 22px;
  background: var(--surface);
}
.boundary svg { flex: none; width: 84px; height: 84px; }
.boundary p { margin: 0; color: var(--text-muted); font-size: 13.5px; }
.boundary strong { color: var(--text); }

table.formats {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 8px;
}
table.formats th, table.formats td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft);
}
table.formats th { color: var(--text-faint); font-weight: 500; font-size: 12px; }
table.formats td.mono { font-family: var(--mono); font-size: 12px; color: var(--text-muted); }
table.formats tr:last-child td { border-bottom: none; }

.csp-note {
  margin-top: 30px;
  font-size: 12.5px;
  color: var(--text-faint);
}
.csp-note code {
  font-family: var(--mono);
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11.5px;
}

footer {
  border-top: 1px solid var(--border-soft);
  padding: 26px 0 40px;
  font-size: 12.5px;
  color: var(--text-faint);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
footer a { color: var(--text-muted); text-decoration: none; }
footer a:hover { color: var(--text); }

/* toast */
#toast-region {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(92vw, 420px);
}
.toast {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 14px;
  font-size: 13px;
  box-shadow: var(--shadow);
  animation: rise 220ms ease both;
}
.toast.danger { border-color: rgba(226,104,92,0.4); }

@media (min-width: 640px) {
  .wrap { padding: 0 28px; }
  .hero { padding-top: 44px; }
  .dropzone { padding: 54px 20px; }
  section.info { padding: 72px 0; }
}

/* ---------------------------------------------------------- menu */
.menu-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center; justify-content: center;
  cursor: pointer;
}
.menu-btn svg { width: 18px; height: 18px; }
.menu-btn:hover { color: var(--text); border-color: var(--text-faint); }

/* The HTML hidden attribute must always win over component display rules. */
[hidden] { display: none !important; }

.menu-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 11, 14, 0.6);
  z-index: 60;
  display: flex;
  justify-content: flex-end;
}
.menu-panel {
  width: min(88vw, 360px);
  height: 100%;
  background: var(--bg-raised);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  animation: slidein 220ms cubic-bezier(.2,.9,.3,1.1) both;
}
@keyframes slidein { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.menu-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--border-soft);
  font-weight: 700;
}
.menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text);
  text-decoration: none;
  font-family: var(--font);
  font-size: 14px;
  padding: 14px 16px;
  cursor: pointer;
}
.menu-item:hover { background: var(--surface-2); }
.menu-panel-body {
  padding: 16px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
}
.menu-panel-body h4 { color: var(--text); margin: 16px 0 6px; font-size: 13.5px; }
.menu-panel-body h4:first-child { margin-top: 0; }
.menu-panel-body p { margin: 0 0 10px; }

.android-app{min-height:100dvh;background:var(--bg)}.android-header{height:64px;padding:10px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-soft);background:rgba(20,22,26,.97);position:sticky;top:0;z-index:5}.android-brand{display:flex;align-items:center;gap:10px}.android-brand img{width:38px;height:38px;border-radius:10px}.android-brand strong{display:block;font-size:15px}.android-brand span{display:block;color:var(--text-faint);font-size:11px}.android-header>a{color:var(--text-muted);font-size:12px;text-decoration:none;padding:8px 10px;border:1px solid var(--border);border-radius:999px}.android-main{width:min(100%,560px);margin:auto;padding:18px 16px 28px}.android-welcome{padding:12px 2px 18px}.android-kicker{display:inline-flex;align-items:center;gap:7px;color:var(--safe);font-size:11px;font-weight:700;text-transform:uppercase}.android-led{width:7px;height:7px;border-radius:50%;background:var(--safe);box-shadow:0 0 0 4px rgba(94,182,164,.12)}.android-welcome h1{font-size:30px;line-height:1.08;letter-spacing:-.025em;margin:12px 0 8px}.android-welcome p{color:var(--text-muted);font-size:13.5px;margin:0 0 16px}.android-primary{width:100%;display:flex;align-items:center;gap:13px;text-align:left;padding:15px;border:1px solid rgba(227,162,74,.55);border-radius:15px;background:linear-gradient(135deg,rgba(227,162,74,.16),rgba(227,162,74,.05));color:var(--text);cursor:pointer}.android-primary b{display:block;font-size:15px}.android-primary small{display:block;margin-top:2px;color:var(--text-muted);font-size:11.5px}.android-plus{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:var(--accent);color:var(--accent-ink);font-size:27px}.android-tools{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:4px 0 14px}.android-tools button{min-height:64px;padding:8px 5px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);text-align:left;cursor:pointer}.android-tools span{display:block;color:var(--accent);font-size:8px;font-weight:800;letter-spacing:.08em}.android-tools b{display:block;margin-top:4px;font-size:12px}.android-app #androidCompressorMount .panel{margin-top:0;border-radius:15px}.android-info{margin-top:12px;padding:13px;border:1px solid var(--border);border-radius:13px;background:var(--surface)}.android-info b{font-size:12px;display:block}.android-info span{display:block;font-size:11.5px;color:var(--text-muted);margin-top:3px}.android-info a{display:inline-block;margin-top:10px;color:var(--accent-strong);font-size:11.5px;text-decoration:none}.android-footer{width:min(100%,560px);margin:auto;padding:0 16px 26px;display:flex;justify-content:space-between;color:var(--text-faint);font-size:10.5px}body.android-native{background:var(--bg);overscroll-behavior-y:none}body.android-native .wrap{display:none!important}body.android-native .android-app{display:block!important}@media(max-width:360px){.android-tools{grid-template-columns:repeat(2,1fr)}}

/* Android native presentation */
.android-app{min-height:100dvh;background:#121416;color:var(--text);padding-bottom:env(safe-area-inset-bottom)}
.android-topbar{height:64px;padding:9px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #25292e;background:#16191c;position:sticky;top:0;z-index:10}
.android-brand{display:flex;align-items:center;gap:10px;min-width:0}.android-brand img{width:38px;height:38px;border-radius:10px}.android-brand strong{display:block;font-size:15px;line-height:1.2}.android-brand span{display:block;color:#8f979f;font-size:10.5px;margin-top:2px}
.android-privacy{font-size:11px;color:#aeb5bc;text-decoration:none;padding:7px 9px;border:1px solid #30353b;border-radius:9px}
.android-main{width:min(100%,520px);margin:0 auto;padding:18px 14px 20px}.android-intro{padding:4px 3px 14px}.android-intro h1{margin:0;font-size:27px;line-height:1.1;letter-spacing:-.02em}.android-intro p{margin:7px 0 0;color:#8f979f;font-size:12.5px;line-height:1.5}
.android-picker-card{background:#191d21;border:1px solid #2b3036;border-radius:16px;padding:8px;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.android-select-button{width:100%;border:0;border-radius:12px;padding:14px 12px;display:flex;align-items:center;gap:12px;background:#e3a24a;color:#2a1c08;text-align:left;cursor:pointer}
.android-select-button:active{transform:scale(.992)}.android-select-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:rgba(255,255,255,.22);font-size:26px;font-weight:400}
.android-select-copy{flex:1}.android-select-copy b{display:block;font-size:15px;line-height:1.2}.android-select-copy small{display:block;margin-top:3px;font-size:10.5px;opacity:.72}.android-chevron{font-size:25px;line-height:1;opacity:.55}
.android-supported{padding:10px 6px 3px;text-align:center;color:#777f88;font-size:9.5px}.android-supported span{color:#a4abb2}.android-supported i{font-style:normal;margin:0 4px;color:#545b62}
.android-app #androidCompressorMount{margin-top:12px}.android-app #androidCompressorMount .panel{margin-top:0;border:0;background:transparent;box-shadow:none;border-radius:0;overflow:visible}
.android-app #androidCompressorMount .dropzone{display:none}.android-app #androidCompressorMount .panel-controls{display:grid;grid-template-columns:1fr auto;gap:10px;padding:13px;background:#191d21;border:1px solid #2b3036;border-radius:14px}.android-app #androidCompressorMount .field{min-width:0}.android-app #androidCompressorMount .field label{font-size:10px;color:#7f8790;text-transform:uppercase;letter-spacing:.05em}.android-app #androidCompressorMount .field input[type=number]{width:75px;background:#121416;border-color:#343a40;font-size:13px;padding:8px}.android-app #androidCompressorMount .field select{background-color:#121416;border-color:#343a40;font-size:13px;padding:8px 25px 8px 9px}.android-app #androidCompressorMount .chip-row{grid-column:1/-1;order:3;gap:6px}.android-app #androidCompressorMount .chip{font-size:10px;padding:5px 8px;background:#15181b}.android-app #androidCompressorMount .field-controls{margin:0;display:flex;align-items:center;justify-content:flex-end;gap:6px}.android-app #androidCompressorMount #clearAllBtn{font-size:10px;padding:7px 8px}.android-app #androidCompressorMount #compressAllBtn{font-size:10px;padding:7px 10px}
.android-app #androidCompressorMount .file-list{padding:10px 0 0;gap:8px}.android-app #androidCompressorMount .file-card{background:#191d21;border-color:#2b3036;border-radius:14px;padding:12px}.android-app #androidCompressorMount .file-type-icon{width:34px;height:34px;background:#23282e}.android-app #androidCompressorMount .file-name{font-size:12.5px}.android-app #androidCompressorMount .file-sub{font-size:10.5px}.android-app #androidCompressorMount .file-card-settings{margin-top:10px;padding-top:10px;gap:7px}.android-app #androidCompressorMount .file-card-settings .field label{font-size:10px}.android-app #androidCompressorMount .file-card-settings .btn-primary{font-size:10px;padding:7px 9px}.android-app #androidCompressorMount .result{background:#14171a;border-color:#2b3036}.android-app #androidCompressorMount .result-actions .btn{width:100%}
.android-trust-card{margin-top:12px;padding:12px;border:1px solid #252a2f;border-radius:13px;background:#171a1d;display:flex;gap:10px;align-items:flex-start}.android-trust-icon{width:24px;height:24px;display:grid;place-items:center;border-radius:7px;background:rgba(94,182,164,.12);color:#77c5b4;font-size:13px;flex:none}.android-trust-card b{display:block;font-size:11px}.android-trust-card span{display:block;color:#7f8790;font-size:10.5px;margin-top:3px;line-height:1.45}
.android-footer{width:min(100%,520px);margin:auto;padding:0 14px 22px;display:flex;justify-content:space-between;gap:10px;font-size:10px;color:#6f7780}.android-footer a{color:#7f8790;text-decoration:none}
body.android-native{background:#121416;overscroll-behavior-y:none}body.android-native .wrap{display:none!important}body.android-native .android-app{display:block!important}
@media(max-width:380px){.android-main{padding-left:11px;padding-right:11px}.android-topbar{padding-left:12px;padding-right:12px}.android-intro h1{font-size:25px}}