*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#07111f;color:#f2f6ff;font-family:"Segoe UI",Arial,sans-serif}
body{padding:8px 14px}
.app{height:100vh;display:flex;flex-direction:column;gap:8px}
.topbar{height:76px;background:#0d1829;border:1px solid #243955;border-radius:16px;display:grid;grid-template-columns:1fr 1.3fr 1fr;align-items:center;padding:10px 18px}
.brand{display:flex;align-items:center;gap:14px}.logo{width:50px;height:50px;border-radius:14px;background:#1a2d4b;color:#48a5ff;display:grid;place-items:center;font-size:24px}
.title{font-size:28px;font-weight:650}.subtitle{color:#8cff3e;font-size:14px}.stats{text-align:center;font-size:17px}.stats strong{color:#41ff5b;font-size:20px}
.actions{display:flex;justify-content:flex-end;gap:10px}.actions button{height:40px;padding:0 22px;border-radius:10px;border:1px solid #345074;background:#15233a;color:white;font-weight:600}
.main-grid{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.card{background:#0d1929;border:1px solid #263c5b;border-radius:16px;padding:14px;overflow:hidden}
.left,.right{display:flex;flex-direction:column}
.dropzone{height:170px;border:2px dashed #96a8c2;border-radius:16px;background:#17233a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.dropzone input{display:none}.folder{font-size:36px}.drop-title{font-size:19px}.browse{background:#1e78bc;border:1px solid #66b7ff;border-radius:8px;color:white;padding:8px 24px}.supported{color:#94a1b8;font-size:12px}
.table{height:160px;margin-top:10px;border:1px solid #263b59;border-radius:9px;overflow:hidden;background:#0e1726}.tr{display:grid;grid-template-columns:44px 1fr 110px 80px 130px;min-height:36px;align-items:center;border-bottom:1px solid #21334d}.tr div{padding:8px}.th{background:#17243b;color:#cdd9ea}.ok{color:#2ee979}.fileRows{height:124px;overflow:auto}.empty-state{height:124px;display:grid;place-items:center;color:#98a7bd}
.section-title,.block-title{background:#081320;font-weight:700;padding:5px 0;margin-top:8px}
.log{height:155px;margin:6px 0;background:#0b1423;border:1px solid #263b59;border-radius:10px;padding:14px;color:#d7e2f4;white-space:pre-wrap;font-family:inherit;line-height:1.45;overflow:auto}
.status{margin-top:10px;border:1px solid #168fe7;border-radius:10px;background:#0a1728;padding:12px}.status strong{display:block;color:#40c4ff;margin-bottom:10px}.status-line{display:flex;justify-content:space-between}.progress{height:20px;border-radius:999px;background:#263447;overflow:hidden;position:relative;margin-top:10px}.progress span{display:block;height:100%;width:0;background:#24df72}.progress em{position:absolute;inset:0;display:grid;place-items:center;font-style:normal}.jobid{font-size:12px;color:#b6c6dd;margin-top:6px}.error{color:#ff6b7d;font-size:12px;max-height:48px;overflow:auto}
.download{display:block;margin-top:10px;text-align:center;background:#075a9a;border:1px solid #148fe4;color:#31c9ff;text-decoration:none;border-radius:8px;padding:12px;font-size:18px}
.hidden{display:none}
.start{height:58px;width:100%;margin-top:10px;border:0;border-radius:12px;background:#22ba62;color:white;font-size:22px;letter-spacing:1px}.start:disabled{opacity:.55}.bottom-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}.bottom-buttons button{height:40px;border-radius:10px;border:1px solid #243955;background:#101a2b;color:#cbd4e5}
.models{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:8px}.model{height:90px;text-align:left;border-radius:12px;border:1px solid #2c4367;background:#17243b;color:white;padding:14px}.model strong{display:block;font-size:18px}.model span{display:block;color:#a9b6ca;margin-top:6px}.model small{display:block;color:#8998ae}.model.active{border:2px solid #22e177;box-shadow:0 0 14px #22e17740}
.divider{height:1px;background:#9fb0c9;margin:12px 0}select{height:44px;width:100%;border-radius:8px;border:1px solid #31496d;background:#17243b;color:white;padding:0 10px;font-size:15px}
.option{height:29px;background:#091424;margin:5px 0;color:#e5edf9;display:flex;align-items:center;gap:10px}.option input{appearance:none;width:22px;height:22px;border:1px solid #66809f;border-radius:6px;background:#111d30;margin:0}.option input:checked{background:#28d873;border-color:#28d873}.option span{flex:1}.option b{font-weight:400;color:#71839e}.option.disabled{opacity:.5}
.adbox{flex:1;margin-top:18px;border:1px dashed #8b9bb4;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:white;font-size:24px;min-height:260px}.adbox span{margin-top:8px}.adicon{font-size:46px;color:#a8b6ca;margin-bottom:18px}
@media(max-height:850px){.topbar{height:64px}.title{font-size:24px}.dropzone{height:145px}.table{height:135px}.fileRows,.empty-state{height:99px}.log{height:130px}.model{height:76px}.adbox{min-height:220px}.start{height:52px}}
@media(max-width:1000px){html,body{overflow:auto}.app{height:auto}.topbar{grid-template-columns:1fr}.stats,.actions{display:none}.main-grid{grid-template-columns:1fr}}

  justify-content:center;
}

.actions a{
  height:40px;
  padding:0 18px;
  border-radius:10px;
  border:1px solid #345074;
  background:#15233a;
  color:#ffffff !important;
  font-weight:600;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
}

.actions a:visited{
  color:#ffffff !important;
}

.actions a:hover{
  color:#ffffff !important;
}


.supported{
    margin-top:-6px !important;
    margin-bottom:16px !important;
    position:relative;
    top:-8px;
}

.dropzone h2{
    margin-bottom:8px;
}

header a,
header a:link,
header a:visited,
.topbar a,
.topbar a:link,
.topbar a:visited,
.actions a,
.actions a:link,
.actions a:visited{
  color:#ffffff !important;
  text-decoration:none !important;
}

.actions a{
  height:40px !important;
  padding:0 18px !important;
  border-radius:10px !important;
  border:1px solid #345074 !important;
  background:#15233a !important;
  font-weight:600 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin-left:8px !important;
}

.actions a:hover{
  background:#1d2f4d !important;
  color:#ffffff !important;
}

nav.actions a,
nav.actions a:link,
nav.actions a:visited{
  color:#ffffff !important;
  text-decoration:none !important;
  height:40px !important;
  padding:0 18px !important;
  border-radius:10px !important;
  border:1px solid #345074 !important;
  background:#15233a !important;
  font-weight:600 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin-left:8px !important;
}

nav.actions a:hover{
  background:#1d2f4d !important;
  color:#ffffff !important;
}


.site-footer{
  height:36px;
  margin-top:6px;
  padding:0 18px;
  border:1px solid #263c5b;
  border-radius:12px;
  background:#0d1829;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#aebbd0;
  font-size:13px;
  flex-shrink:0;
}

.site-footer nav{
  display:flex;
  gap:16px;
}

.site-footer a,
.site-footer a:link,
.site-footer a:visited{
  color:#ffffff !important;
  text-decoration:none !important;
  font-weight:600;
}

.site-footer a:hover{
  color:#8cff3e !important;
}

.hero-slogan{
  font-size:32px;
  font-weight:700;
  color:#ffffff;
  letter-spacing:.3px;
  white-space:nowrap;
  text-align:right;
  margin-right:10px;
}
.hero-slogan{
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  text-align: right;
  margin-right: 12px;
  letter-spacing: .3px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

#log.live-preview{
  overflow:hidden !important;
  white-space:pre-wrap;
  line-height:1.65;
  font-size:14px;
  text-align:left;
}

#log.live-preview[dir="rtl"]{
  text-align:right;
  direction:rtl;
}

.dropzone h2{
  margin-bottom:18px !important;
}

.supported{
  margin-top:10px !important;
}

#log.live-preview{
  overflow:hidden !important;
  white-space:pre-wrap;
  line-height:1.65;
  font-size:14px;
}

#log.live-preview[dir="rtl"]{
  text-align:right;
  direction:rtl;
}

#log.live-preview[dir="ltr"]{
  text-align:left;
  direction:ltr;
}

.live-preview-box{
  margin-top:8px;
  height:52px;
  overflow:hidden;
  padding:10px 12px;
  border:1px solid #2a4568;
  border-radius:10px;
  background:#07111f;
  color:#d8e6ff;
  font-size:14px;
  line-height:1.55;
  white-space:pre-wrap;
}

.live-preview-box.hidden{ display:none; }
.live-preview-box[dir="rtl"]{ direction:rtl; text-align:right; }
.live-preview-box[dir="ltr"]{ direction:ltr; text-align:left; }

/* Activity Log - no scrollbar */
.log{
  overflow:hidden !important;
  scrollbar-width:none;
}

.log::-webkit-scrollbar{
  display:none;
}

/* Live Preview - larger, no scrollbar */
.live-preview-box{
  min-height:90px !important;
  max-height:90px !important;
  overflow:hidden !important;
  scrollbar-width:none;
}

.live-preview-box::-webkit-scrollbar{
  display:none;
}

/* Activity Log */
.log{
  overflow:hidden !important;
  scrollbar-width:none !important;
}

.log::-webkit-scrollbar{
  display:none !important;
}

/* Live Preview */
.live-preview-box{
  min-height:90px !important;
  max-height:90px !important;
  overflow:hidden !important;
  scrollbar-width:none !important;
}

.live-preview-box::-webkit-scrollbar{
  display:none !important;
}

/* Final Activity Log / Live Preview sizing */
.log{
  height:72px !important;
  max-height:72px !important;
  overflow:hidden !important;
  font-size:11px !important;
  line-height:1.45 !important;
  scrollbar-width:none !important;
}

.log::-webkit-scrollbar{
  display:none !important;
}

.live-preview-box{
  height:96px !important;
  min-height:96px !important;
  max-height:96px !important;
  overflow:hidden !important;
  font-size:14px !important;
  line-height:1.55 !important;
  scrollbar-width:none !important;
}

.live-preview-box::-webkit-scrollbar{
  display:none !important;
}

/* Layout stability fix */
.left-panel,
.upload-panel,
.panel{
  overflow:visible !important;
}

.file-list,
.files-table{
  max-height:120px !important;
  overflow:hidden !important;
}

.log{
  height:68px !important;
  max-height:68px !important;
  min-height:68px !important;
  overflow:hidden !important;
  font-size:11px !important;
  line-height:1.45 !important;
}

.live-preview-box{
  height:108px !important;
  min-height:108px !important;
  max-height:108px !important;
  overflow:hidden !important;
  font-size:14px !important;
  line-height:1.55 !important;
}

.processing-status,
.status-card{
  margin-top:12px !important;
  position:relative !important;
  z-index:2;
}

.start-btn,
#startBtn{
  margin-top:12px !important;
}

/* Live Preview smooth slide/fade animation */
.live-preview-box{
  position:relative !important;
  overflow:hidden !important;
  scrollbar-width:none !important;
}

.live-preview-box::-webkit-scrollbar{
  display:none !important;
}

.live-preview-inner{
  display:block;
  animation: livePreviewSlideFade 0.45s ease-out;
}

@keyframes livePreviewSlideFade{
  from{
    opacity:0;
    transform:translateY(16px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Live Preview Sliding Window v1 */
.live-preview-box{
  overflow:hidden !important;
}

.live-preview-lines{
  display:flex;
  flex-direction:column;
  gap:4px;
  animation:liveSlideUp 0.35s ease-out;
}

.live-preview-line{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@keyframes liveSlideUp{
  from{
    transform:translateY(18px);
  }
  to{
    transform:translateY(0);
  }
}

/* Live Preview true queue animation */
.live-preview-box{
  position:relative !important;
  overflow:hidden !important;
}

.live-preview-queue{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  height:100%;
  gap:4px;
}

.live-preview-queue.slide{
  animation:liveQueueSlide 0.45s ease-out;
}

.live-preview-line{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@keyframes liveQueueSlide{
  from{
    transform:translateY(22px);
  }
  to{
    transform:translateY(0);
  }
}

/* Live Preview smooth 3-line sliding window v2 */
.live-preview-box{
  height:72px !important;
  min-height:72px !important;
  max-height:72px !important;
  overflow:hidden !important;
  position:relative !important;
  scrollbar-width:none !important;
}

.live-preview-box::-webkit-scrollbar{
  display:none !important;
}

.live-preview-viewport{
  height:72px !important;
  overflow:hidden !important;
  position:relative !important;
}

.live-preview-track{
  display:flex !important;
  flex-direction:column !important;
  transform:translateY(0);
  transition:transform 0.40s ease-out;
}

.live-preview-track.slide-up{
  transform:translateY(-18px);
}

.live-preview-line{
  height:18px !important;
  line-height:7px !important;
  font-size:11px !important;
  margin:0 !important;
  padding:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* Live Preview smooth 3-line sliding window v2 */
.live-preview-box{
  height:72px !important;
  min-height:72px !important;
  max-height:72px !important;
  overflow:hidden !important;
  position:relative !important;
  scrollbar-width:none !important;
}

.live-preview-box::-webkit-scrollbar{
  display:none !important;
}

.live-preview-viewport{
  height:72px !important;
  overflow:hidden !important;
  position:relative !important;
}

.live-preview-track{
  display:flex !important;
  flex-direction:column !important;
  transform:translateY(0);
  transition:transform 0.40s ease-out;
}

.live-preview-track.slide-up{
  transform:translateY(-18px);
}

.live-preview-line{
  height:18px !important;
  line-height:18px !important;
  font-size:11px !important;
  margin:0 !important;
  padding:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* Activity Log final tuning like Live Preview */
.log{
  height:72px !important;
  min-height:72px !important;
  max-height:72px !important;
  overflow:hidden !important;
  padding:9px 12px !important;
  font-size:11px !important;
  line-height:18px !important;
  scrollbar-width:none !important;
}

.log::-webkit-scrollbar{
  display:none !important;
}

/* Model estimate badges */
.model-estimate{
  margin-top:10px;
  font-size:13px;
  line-height:1.2;
  color:#7ee7ff;
  font-weight:600;
}

.model-estimate.hidden{
  display:none;
}

/* Estimated time inside model cards */
.model-estimate{
  display:block !important;
  margin-top:8px !important;
  font-size:12px !important;
  line-height:1.2 !important;
  color:#7ee7ff !important;
  font-weight:700 !important;
}

/* Put estimate inside model cards */
.model{
  position:relative !important;
  overflow:hidden !important;
  padding-bottom:34px !important;
}

.model .model-estimate{
  position:absolute !important;
  right:16px !important;
  bottom:10px !important;
  margin:0 !important;
  display:block !important;
  font-size:13px !important;
  line-height:1 !important;
  color:#7ee7ff !important;
  font-weight:800 !important;
  text-align:right !important;
}

/* Duration column in file list */
.file-header,
.file-row{
  grid-template-columns: 2fr 110px 110px 90px 140px !important;
}

.file-duration-cell{
  color:#d7e2f4;
  white-space:nowrap;
}

/* File table direct duration layout */
.tr{
  grid-template-columns: 34px minmax(0,2fr) 90px 90px 70px 120px !important;
}

.file-duration-cell{
  color:#d7e2f4 !important;
  white-space:nowrap !important;
  font-weight:500 !important;
}

/* File list 5-column layout with Duration */
.files-head,
.file-head,
.file-header,
.file-row,
.tr{
  grid-template-columns: 34px minmax(0,2fr) 110px 110px 80px 140px !important;
  align-items:center !important;
}

.files-head,
.file-head,
.file-header{
  display:grid !important;
}

.file-row,
.tr{
  display:grid !important;
}

.file-duration-cell{
  text-align:left !important;
}

/* Final 5-column file table */
.file-head,
.file-row,
.tr{
  display:grid !important;
  grid-template-columns: 34px minmax(0,2fr) 120px 120px 90px 150px !important;
  align-items:center !important;
}

.file-head{
  grid-template-columns: minmax(0,2fr) 120px 120px 90px 150px !important;
}

.file-duration-cell{
  color:#d7e2f4 !important;
  white-space:nowrap !important;
  font-weight:500 !important;
}

/* Exact file table layout: icon + File + Duration + Size + Type + Status */
.tr.th,
.fileRows .tr{
  display:grid !important;
  grid-template-columns: 34px minmax(0,2fr) 120px 120px 90px 150px !important;
  align-items:center !important;
}

.tr.th{
  font-weight:500 !important;
}

.file-duration-cell{
  color:#d7e2f4 !important;
  white-space:nowrap !important;
  font-weight:500 !important;
}