/* ===== Video Forge FX — versão web (Frutiger Aero) ===== */
:root{
  --aqua1:#00ffc8; --aqua2:#00c8ff;
  --panel1:rgba(10,20,40,.92); --panel2:rgba(10,60,50,.92);
  --ink:#eaffff;
}
*{box-sizing:border-box}
/* Garante que o atributo hidden sempre esconda (senão .overlay{display:flex} ganha) */
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;
  font-family:"Segoe UI",Tahoma,Verdana,sans-serif;
  color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  overflow:hidden;
}
/* Fundo: foto + gif de água em overlay */
.stage-bg{
  position:fixed; inset:0; z-index:-2;
  background:#06131f url("assets/background.jpg") center/cover no-repeat;
}
.stage-bg::after{
  content:""; position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(900px 500px at 70% 20%, rgba(0,200,255,.18), transparent 60%),
    url("assets/frutiger-aero-water.gif") center/cover no-repeat;
  opacity:.28; mix-blend-mode:screen; pointer-events:none;
}

/* ===== Janela principal ===== */
.app{
  width:min(560px,100%);
  max-height:calc(100dvh - 32px);
  display:flex; flex-direction:column;
  border-radius:16px;
  background:linear-gradient(135deg,var(--panel1),var(--panel2));
  border:2px solid transparent;
  background-clip:padding-box;
  box-shadow:0 18px 50px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,255,255,.25);
  position:relative;
  overflow:hidden;
}
.app::before{ /* borda aqua em gradiente */
  content:""; position:absolute; inset:0; border-radius:16px; padding:2px;
  background:linear-gradient(135deg,var(--aqua2),var(--aqua1));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}

