/* ============================================================
   index.css — the upload / landing page (page 1)
============================================================ */

body{ display:flex; flex-direction:column; min-height:100vh; }
main{ flex:1; }

/* ---------- Hero ---------- */
.hero{ text-align:center; padding:44px 26px 22px; }
.hero h1{
  font-family:var(--font-display); font-weight:700;
  font-size:32px; margin:0; letter-spacing:0.01em;
}
.hero-sub{
  color:var(--text-dim); font-size:14.5px;
  margin:10px auto 0; max-width:480px; line-height:1.6;
}

/* ---------- Upload zone ---------- */
.upload-zone{
  border:2px dashed var(--rail-border);
  border-radius:16px;
  background:var(--rail-bg);
  padding:52px 26px;
  text-align:center;
  transition:border-color .18s, background .18s;
  cursor:pointer;
}
.upload-zone:hover{ border-color:var(--accent); }
/* .dragging is added by index.js while a file is held over the page */
.upload-zone.dragging{
  border-color:var(--accent);
  background:var(--accent-soft);
}
.upload-icon{ width:52px; height:52px; color:var(--accent); }
.upload-title{ font-size:17px; font-weight:600; margin-top:14px; }
.upload-or{ color:var(--text-dim); font-size:13px; margin:12px 0; }
.upload-note{
  color:var(--text-dim); font-size:12px;
  margin-top:20px; line-height:1.6;
}

/* ---------- Quick tool chips ---------- */
.quick-tools{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  margin:22px 0 48px;
}
.quick-chip{
  border:1px solid var(--rail-border); border-radius:99px;
  padding:8px 16px; font-size:12.5px; color:var(--text-dim);
  transition:border-color .15s, color .15s;
}
.quick-chip:hover{ border-color:var(--accent); color:var(--accent); }

/* ---------- Signed-in greeting in the header ---------- */
.header-user{ font-size:13px; color:var(--text-dim); }

/* ============================================================
   Loading popup
============================================================ */
.overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,0.62);
  display:none; align-items:center; justify-content:center;
  padding:20px;
}
.overlay.open{ display:flex; }

.loading-box{
  background:var(--rail-bg);
  border:1px solid var(--rail-border);
  border-radius:16px;
  padding:30px 28px 22px;
  width:100%; max-width:340px;
  text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,0.5);
}

.spinner{ width:38px; height:38px; animation:spin 1s linear infinite; }
.spinner circle{
  stroke:var(--accent);
  stroke-linecap:round;
  stroke-dasharray:90 150;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.loading-title{ font-size:15px; font-weight:600; margin-top:12px; }
.loading-sub{ font-size:12.5px; color:var(--text-dim); margin-top:4px; }

.progress-track{
  height:6px; background:var(--rail-bg-soft);
  border-radius:99px; overflow:hidden; margin:16px 0 14px;
}
.progress-fill{
  height:100%; width:0%; background:var(--accent);
  border-radius:99px; transition:width .25s ease;
}

.file-list{ text-align:left; font-size:12px; }
.file-row{
  display:flex; justify-content:space-between; gap:10px;
  padding:3px 0; color:var(--text-dim);
}
.file-row .fname{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.file-row.done .fstatus{ color:var(--success); }
.file-row.active{ color:var(--text-bright); }
.file-row.active .fstatus{ color:var(--accent); }
.file-row.error .fstatus{ color:var(--danger); }

.cancel-link{
  background:none; border:none; cursor:pointer;
  color:var(--text-dim); font-family:var(--font-body);
  font-size:12px; text-decoration:underline; margin-top:16px;
}
.cancel-link:hover{ color:var(--danger); }

@media (max-width:720px){
  .hero{ padding:30px 16px 18px; }
  .hero h1{ font-size:25px; }
  .upload-zone{ padding:36px 18px; }
}