/* ---- Retro-Future Theme — Cyan & Orange ---- */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap');

:root {
  --bg-deep: #0a0a12;
  --bg: #0d0d18;
  --surface: #13132a;
  --surface2: #1a1a3a;
  --border: #2a2a50;
  --text: #e0e0f0;
  --text-dim: #6a6a9a;

  /* Neon palette */
  --cyan: #00f0ff;
  --cyan-glow: rgba(0, 240, 255, .45);
  --orange: #ff6a00;
  --orange-glow: rgba(255, 106, 0, .45);

  --accent: var(--cyan);
  --accent-hover: #33f5ff;
  --accent-secondary: var(--orange);

  --green: #22c55e;
  --red: #ff3070;
  --radius: 10px;
  --font-heading: 'Orbitron', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Glow helper */
  --glow-cyan: 0 0 8px var(--cyan-glow), 0 0 24px var(--cyan-glow);
  --glow-orange: 0 0 8px var(--orange-glow), 0 0 24px var(--orange-glow);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  background: var(--bg-deep);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;

  /* Retro grid background */
  background-image:
    linear-gradient(rgba(0, 240, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, .03) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Scanline overlay */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  /*background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, .08) 2px,
    rgba(0, 0, 0, .08) 4px
  );*/
}

/* ---- Toast Banner ---- */
#toast {
  position: fixed; top: 20px; right: 20px; z-index: 9999;
  background: var(--red); color: #fff;
  padding: 12px 20px; border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 14px; max-width: 400px;
  transform: translateX(120%); opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
  box-shadow: 0 0 16px rgba(255, 48, 112, .5), 0 8px 32px rgba(0,0,0,.5);
  border-left: 3px solid var(--red);
}
#toast.show { transform: translateX(0); opacity: 1; }

/* ---- Upload Screen ---- */
#upload-screen {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px; gap: 8px;
}

.app-title {
  font-family: var(--font-heading);
  font-size: 48px; font-weight: 900; letter-spacing: 3px; text-transform: uppercase;
  background: linear-gradient(135deg, var(--cyan), var(--orange));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px var(--cyan-glow)) drop-shadow(0 0 24px var(--orange-glow));
  animation: titlePulse 4s ease-in-out infinite alternate;
}

@keyframes titlePulse {
  0%   { filter: drop-shadow(0 0 8px var(--cyan-glow)) drop-shadow(0 0 20px var(--orange-glow)); }
  100% { filter: drop-shadow(0 0 16px var(--cyan-glow)) drop-shadow(0 0 36px var(--orange-glow)); }
}

.app-subtitle {
  font-family: var(--font-mono);
  font-size: 15px; color: var(--text-dim); margin-bottom: 12px;
  letter-spacing: 1px;
}

.drop-zone {
  width: 100%; max-width: 560px; aspect-ratio: 16/10;
  border: 2px dashed var(--border); border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; cursor: pointer; transition: border-color .25s, background .25s, box-shadow .25s;
  background: var(--surface);
  position: relative;
}

.drop-zone::before {
  content: '';
  position: absolute; inset: 0; border-radius: 16px;
  border: 1px solid rgba(0, 240, 255, .08);
  pointer-events: none;
}

.drop-zone:hover, .drop-zone.drag-over {
  border-color: var(--cyan);
  background: var(--surface2);
  box-shadow: inset 0 0 40px rgba(0, 240, 255, .06), var(--glow-cyan);
}

.drop-zone svg { width: 48px; height: 48px; stroke: var(--cyan); opacity: .7; }
.drop-zone p { color: var(--text-dim); font-size: 15px; }
.drop-zone .title {
  font-family: var(--font-heading);
  font-size: 20px; font-weight: 700;
  color: var(--cyan);
  text-shadow: 0 0 6px var(--cyan-glow);
}