.titlebar{
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 8px 7px 12px;
}
.title{display:flex; align-items:center; gap:8px; font-weight:700; letter-spacing:.3px; font-size:14px; text-shadow:0 1px 2px #000}
.title b{font-weight:800; color:#aef3ff}
.win-buttons{display:flex; gap:4px}
.win-btn{
  width:34px; height:24px; border:none; border-radius:7px; cursor:pointer;
  color:#fff; font-size:13px; font-weight:700;
  background:linear-gradient(#2aa0ff,#0050a0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.win-btn.blue:hover{background:linear-gradient(#49c0ff,#0070c0)}
.win-btn.blue.off{filter:grayscale(.7) brightness(.8)}
.win-btn.red{background:linear-gradient(#ff6a6a,#b02020)}

.content{display:flex; flex-direction:column; gap:8px; padding:4px 12px 12px; min-height:0}

/* Barra de ferramentas */
.toolbar{display:grid; grid-template-columns:repeat(5,1fr); gap:5px}
.tool{
  padding:5px 2px; font-size:10.5px; font-weight:800; letter-spacing:.2px;
  color:#fff; border:none; border-radius:7px; cursor:pointer; white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}
.tool:active{transform:translateY(1px)}
.green{background:linear-gradient(#18c877,#0a7c54)}
.green:hover{background:linear-gradient(#22e089,#0a9064)}
.blue{background:linear-gradient(#1aa0ff,#0050b4)}
.blue:hover{background:linear-gradient(#3ab6ff,#0068cc)}
.gray{background:linear-gradient(#5a7290,#38506e)}
.gray:hover{background:linear-gradient(#6a86a8,#47607e)}
.purple{background:linear-gradient(#8a5cff,#4e28a0)}
.purple:hover{background:linear-gradient(#9d74ff,#5e38b0)}

/* Lista */
.list-wrap{
  position:relative; flex:1; min-height:160px;
  border:1px solid rgba(0,150,255,.6); border-radius:8px;
  background:rgba(0,10,25,.35); overflow:auto;
}
.list-wrap.drag{outline:2px dashed var(--aqua1); outline-offset:-4px; background:rgba(0,60,90,.4)}
.file-list{list-style:none; margin:0; padding:6px; display:flex; flex-direction:column; gap:6px}
.item{
  display:grid; grid-template-columns:64px 1fr; grid-template-rows:auto auto auto;
  gap:3px 10px; align-items:center;
  padding:6px; border-radius:8px; background:rgba(10,40,60,.75);
  border:1px solid rgba(0,150,255,.25); cursor:pointer;
}
.item.sel{background:rgba(10,100,120,.85); border-color:var(--aqua1)}
.item .thumb{
  grid-row:1 / span 3; width:64px; height:40px; border-radius:6px;
  background:#000 center/contain no-repeat; display:flex; align-items:center; justify-content:center;
  color:#00c8ff; font-size:18px;
}
.item .name{font-weight:700; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.item .meta{display:flex; justify-content:space-between; gap:8px; font-size:10.5px; color:#a9d2e1}
.item .meta .st{font-weight:800}
.st-pend{color:#cfd8dc} .st-conv{color:#00e6ff} .st-done{color:#50ff96} .st-err{color:#ff6e6e} .st-canc{color:#ffc850}
.item .bar{grid-column:2; height:11px; border-radius:6px; background:rgba(10,40,80,.8); overflow:hidden; position:relative}
.item .bar > i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--aqua1),var(--aqua2));
  box-shadow:inset 0 5px 4px -3px rgba(255,255,255,.8);
  transition:width .18s ease;
}
.item .bar > span{position:absolute; inset:0; text-align:center; font-size:9px; font-weight:800; line-height:11px; text-shadow:0 1px 1px #000}
.item .dl{grid-column:2; justify-self:start; margin-top:2px; font-size:11px; font-weight:800; color:#8affd0; text-decoration:none}
.item .dl:hover{text-decoration:underline}

.empty{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; padding:16px; pointer-events:none}
.empty-big{font-weight:800; color:#bfefff}
.empty-small{color:#9fd6ea; font-size:13px}
.empty-note{margin-top:8px; font-size:11.5px; color:#7fb8cc}

/* Rodapé */
.statusbar{font-size:11.5px; color:#aadcf0; cursor:pointer}
.statusbar:hover{color:#fff}
.actions{display:flex; align-items:center; gap:6px}
.spacer{flex:1}
.glossy{
  padding:9px 16px; border:none; border-radius:10px; cursor:pointer;
  color:#fff; font-weight:800; letter-spacing:.3px; font-size:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
.glossy:active{transform:translateY(1px)}
.glossy.big{padding:10px 22px; font-size:13px}
.glossy.converting{background:linear-gradient(#ff9a2a,#b05a00)!important}
.glossy:disabled{opacity:.45; cursor:default; transform:none}

/* Créditos */
.credits{
  margin-top:8px; text-align:center; font-size:10.5px; line-height:1.5;
  color:#9fd0e4; opacity:.9;
}
.credits b{color:#eaffff}
.credits .handle{color:var(--aqua1); font-weight:700; text-decoration:none}
.credits .handle:hover{text-decoration:underline}

/* ===== Modais ===== */
.overlay{position:fixed; inset:0; background:rgba(0,10,20,.6); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; z-index:50; padding:16px}
.dialog{
  width:min(420px,100%); border-radius:14px; overflow:hidden;
  background:linear-gradient(135deg,var(--panel1),var(--panel2));
  box-shadow:0 20px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,255,255,.3);
  border:1px solid rgba(0,255,255,.3);
}
.dialog-title{display:flex; align-items:center; justify-content:space-between; padding:8px 8px 8px 14px; font-weight:800; font-size:14px}
.dialog-body{padding:6px 16px 14px; display:flex; flex-direction:column; gap:12px}
.dialog-body label{display:flex; flex-direction:column; gap:4px; font-weight:700; font-size:12px; color:#dff4ff}
.dialog-body label.check{flex-direction:row; align-items:center; gap:8px; font-weight:400}
.dialog-body select{
  padding:7px 8px; border-radius:7px; border:1px solid rgba(0,150,255,.5);
  background:#0a1830; color:#fff; font-size:13px;
}
.hint{margin:0; font-size:11px; color:#9fd0e4}
.dialog-actions{display:flex; justify-content:flex-end; gap:8px; padding:0 16px 16px}
[data-video].hidden-opt{display:none}

.preview-dialog{width:min(720px,100%)}
.preview-body{padding:10px 14px 16px}
.preview-body video{width:100%; max-height:70dvh; background:#000; border-radius:8px; display:block}
.preview-msg{padding:40px 16px; text-align:center; color:#bfe6f5; font-size:14px; line-height:1.5}

.loader-box{
  width:min(360px,100%); text-align:center; padding:28px 22px; border-radius:14px;
  background:linear-gradient(135deg,var(--panel1),var(--panel2));
  box-shadow:0 20px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,255,255,.3);
}
.loader-text{margin-top:14px; font-weight:800}
.loader-sub{margin-top:8px; font-size:11.5px; color:#9fd0e4}
.spinner{
  width:46px; height:46px; margin:0 auto; border-radius:50%;
  border:5px solid rgba(0,200,255,.25); border-top-color:var(--aqua1);
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Scrollbar aqua */
.list-wrap::-webkit-scrollbar{width:10px}
.list-wrap::-webkit-scrollbar-thumb{background:linear-gradient(var(--aqua1),var(--aqua2)); border-radius:10px}
.list-wrap::-webkit-scrollbar-track{background:rgba(10,40,60,.6)}

@media (max-width:420px){
  .toolbar{grid-template-columns:repeat(3,1fr)}
  .title span{font-size:12px}
}