:root {
  --bg: #0b0f14;
  --panel: #111722;
  --text: #e8eef5;
  --muted: #9fb0c3;
  --accent: #4ba3ff;
  --ok: #2ecc71;
  --warn: #ffb03a;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
}

header, section, footer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  border-bottom: 1px solid #1a2230;
}

h1, h2, h3 { margin: 8px 0 12px; }

#auth button { margin-right: 8px; }
#auth-status { color: var(--muted); }

#controls { background: var(--panel); border-radius: 12px; box-shadow: 0 2px 0 0 rgba(0,0,0,0.25) inset; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }

label { display: block; margin: 8px 0; color: var(--muted); }
input, select, button {
  background: #0e1522;
  color: var(--text);
  border: 1px solid #1f2a3a;
  border-radius: 8px;
  padding: 8px 10px;
}
button { cursor: pointer; transition: background .15s ease, border-color .15s ease; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.actions { margin-top: 8px; display: flex; gap: 8px; }

/* Primary action emphasis */
#compress-all { background: #14304f; border-color: #265681; }
#compress-all:hover:not(:disabled) { background: #1a3a5e; border-color: #2c669a; }
#list-files { background: #11263f; border-color: #1f4570; }
#list-files:hover:not(:disabled) { background: #15304f; border-color: #295689; }

.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.overall-progress { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
progress { width: 100%; height: 14px; }
progress::-webkit-progress-bar { background: #0f1724; border-radius: 999px; }
progress::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
progress::-moz-progress-bar { background: var(--accent); }

.file-list { display: grid; grid-template-columns: 1fr; gap: 10px; }
.file-item { background: var(--panel); padding: 12px; border-radius: 10px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; border: 1px solid #1a2230; }
.file-meta { color: var(--muted); font-size: 12px; }
.badge { padding: 2px 6px; border-radius: 999px; font-size: 11px; background: #1b2433; color: var(--muted); }
.badge.image { color: #ffd166; }
.badge.video { color: #6ed6ff; }
.file-actions { display: flex; gap: 6px; }
.file-actions a, .file-actions button { font-size: 12px; padding: 6px 8px; }
.ok { color: var(--ok); }
.warn { color: var(--warn); }
label > .warn { font-weight: 600; }

footer { color: var(--muted); text-align: center; padding-bottom: 32px; }

/* Additional settings dropdown */
details#additional-settings { margin-top: 8px; }
details#additional-settings > summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 10px;
  border: 1px solid #1f2a3a;
  border-radius: 8px;
  background: #0f1724;
  color: var(--text);
  user-select: none;
}
details#additional-settings[open] > summary { background: #131d2e; }
details#additional-settings > div { padding: 8px 2px 2px; }
.extra-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }