:root{
  --bg:#0b1220; --card:#07102a; --accent1:#06b6d4; --accent2:#7c3aed; --muted:#93b2d9;
  --glass: rgba(255,255,255,0.03);
  --radius:14px;
  --pad:20px;
}
*{box-sizing:border-box}
html,body{
  height:100%;
  margin: 0;
}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto;
  background: linear-gradient(180deg,#061025 0%,#07132a 100%);
  color:#e6eef8;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px 18px; 
  min-height:100vh;
}

.card{
  width:100%;
  max-width: 960px; /* Optimal width for desktop content */
  height: min(95vh, 1000px); /* Controlled height */
  min-height: 500px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:var(--radius);
  padding:0; /* Padding handled by internal sections */
  box-shadow: 0 10px 40px rgba(2,6,23,0.6);
  border: 1px solid rgba(255,255,255,0.03);
  display:flex;
  flex-direction:column;
}

/* --- Fixed Layout Sections Padding --- */
.header, .controls, .app-footer, .result, .progress-wrap {
  padding: 12px 24px;
}
.header {
  padding-bottom: 0;
}
.controls {
  padding-top: 8px;
}
.result {
  padding-top: 0;
}

/* --- Scrollable Content Wrapper --- */
#content-wrapper {
  flex: 1; 
  overflow-y: auto; 
  padding: 12px 24px 24px 24px; 
  display: flex;
  flex-direction: column;
}

.header h1{margin:0;font-size:20px}
.muted{color:var(--muted);margin-top:6px;font-size:13px}

.upload-area{margin-top:0; display:flex; flex:1;}
.drop{
  display:flex;
  width:100%;
  border-radius:12px;
  border:2px dashed rgba(255,255,255,0.04);
  background:var(--glass);
  padding:28px 22px;
  cursor:pointer;
  transition:transform .12s ease, border-color .12s;
  flex:1; 
  min-height:200px; 
  align-items:center; 
  justify-content:center;
}
.drop:hover{
  transform:translateY(-2px); 
  border-color: rgba(124,58,237,0.35);
}
.drop input{display:none}
.drop-inner{display:flex;align-items:center;flex-direction:column;gap:10px;text-align:center}
.drop-inner svg{opacity:.95; color:var(--accent1); width:56px;height:56px}
.drop-inner .title{font-size:16px;color:#eaf6fb;font-weight:700}
.hint{font-size:13px;color:var(--muted);margin-top:4px}

/* File list styles */
.file-list{margin-top:16px}
.file-list .files{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.file-item{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background:rgba(255,255,255,0.02);border-radius:8px;border:1px solid rgba(255,255,255,0.02)}
.file-item span{font-size:13px;color:#dfeffb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-item .remove{background:transparent;border:0;color:var(--muted);cursor:pointer;padding:6px;border-radius:6px}
.file-item .remove:hover{color:#ff8b8b}

/* Control Buttons */
.controls{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content: space-between;
}
.controls-row {
  display: flex;
  gap: 12px;
}
.btn{
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  color:white;border:0;
  padding:12px 20px; /* ENLARGED BUTTON SIZE */
  border-radius:10px;cursor:pointer;font-weight:600;
}
.btn.secondary { /* Style for Reset button */
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--muted);
  padding: 11px 19px; /* ENLARGED PADDING */
}
.btn.secondary:hover:not(:disabled) {
  color: #fff;
  border-color: #fff;
}
.btn:disabled{opacity:.6;cursor:not-allowed}
.status{color:var(--muted);font-size:13px}

.progress-wrap{
  height:12px;
  background:#031024;
  border-radius:999px;
  overflow:hidden;
  padding: 0 24px 12px 24px;
}
.progress-bar{height:100%;background:linear-gradient(90deg,var(--accent1),var(--accent2));width:0%}

.result a.download{
  display:inline-block;padding:8px 12px;background:#071028;border-radius:10px;color:#cfeaff;text-decoration:none;
}

/* App footer */
.app-footer{
  padding-top:12px;
  padding-bottom:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-size:13px;
  border-top:1px solid rgba(255,255,255,0.03);
}
.footer-text-content{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:rgba(207,234,255,0.85);
}
.footer-link{
  color:var(--accent1);
  text-decoration:none;
  font-weight:700;
  background: linear-gradient(90deg,var(--accent1),var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.footer-link:hover{opacity:0.95;filter:brightness(1.05)}

/* Preview grid for selected files */
.previews{display:flex;gap:20px;flex-wrap:wrap;margin-top:16px}
.preview{width:300px;display:flex;flex-direction:column;gap:10px;align-items:center} /* DESKTOP WIDTH: 300px */
.preview-wrap{position:relative;width:300px;height:210px;border-radius:12px;overflow:hidden;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.02)} /* HEIGHT: 300 * 0.7 = 210px */
.preview-remove{position:absolute;right:8px;top:8px;background:rgba(0,0,0,0.28);border:0;color:#fff;padding:6px 8px;border-radius:8px;cursor:pointer}
.preview-thumb{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.preview-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.preview-filename{font-size:14px;color:var(--muted);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;max-width:300px}

/* Compact drop area state */
.drop.compact{padding:12px 14px;min-height:210px; width: 300px;} /* MATCH HEIGHT & WIDTH */
.drop.compact .drop-inner{flex-direction:row;gap:10px}


/* --- Responsive Adjustments --- */
@media (max-width: 920px) {
  .preview { width: 240px; }
  .preview-wrap { width: 240px; height: 168px; }
  .preview-filename { max-width: 240px; }
  .drop.compact { min-height: 168px; width: 240px; }
}

@media (max-width: 720px) {
  .preview { width: 180px; }
  .preview-wrap { width: 180px; height: 126px; }
  .preview-filename { max-width: 180px; }
  .drop.compact { min-height: 126px; width: 180px; }
  
  .controls { flex-direction: column; align-items: flex-start; gap: 4px; }
  .controls-row { width: 100%; justify-content: space-between; }
  .status { margin-top: 4px; }
  
  /* Reduce padding on mobile devices for better space usage */
  .header, .controls, .app-footer, .result, #content-wrapper, .progress-wrap {
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (max-width: 520px) {
  .preview { width: 140px; }
  .preview-wrap { width: 140px; height: 98px; }
  .drop.compact { min-height: 98px; width: 140px; }
  .preview-filename{max-width:140px;font-size:12px}
  
  /* Even tighter spacing on very small screens */
  .previews { gap: 10px; }
}