/* ════ HTML5 BANNER → GIF ════ */
.gx-app{display:flex;flex-direction:column;gap:22px}
/* give every panel real breathing room (the global section{padding:30px 0} leaves 0 horizontal) */
.gx-app .panel{padding:22px}

/* HERO */
.gx-hero{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.gx-hero-left{flex:1;min-width:280px}
.gx-hero h2{font-size:28px;font-weight:800;color:#1a2236;letter-spacing:-.02em;margin-bottom:6px}
.gx-hero-sub{font-size:16px;font-weight:600;color:#475067;margin-bottom:10px}
.gx-hero-sub .accent{color:#db2777}
.gx-hero-note{font-size:13.5px;color:#7c879b;line-height:1.6;max-width:48ch}
.gx-hero-badges{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px}
.gx-hero-badges span{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:#475067}
.gx-hero-badges i{color:#db2777}
.gx-hero-art{display:flex;align-items:center;gap:14px}
.gx-art-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:104px;height:100px;border-radius:16px;background:#f3f5f9;border:1px solid #e3e7ef;color:#7c879b;font-size:13px;font-weight:700}
.gx-art-card i{font-size:25px}
.gx-art-card.out{background:#fce7f3;border-color:#f9a8d4;color:#db2777}
.gx-art-card small{font-size:9.5px;font-weight:600;color:#9aa3b8}
.gx-art-arrow{color:#cfd6e6;font-size:18px}

/* STEPS — side-by-side panels (wrap on narrow), matches the other tools */
.gx-steps{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.gx-steps>.panel{flex:1 1 320px;min-width:0}
.gx-step-head{display:flex;align-items:flex-start;gap:13px;margin-bottom:16px}
.gx-num{flex:none;width:30px;height:30px;border-radius:9px;background:#fce7f3;color:#db2777;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
.gx-num.done{background:#db2777;color:#fff}
.gx-step-head h2{font-size:17px;font-weight:800;color:#1a2236;margin-bottom:2px}
.gx-step-head p{font-size:12.5px;color:#7c879b}

.gx-upload .upload-icon{color:#db2777}
.gx-upload.drag{border-color:#db2777;background:#fdf2f8}

/* file list (queued banner ZIPs) */
.gx-file-list{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.gx-file{display:flex;align-items:center;gap:11px;padding:9px 13px;border:1px solid #e9ecf2;border-radius:10px;background:#fbfcfe;font-size:13px}
.gx-file>i{color:#db2777;font-size:16px}
.gx-file-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#2a3140;font-weight:600}
.gx-file-dim{color:#7c879b;font-weight:600;font-size:12px}
.gx-file-x{border:0;background:none;color:#c0c7d6;cursor:pointer;padding:3px;font-size:13px;transition:.15s}
.gx-file-x:hover{color:#e2435b}

/* progress (batch convert) — keeps animating until every banner is done */
.gx-progress{margin-top:16px}
.gx-prog-head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:#475067;margin-bottom:7px}
.gx-spin{flex:none;width:13px;height:13px;border:2px solid #f3c6dd;border-top-color:#db2777;border-radius:50%;animation:gx-spin .7s linear infinite}
.gx-prog-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gx-prog-pct{flex:none;color:#db2777}
.gx-prog-bar{position:relative;height:9px;border-radius:6px;background:#f3e3ec;overflow:hidden}
.gx-prog-bar::after{content:"";position:absolute;inset:0;border-radius:6px;background:linear-gradient(90deg,transparent,rgba(219,39,119,.22),transparent);background-size:40% 100%;background-repeat:no-repeat;animation:gx-sheen 1.3s linear infinite}
.gx-prog-fill{position:absolute;top:0;left:0;height:100%;width:0;border-radius:6px;transition:width .35s ease;background:linear-gradient(90deg,#db2777,#f472b6,#db2777);background-size:200% 100%;animation:gx-flow 1.1s linear infinite}
@keyframes gx-spin{to{transform:rotate(360deg)}}
@keyframes gx-flow{from{background-position:200% 0}to{background-position:0 0}}
@keyframes gx-sheen{from{background-position:-45% 0}to{background-position:145% 0}}

/* duration */
.gx-target-head{font-size:12.5px;font-weight:700;color:#475067;margin:18px 0 10px}
.gx-target-sub{font-weight:600;color:#9aa3b8}
.gx-durations{display:flex;flex-wrap:wrap;gap:10px}
.gx-dur{padding:10px 20px;border:1.5px solid #e3e7ef;border-radius:10px;background:#fff;cursor:pointer;font-weight:700;font-size:14px;color:#1a2236;transition:.18s}
.gx-dur:hover{border-color:#db2777}
.gx-dur.on{border-color:#db2777;background:#fdf2f8;color:#db2777}
.gx-hint{font-size:11.5px;color:#9aa3b8;margin-top:10px}
.gx-batch-note{display:flex;align-items:flex-start;gap:7px}
.gx-batch-note i{color:#db2777;margin-top:1px}

.gx-gen-row{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
.gx-reset{border:0;background:none;color:#7c879b;font-weight:600;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.gx-reset:hover{color:#2a3140}

/* RESULTS */
.gx-results-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.gx-results-actions{display:flex;align-items:center;gap:12px}
.gx-dlbtn{display:inline-flex;align-items:center;gap:8px;background:#db2777;color:#fff;border:0;border-radius:10px;padding:11px 20px;font-weight:700;font-size:13px;cursor:pointer;transition:.18s}
.gx-dlbtn:hover{background:#be185d}
/* result grid — one card per banner */
.gx-result-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-bottom:18px}
.gx-card{border:1px solid #e7ebf2;border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.gx-card-thumb{background:#f3f5f9 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><rect width="8" height="8" fill="%23e9ecf2"/><rect x="8" y="8" width="8" height="8" fill="%23e9ecf2"/></svg>');display:flex;align-items:center;justify-content:center;padding:10px;min-height:120px}
.gx-card-thumb img{max-width:100%;max-height:240px;height:auto;display:block}
.gx-card-body{padding:13px 15px 15px}
.gx-card-name{font-size:12.5px;font-weight:700;color:#2a3140;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:7px}
.gx-card-meta-line{font-size:11px;color:#7c879b;font-weight:600;line-height:1.5;margin-bottom:11px}
/* solid-dark download button — matches Resize / Build / Backup */
.gx-dl{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid #101725;background:#101725;color:#fff;font-weight:700;font-size:12.5px;padding:9px;border-radius:9px;cursor:pointer;transition:.15s}
.gx-dl:hover{background:#1d2740;border-color:#1d2740}
.gx-dl + .gx-dl{margin-top:7px}
.gx-dl.bj-dl-premium{color:#7a4d12;background:linear-gradient(180deg,#fdf0d8,#fbe6bf);border-color:#f0cf90}
.gx-dl.bj-dl-premium:hover{background:linear-gradient(180deg,#fbe6bf,#f7d9a0)}
.gx-card-fail{padding:22px 18px;text-align:center}
.gx-card-fail .gx-card-msg{font-size:12px;color:#e2435b;font-weight:600;margin-top:6px}
.gx-tip{font-size:12px;color:#9aa3b8;line-height:1.6}

/* service-recs headline accent in this tool's theme colour */
.gx-app .bj-more-intro h2 .accent{color:#db2777}

@media(max-width:1000px){ .gx-steps{flex-direction:column} }
@media(max-width:560px){ .gx-result-body{flex-direction:column} }