/* ---- Controls Panel ---- */
#controls-screen { display: none; flex-direction: column; align-items: center; min-height: 100vh; padding: 24px; gap: 24px; }

.preview-wrapper {
  width: 100%; max-width: 900px;
  background: var(--surface); border-radius: 16px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  min-height: 300px; position: relative;
  border: 1px solid var(--border);
  box-shadow: 0 4px 32px rgba(0,0,0,.4);
}
.preview-wrapper img {
  max-width: 100%; max-height: 55vh; display: block;
}

.controls-card {
  width: 100%; max-width: 900px;
  background: var(--surface); border-radius: 16px;
  padding: 24px 32px; display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end;
  border: 1px solid var(--border);
  box-shadow: 0 4px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(0, 240, 255, .05);
}

.control-group { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 8px; }
.control-group label {
  font-family: var(--font-mono);
  font-size: 12px; color: var(--cyan); opacity: .75;
  text-transform: uppercase; letter-spacing: 1.5px;
}

/* Range slider — neon track */
input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  background: linear-gradient(90deg, var(--cyan), var(--orange));
  border-radius: 3px; outline: none;
  box-shadow: 0 0 6px rgba(0, 240, 255, .15);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan-glow), 0 0 16px var(--cyan-glow);
  border-radius: 50%; cursor: pointer;
}

.quality-value {
  font-family: var(--font-mono);
  font-size: 28px; font-weight: 700;
  color: var(--orange);
  text-shadow: 0 0 8px var(--orange-glow), 0 0 20px var(--orange-glow);
  text-align: center; line-height: 1.2;
}

/* Checkbox toggle — neon */
.toggle-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.toggle { position: relative; width: 44px; height: 24px; cursor: pointer; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle .slider-track {
  position: absolute; inset: 0;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px; transition: all .25s;
}
.toggle .slider-track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; background: var(--text-dim); border-radius: 50%; transition: all .25s;
}
.toggle input:checked + .slider-track {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 10px var(--cyan-glow), 0 0 24px var(--cyan-glow);
}
.toggle input:checked + .slider-track::after {
  transform: translateX(20px);
  background: #fff;
  box-shadow: 0 0 6px #fff;
}

/* Select — retro terminal style */
select {
  width: 100%; padding: 10px 12px;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 14px; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 8px var(--cyan-glow);
}

/* Buttons */
.btn {
  padding: 12px 28px; border: none; border-radius: 8px;
  font-family: var(--font-heading);
  font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  cursor: pointer; transition: background .2s, transform .1s, box-shadow .25s;
}
.btn:active { transform: scale(.97); }

.btn-primary {
  background: linear-gradient(135deg, var(--cyan), #00b4d8);
  color: var(--bg-deep);
  box-shadow: 0 0 12px var(--cyan-glow), 0 4px 16px rgba(0,0,0,.4);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-hover), #33d4ef);
  box-shadow: 0 0 20px var(--cyan-glow), 0 0 40px var(--cyan-glow), 0 4px 24px rgba(0,0,0,.5);
}

