/* Custom styles to improve look-and-feel */
:root{
  --accent: #2563eb; /* blue-600 */
  --card-bg: #ffffff;
  --muted: #6b7280;
}
html,body{height:100%;}
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: linear-gradient(180deg, #eef2ff 0%, #eef2ff 100%);
  margin:0;
}
#root{padding:28px;}
.card{
  background: var(--card-bg);
  border-radius:12px;
  box-shadow: 0 6px 18px rgba(2,6,23,0.08);
  padding:20px;
}
.header-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.header-row h1{font-weight:700;color:#0f172a}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:8px;border:0;cursor:pointer}
.btn-primary{background:var(--accent);color:white}
.btn-danger{background:#dc2626;color:white}
.input{width:100%;padding:10px;border-radius:8px;border:1px solid #e5e7eb}
.preview{background:#f8fafc;border-radius:8px;padding:12px;min-height:240px;overflow:auto}
.footer-note{font-size:12px;color:var(--muted);margin-top:12px}
/* Make lucide icons consistent */
.lucide{width:18px;height:18px}
/* Responsive tweaks */
@media (max-width:768px){
  #root{padding:16px}
}

/* Improved drop zone styles */
.drop-zone{
  transition: all .18s ease;
  border-radius:10px;
  cursor: pointer;
  padding:1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  background: linear-gradient(180deg,#ffffff 0%, #fbfdff 100%);
}
.drop-zone .dz-icon{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; color:var(--accent); opacity:0.95; transition: transform .18s ease, opacity .18s ease; }
.drop-zone .dz-text{ color:var(--muted); font-size:0.95rem; text-align:center; }
.drop-zone.active{ border-color:#10b981 !important; background: linear-gradient(180deg,#ecfdf5 0%, #ffffff 100%); box-shadow:0 10px 30px rgba(16,185,129,0.08); transform: translateY(-2px); }
.drop-zone.error{ border-color:#ef4444 !important; background: linear-gradient(180deg,#fff1f2 0%, #ffffff 100%); box-shadow:0 8px 24px rgba(239,68,68,0.06); }
.drop-zone:hover{ box-shadow: 0 8px 18px rgba(2,6,23,0.08); transform: translateY(-1px); }
@keyframes pulse-dz { 0% { box-shadow:0 0 0 0 rgba(37,99,235,0.12);} 70% { box-shadow:0 0 0 14px rgba(37,99,235,0);} 100% { box-shadow:0 0 0 0 rgba(37,99,235,0);} }
.drop-zone.pulsing{ animation: pulse-dz 1.6s infinite; }

/* Make lucide icons inside drop-zone a bit larger */
.drop-zone .lucide{ width:28px; height:28px; }

@media (max-width:480px){
  .drop-zone{ padding:0.75rem; gap:8px }
  .drop-zone .dz-text{ font-size:0.9rem }
}

/* Resizable preview box to avoid excessively long fixed height */
.resizable-preview{
  resize: vertical;
  overflow: auto;
  min-height: 140px;
  max-height: 640px;
  padding: 0.75rem;
}