/* ── CONNECTION ZONE ── */
.upload-zone{
  border:2px dashed var(--border);
  border-radius:var(--radius-lg);
  padding:48px 24px;
  text-align:center;
  background:var(--bg-elevated);
  position:relative;
  overflow:hidden;
}
.upload-icon{font-size:48px;margin-bottom:12px;display:block}
.upload-zone h3{
  font-family:var(--font-title);font-size:18px;font-weight:600;
  color:var(--text-primary);margin-bottom:6px;
}
.upload-zone p{color:var(--text-secondary);font-size:13px}
.upload-zone .hint{
  margin-top:16px;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:11px;
  background:var(--bg-card);color:var(--text-secondary);
  padding:4px 12px;border-radius:20px;border:1px solid var(--border);
}

/* ── PROGRESS BAR ── */
.progress-wrap{
  display:none;margin-top:16px;
  background:var(--bg-surface);border-radius:4px;overflow:hidden;height:4px;
}
.progress-bar{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--accent2),#fbbf24);
  transition:width .3s ease;
  border-radius:4px;
}

/* ── CONNECTING STATE (fonte: Google Sheets via Apps Script) ── */
.spinner{
  width:34px;height:34px;
  border:3px solid var(--border);
  border-top-color:var(--accent2);
  border-radius:50%;
  animation:spin .75s linear infinite;
  margin:0 auto 14px;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Overlay de carregamento (requisições HTTP após o primeiro carregamento) ── */
.loading-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(7,9,26,.55);
  align-items:center;justify-content:center;
  z-index:400;
}
.loading-overlay.show{display:flex;}

.retry-btn{
  margin-top:16px;padding:10px 24px;
  background:var(--accent2);color:#000;
  border:none;border-radius:var(--radius);
  font-family:var(--font-title);font-size:14px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;transition:all .2s;
}
.retry-btn:hover{background:#fbbf24;transform:translateY(-1px);box-shadow:0 4px 16px rgba(245,158,11,.4)}

/* ── MAIN UPLOAD (centralizado) ── */
.main-upload-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: calc(100vh - 56px);
  padding: 48px 24px;
}
.main-upload-wrap .upload-zone {
  max-width: 520px;
  width: 100%;
}

/* ── EMPTY STATE ── */
.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:300px;text-align:center;gap:12px;
}
.empty-icon{font-size:48px;opacity:.3}
.empty-title{font-family:var(--font-title);font-size:20px;font-weight:600;color:var(--text-secondary)}
.empty-sub{font-size:13px;color:var(--text-muted)}