.btn-secondary {
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover {
  background: var(--border);
  border-color: var(--cyan);
  box-shadow: 0 0 8px var(--cyan-glow);
}

/* ---- Comparison Screen ---- */
#comparison-screen { display: none; flex-direction: column; align-items: center; min-height: 100vh; padding: 24px; gap: 20px; }

.stats-bar {
  width: 100%; max-width: 960px;
  background: var(--surface); border-radius: 12px;
  padding: 16px 24px; display: flex; gap: 32px; flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 24px rgba(0,0,0,.3);
}
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat-label { color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; }
.stat-value { font-weight: 700; font-size: 18px; color: var(--cyan); text-shadow: 0 0 4px var(--cyan-glow); }
.stat-value.green { color: var(--green); text-shadow: 0 0 6px rgba(34,197,94,.4); }
.stat-value.red   { color: var(--red);   text-shadow: 0 0 6px rgba(255,48,112,.4); }

/* Result preview wrapper */
.result-wrapper {
  width: 100%; max-width: 960px;
  background: var(--surface); border-radius: 16px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  min-height: 300px; position: relative;
  border: 1px solid var(--border);
  box-shadow: 0 4px 32px rgba(0,0,0,.4), inset 0 0 60px rgba(0, 240, 255, .02);
}
.result-wrapper img {
  max-width: 100%; max-height: 75vh; display: block;
}

/* Compare button — orange accent */
.btn-compare {
  background: var(--surface2); color: var(--orange);
  border: 1px solid var(--orange);
  padding: 14px 36px; font-size: 15px;
  box-shadow: 0 0 8px var(--orange-glow);
}
.btn-compare:hover {
  background: var(--orange); color: var(--bg-deep);
  box-shadow: 0 0 20px var(--orange-glow), 0 0 40px var(--orange-glow);
}

/* Fullscreen comparison overlay */
#comparison-overlay {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: var(--bg-deep); overflow: hidden;
  background-image:
    linear-gradient(rgba(0, 240, 255, .02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, .02) 1px, transparent 1px);
  background-size: 32px 32px;
}
.comparison-fullscreen {
  width: 100%; height: 100vh;
  position: relative; display: flex; align-items: center; justify-content: center;
}
.comparison-fullscreen img-comparison-slider {
  width: 100%; height: 100%; display: block;
  --divider-width: 2px;
  --divider-color: var(--cyan);
  --default-handle-color: var(--orange);
  --default-handle-opacity: 1;
}

/* Return button — fixed lower left */
.btn-return {
  position: fixed; bottom: 24px; left: 24px; z-index: 1001;
  background: rgba(19, 19, 42, .9); color: var(--cyan);
  border: 1px solid var(--cyan);
  padding: 14px 28px; font-size: 15px; font-weight: 600;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 12px var(--cyan-glow);
}
.btn-return:hover {
  background: var(--surface2);
  box-shadow: 0 0 24px var(--cyan-glow), 0 0 48px var(--cyan-glow);
}

/* Labels */
.comp-label {
  position: absolute; top: 12px; padding: 4px 14px;
  background: rgba(10, 10, 18, .8); color: var(--cyan);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px;
  z-index: 5; pointer-events: none;
  border: 1px solid rgba(0, 240, 255, .3);
}
.label-original { left: 12px; }
.label-converted { right: 12px; color: var(--orange); border-color: rgba(255, 106, 0, .3); }

/* Hide format-specific controls when not relevant */
.webp-only { display: none; }
.show-webp-options .webp-only { display: flex; }

/* Spinner — neon ring */
.spinner-overlay {
  position: absolute; inset: 0; background: rgba(10, 10, 18, .75);
  display: flex; align-items: center; justify-content: center; z-index: 50; border-radius: 16px;
}
.spinner {
  width: 48px; height: 48px;
  border: 3px solid var(--border);
  border-top-color: var(--cyan);
  border-right-color: var(--orange);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--cyan-glow), inset 0 0 12px var(--orange-glow);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Top bar buttons */
.top-bar { display: flex; gap: 12px; width: 100%; max-width: 960px; }
.top-bar-spacer { flex: 1; }

.btn-download {
  background: var(--surface2); color: var(--orange);
  border: 1px solid var(--orange);
  box-shadow: 0 0 6px rgba(255, 106, 0, .15);
}
.btn-download:hover {
  background: var(--orange); color: var(--bg-deep);
  box-shadow: 0 0 16px var(--orange-glow), 0 0 32px var(--orange-glow);
}

/* Responsive */
@media (max-width: 600px) {
  .app-title { font-size: 28px; letter-spacing: 1px; }
  .controls-card { padding: 16px; gap: 16px; }
  .control-group { min-width: 120px; }
  .stats-bar { gap: 16px; padding: 12px 16px; }
}