/* ----------  Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

/* ----------  Neon gradient background ---------- */
body{
  font-family:Inter,system-ui,-apple-system,Roboto,"Segoe UI",sans-serif;
  background:linear-gradient(135deg,#5d4bff 0%,#ff6b9f 50%,#ffc35e 100%);
  background-attachment:fixed;
  display:flex;align-items:center;justify-content:center;
  padding:1rem;color:#fff
}

/* ----------  Glass cards (upload & gallery) ---------- */
.card{
  width:100%;max-width:440px;background:rgba(255,255,255,.12);
  backdrop-filter:blur(12px);padding:2rem 1.6rem;border-radius:24px;
  box-shadow:0 10px 25px rgba(0,0,0,.18);
  display:flex;flex-direction:column;gap:1.6rem
}
.card h1{font-size:1.6rem;text-align:center;font-weight:700;letter-spacing:.3px}
.card p.sub{font-size:.9rem;text-align:center;opacity:.8}

/* ----------  Action buttons ---------- */
.btn{
  display:block;width:100%;padding:1.05rem;font-size:1rem;font-weight:600;
  border:none;border-radius:18px;color:#fff;cursor:pointer;transition:.25s
}
.btn.camera,
.btn.primary{background:#fff;color:#5d4bff;font-size:1.5rem}
.btn.camera:hover,
.btn.primary:hover{transform:scale(1.04)}
.btn.gallery,
.btn.secondary{background:rgba(255,255,255,.18)}
.btn.gallery:hover,
.btn.secondary:hover{background:rgba(255,255,255,.28)}
input[type=file]{display:none}

/* ----------  Drop zone (desktop) ---------- */
#dropZone{
  height:210px;border:3px dashed rgba(255,255,255,.5);border-radius:20px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1rem;background:rgba(255,255,255,.08);transition:.25s;cursor:pointer
}
#dropZone.hover{background:rgba(255,255,255,.16)}
#dropZone svg{width:58px;height:58px;fill:#fff;opacity:.85}
#dropZone span{font-weight:600;opacity:.9}

/* ----------  Progress bar ---------- */
#progress{height:12px;background:rgba(255,255,255,.25);border-radius:8px;
          overflow:hidden;display:none}
#bar{height:100%;width:0;background:#fff;transition:width .2s ease}

/* ----------  Status ---------- */
#status{text-align:center;font-size:.9rem;opacity:.9}