/*—— Base styles ——*/
body {
  font-family: 'Montserrat', sans-serif;
  background-color: #f5f7fa;
  margin: 0; padding: 0;
}
header {
  background: linear-gradient(45deg, #4e54c8, #8f94fb);
  color: #fff;
  position: relative;
}
/*—— Progress Bar ——*/
#progContainer { height:4px; background:#eee; overflow:hidden; }
#progBar       { height:4px; width:0; background:linear-gradient(45deg,#8f94fb,#4e54c8); transition:width .2s; }
/*—— Dark/Light toggle ——*/
.theme-toggle { position:fixed; top:1rem; right:1rem; z-index:1000; }
.dark-mode    { background:#222 !important; color:#eee !important }
/*—— Drop-Zone ——*/
#dropZone {
  border:2px dashed #8f94fb; border-radius:.5rem;
  padding:2rem; text-align:center; background:#fff;
  transition:background .2s,border-color .2s;
  cursor:pointer; max-width:600px; margin:2rem auto;
}
#dropZone.dragover { background:#e9ecef; border-color:#4e54c8; }
#dropZone p { margin:0; color:#4e54c8; font-weight:500; }
/*—— Spinner Overlay ——*/
#spinnerOverlay {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(255,255,255,0.7);
  display:flex; align-items:center; justify-content:center;
  z-index:1050; visibility:hidden;
}
/*—— Toasts ——*/
#toastContainer { position:fixed; bottom:1rem; right:1rem; z-index:1100; }
/*—— Code previews ——*/
.code-preview {
  background:#2d2d2d; color:#ccc;
  font-family:'Courier New',monospace;
  font-size:0.95rem; line-height:1.4;
  height:250px; overflow:auto;
  padding:1rem; border-radius:.25rem; margin:0;
  white-space:pre-wrap;
}
/* Highlighted line */
.code-preview .changed {
  display:inline-block;
  width:100%;
  background:rgba(255,215,0,0.2);
}
/* Scrollbars */
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:#f5f7fa; }
::-webkit-scrollbar-thumb {
  background:linear-gradient(45deg,#4e54c8,#8f94fb);
  border-radius:5px;
}
::-webkit-scrollbar-thumb:hover {
  background:linear-gradient(45deg,#8f94fb,#4e54c8);
}
/* Buttons */
.btn-gradient {
  background:linear-gradient(135deg,#6f42c1,#6610f2);
  color:#fff; border:none; transition:background .2s;
}
.btn-gradient:hover {
  background:linear-gradient(135deg,#6610f2,#6f42c1);
}
.btn-gradient2 {
  background:linear-gradient(135deg,#198754,#20c997);
  color:#fff; border:none; transition:background .2s;
}
.btn-gradient2:hover {
  background:linear-gradient(135deg,#20c997,#198754);
}
/* Card headers */
.card-header {
  background:linear-gradient(45deg,#4e54c8,#8f94fb);
  color:#fff; font-weight:600;
}
.stripper-card .card-header {
  background:linear-gradient(45deg,#17a2b8,#28a745) !important;
  text-align:center;
}