:root {
  --primary: #3498db;
  --dark:    #2980b9;
  --light-bg:#f0f6ff;
  --radius:  8px;
  --toast-bg:rgba(0,0,0,0.7);
}
* { box-sizing:border-box; }
body {
  margin:0; padding:0;
  font-family:'Segoe UI',sans-serif;
  width:380px; background:#fff; color:#333;
}
.header { text-align:center; padding:1rem; }
.upload-section {
  background:var(--light-bg);
  border:2px dashed var(--primary);
  border-radius:var(--radius);
  padding:1rem; text-align:center;
  margin:0 1rem; cursor:pointer;
}
.upload-section:focus,
.upload-section:hover { background:#e6f0ff; outline:none; }
.visually-hidden { position:absolute; clip:rect(0 0 0 0); }

.progress-wrapper {
  display:flex; align-items:center; padding:0.5rem 1rem;
}
.progress-bar {
  flex:1; height:6px; background:#eee;
  border-radius:3px; overflow:hidden; margin-right:0.5rem;
  display:none;
}
.progress-fill {
  width:0; height:100%; background:var(--primary);
  transition:width 0.2s;
}
.progress-text { font-size:0.8rem; color:#555; }

.spinner {
  position:absolute; top:50%; left:50%;
  width:40px; height:40px; margin:-20px 0 0 -20px;
  border:4px solid #eee; border-top:4px solid var(--primary);
  border-radius:50%; animation:spin 1s linear infinite;
}
.spinner.hidden { display:none; }
@keyframes spin { to { transform:rotate(360deg); } }

.export-section {
  display:flex; gap:0.5rem; justify-content:center;
  padding:0.5rem;
}
.btn {
  background:var(--primary); color:#fff; border:none;
  padding:0.5rem 0.8rem; border-radius:var(--radius);
  cursor:pointer; font-size:0.9rem;
}
.btn.small { padding:0.3rem 0.5rem; font-size:0.8rem; }
.btn:disabled { background:#ccc; cursor:not-allowed; }

.results-section { margin:0.5rem; }
details { margin:0.5rem; }
summary {
  background:var(--primary); color:#fff;
  padding:0.5rem; border-radius:var(--radius);
  cursor:pointer; outline:none;
}
summary:hover,
summary:focus { background:var(--dark); }

.section-card {
  background:#fafafa; padding:0.5rem;
  border-left:4px solid var(--primary);
  margin:0.3rem 0;
}
.section-card h4 { margin:0.3rem 0; }
.section-card .stats {
  font-size:0.8rem; color:#555; display:flex; gap:1rem;
}

.log-section {
  max-height:150px; overflow:auto;
  padding:0.5rem; font-family:monospace;
  background:#f4f4f4; border-radius:var(--radius);
}
.log-entry.info    { color:#333; }
.log-entry.success { color:green; }
.log-entry.warning { color:orange; }
.log-entry.error   { color:red; }

#toast-container {
  position:fixed; top:1rem; left:50%;
  transform:translateX(-50%); z-index:1000;
}
.toast {
  min-width:200px; margin:0.3rem;
  padding:0.5rem 1rem; border-radius:var(--radius);
  color:#fff; animation:fadein 0.3s, fadeout 0.3s 2.5s;
}
.toast.info    { background:var(--toast-bg); }
.toast.success { background:green; }
.toast.error   { background:red; }
@keyframes fadein  { from { opacity:0; } to { opacity:1; } }
@keyframes fadeout { from { opacity:1; } to { opacity:0; } }
