/* Photo Privacy Cleaner by SWC
   Minimal glow aesthetic with gradients and soft shadows
*/
:root{
  --bg:#0a0b10;
  --bg2:#0f1020;
  --text:#e9ecf1;
  --muted:#aab3c2;
  --primary:#8bd6ff;
  --accent:#c7a0ff;
  --good:#7cf7b2;
  --warn:#ffd480;

  --card: rgba(255,255,255,0.04);
  --border: rgba(255,255,255,0.12);
  --ring: rgba(139,214,255,0.45);
  --glow: 0 0 24px rgba(139,214,255,0.35), 0 0 64px rgba(199,160,255,0.2);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(199,160,255,0.25), transparent 60%),
    radial-gradient(1000px 900px at 120% 10%, rgba(139,214,255,0.25), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

.app{max-width:1200px;margin:0 auto;padding:24px}
.topbar{text-align:center;padding:12px 0 24px}
.topbar h1{margin:0;font-size:28px;letter-spacing:0.3px;text-shadow:var(--glow)}
.topbar .tagline{margin:6px 0 0;color:var(--muted)}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow: var(--glow);
}

.uploader{padding:16px;margin-bottom:20px}
.dropzone{
  border:2px dashed var(--border);
  border-radius:16px;
  padding:28px;
  text-align:center;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.dropzone.dragover{border-color:var(--primary); box-shadow:0 0 0 4px var(--ring) inset}
.dz-inner .icon{font-size:42px;margin-bottom:6px}
.dz-inner h2{margin:0 0 6px}
.hint{font-size:12px;color:var(--muted)}

.options{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:14px}
.toggle{display:flex;gap:8px;align-items:center;color:var(--muted)}
.range-label{display:flex;gap:10px;align-items:center}
#qualityValue{min-width:28px;display:inline-block;text-align:center}

.btn{
  padding:10px 14px;
  background:transparent;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:12px;
  cursor:pointer;
}
.btn.primary{
  background:linear-gradient(135deg, rgba(139,214,255,0.25), rgba(199,160,255,0.25));
  border-color:transparent;
}
.btn.ghost{border-style:dashed}
.btn.small{padding:6px 10px;font-size:13px}

.gallery{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:14px}
.item{padding:10px; display:flex;flex-direction:column; gap:8px}
.thumbs{display:flex;align-items:center;justify-content:center;gap:8px}
.thumbs figure{margin:0;text-align:center}
.thumb{width:120px;height:120px;object-fit:cover;border-radius:10px;border:1px solid var(--border)}
.arrow{opacity:.7}

.meta{display:flex;flex-direction:column;gap:8px}
.title{font-weight:600; font-size:14px}
.stats{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.stats .saving{color:var(--good)}

.actions{display:flex;gap:10px;align-items:center;justify-content:space-between}
.check{display:flex;align-items:center;gap:6px;color:var(--muted)}

.footer{opacity:.7;text-align:center;margin-top:24px;font-size:12px}