:root{
  --ws:#12131c;
  --panel:#1a1c29;
  --header:#12131c;
  --border:#242838;
  --text:#fff5eb;
  --dim:#9e9eb0;
  --accent:#6058f0;
  --accent-bright:#8b85f5;
  --accent-soft:rgba(96,88,240,.18);
  --grad-a:#8b85f5;
  --grad-b:#4040a0;
  --danger:#e0524b;
  --hover:#222433;
  --ok:#5ebe8f;
  --font-ui:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-display:'Syne',system-ui,sans-serif;
  --shell:clamp(1rem,3vw,2rem);
  --max:1100px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:var(--font-ui);
  background:var(--ws);
  color:var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
.app{min-height:100%;display:flex;flex-direction:column}
.atmosphere{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 45% at 12% -8%,rgba(96,88,240,.22),transparent 55%),
    radial-gradient(ellipse 50% 35% at 90% 8%,rgba(139,133,245,.1),transparent 50%),
    linear-gradient(180deg,#12131c 0%,#141522 50%,#12131c 100%);
}

.tool-nav{
  height:52px;flex:0 0 auto;
  display:flex;align-items:center;gap:12px;
  padding:0 var(--shell);
  background:rgba(18,19,28,.88);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(12px);
  position:sticky;top:0;z-index:40;
}
.brand{
  display:inline-flex;align-items:center;gap:8px;
  border-radius:8px;padding:4px 6px;margin-left:-6px;
  transition:background .15s ease;
}
.brand:hover{background:var(--hover)}
.brand-mark{width:22px;height:22px;flex:0 0 auto;border-radius:5px}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:-.01em}
.brand-sub{font-size:11px;color:var(--dim);font-weight:500;margin-left:2px}
.tool-nav .spacer{flex:1}
.tool-nav .nav-links{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.tool-nav .nav-links a{
  font-size:12px;color:var(--dim);padding:6px 9px;border-radius:7px;
  transition:background .12s,color .12s;
}
.tool-nav .nav-links a:hover,.tool-nav .nav-links a[aria-current="page"]{
  color:var(--text);background:var(--accent-soft);
}
.home-ico{
  width:30px;height:30px;display:grid;place-items:center;border-radius:7px;color:var(--dim);
}
.home-ico:hover{background:var(--hover);color:var(--text)}
.home-ico svg{width:15px;height:15px}

.tool-main{
  flex:1;width:min(var(--max),100%);
  margin:0 auto;padding:28px var(--shell) 48px;
}
.tool-hero{margin-bottom:22px}
.tool-hero h1{
  margin:0 0 8px;font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.1rem);
  letter-spacing:-.03em;font-weight:800;
}
.tool-hero p{margin:0;color:var(--dim);max-width:52ch}
.privacy{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-size:12px;color:var(--dim);padding:5px 10px;border-radius:999px;
  border:1px solid var(--border);background:rgba(26,28,41,.65);
}

.panel{
  background:var(--panel);border:1px solid var(--border);border-radius:16px;
  padding:18px;margin-bottom:16px;
}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.tab{
  border:1px solid var(--border);background:transparent;color:var(--dim);
  border-radius:9px;padding:8px 12px;font-size:13px;font-weight:600;
}
.tab:hover{color:var(--text);background:var(--hover)}
.tab.active{color:var(--accent-bright);background:var(--accent-soft);border-color:rgba(96,88,240,.45)}

.dropzone{
  border:1.5px dashed rgba(158,158,176,.35);border-radius:14px;
  padding:36px 18px;text-align:center;color:var(--dim);
  background:rgba(18,19,28,.35);transition:border-color .15s,background .15s;
  cursor:pointer;
}
.dropzone:hover,.dropzone.drag{
  border-color:rgba(96,88,240,.65);background:var(--accent-soft);color:var(--text);
}
.dropzone strong{display:block;color:var(--text);font-size:15px;margin-bottom:4px}
.dropzone input[type=file]{display:none}

.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.field{display:flex;flex-direction:column;gap:6px;min-width:140px}
.field label{font-size:11px;color:var(--dim);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.field input,.field select,.field textarea{
  background:#12131c;border:1px solid var(--border);border-radius:9px;
  padding:9px 11px;outline:none;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:rgba(96,88,240,.55)}
.field textarea{min-height:88px;resize:vertical}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:10px;padding:10px 16px;font-weight:650;font-size:13.5px;
  border:1px solid transparent;transition:transform .12s,background .12s,opacity .12s;
}
.btn:disabled{opacity:.4;cursor:default}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover:not(:disabled){background:var(--accent-bright)}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--text)}
.btn-ghost:hover:not(:disabled){background:var(--hover)}
.btn-danger{background:rgba(224,82,75,.15);color:#ff8f8a;border-color:rgba(224,82,75,.35)}

.file-list{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.file-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  background:#12131c;border:1px solid var(--border);font-size:13px;
}
.file-item .meta{color:var(--dim);font-size:12px;margin-left:auto}
.file-item button.x{
  border:none;background:transparent;color:var(--dim);padding:4px 6px;border-radius:6px;
}
.file-item button.x:hover{background:var(--hover);color:var(--text)}

.preview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:14px}
/* display:grid beats the UA [hidden] rule in some browsers — force hide. */
.preview-grid[hidden],.preview-grid.is-hidden{display:none!important}
.preview-card{
  background:#12131c;border:1px solid var(--border);border-radius:12px;overflow:hidden;
}
.preview-card .cap{padding:8px 10px;font-size:12px;color:var(--dim);border-bottom:1px solid var(--border)}
.preview-card .stage{
  min-height:160px;display:grid;place-items:center;position:relative;
  background:
    linear-gradient(45deg,#2a2c3a 25%,transparent 25%),
    linear-gradient(-45deg,#2a2c3a 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#2a2c3a 75%),
    linear-gradient(-45deg,transparent 75%,#2a2c3a 75%);
  background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;
}
.preview-card .stage .placeholder{color:var(--dim);font-size:12px;padding:24px;text-align:center}
.preview-card img,.preview-card canvas,.preview-card video{
  display:block;width:100%;height:auto;max-height:420px;object-fit:contain;
}
.preview-card img:not([src]),.preview-card img[src=""],.preview-card img[hidden]{display:none!important}
.status{font-size:13px;color:var(--dim);margin-top:10px;min-height:1.2em}
.status.err{color:#ff8f8a}
.status.ok{color:var(--ok)}
.progress{
  height:6px;border-radius:99px;background:#12131c;overflow:hidden;margin-top:10px;display:none;
}
.progress > span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-bright));transition:width .2s}

.tool-footer{
  margin-top:auto;padding:18px var(--shell) 28px;border-top:1px solid var(--border);
  color:var(--dim);font-size:12px;text-align:center;
}
.tool-footer a{color:var(--accent-bright)}
.tool-footer .more{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:10px}
.tool-footer .more a{
  padding:6px 10px;border-radius:8px;border:1px solid var(--border);color:var(--dim);
}
.tool-footer .more a:hover{color:var(--text);background:var(--hover)}

@media (max-width:720px){
  .tool-nav .nav-links{display:none}
  .tool-main{padding-top:20px}
}