#tool[data-tool^="image-"] .files,#tool[data-tool="heic-to-jpg"] .files{padding:0;list-style:none}
#tool .files li{display:flex;align-items:center;gap:16px;padding:16px 0;flex-wrap:wrap}
#tool .files li img{width:96px;height:72px;object-fit:contain;background:#edf1f3}
#tool .files li .name{flex:1;min-width:180px;overflow-wrap:anywhere}
#tool .image-queue-status:empty{display:none}
#tool[data-tool="image-resizer"]>.grid{grid-template-columns:repeat(4,minmax(0,1fr))}
#tool[data-tool="circle-crop"] .cc-edit{display:grid;grid-template-columns:minmax(240px,1fr) 1fr;gap:16px;align-items:center}
#tool[data-tool="circle-crop"] .cc-edit .preview-box{grid-row:span 4;margin:0!important}
#tool[data-tool="circle-crop"] .cc-edit.hidden{display:none}
#tool[data-tool="meme-generator"] .mm-edit{max-width:900px;margin:auto}
#tool[data-tool="meme-generator"] canvas{max-height:60vh;object-fit:contain}
#tool[data-tool="video-to-gif"] video{background:#172126}
#tool[data-tool="image-to-base64"] textarea{min-height:100px}
@media(max-width:700px){#tool[data-tool="image-resizer"]>.grid{grid-template-columns:1fr 1fr}#tool[data-tool="circle-crop"] .cc-edit{display:block}#tool .files li .name{min-width:160px}#tool .files li img{width:64px;height:64px}#tool .btn{min-height:44px}}

#tool[data-tool] [hidden]{display:none!important}

/* Premium workspace: open canvas, quiet controls, real media as the focal point. */
body:has(.image-workshop),body:has(#tool[data-tool="circle-crop"]),body:has(#tool[data-tool="meme-generator"]),body:has(#tool[data-tool="image-to-base64"]),body:has(#tool[data-tool="video-to-gif"]){background:#f2f4f5}
body:has(#tool[data-tool="image-resizer"]) h1,body:has(#tool[data-tool="image-converter"]) h1,body:has(#tool[data-tool="heic-to-jpg"]) h1,body:has(#tool[data-tool="circle-crop"]) h1,body:has(#tool[data-tool="meme-generator"]) h1,body:has(#tool[data-tool="video-to-gif"]) h1,body:has(#tool[data-tool="image-to-base64"]) h1{font:600 clamp(25px,3vw,34px)/1.15 system-ui,sans-serif;letter-spacing:-.04em}
.image-workshop .image-stage{display:grid;grid-template-columns:280px minmax(0,1fr);gap:28px;margin-top:24px}
.image-workshop .image-settings>.grid{grid-template-columns:1fr 1fr!important}
.image-workshop .image-settings>.grid:first-child{grid-template-columns:1fr 1fr!important}
.image-workshop .image-settings .row{align-items:start}
.image-workshop .image-settings .grid,.image-workshop .image-settings .row{margin-bottom:18px}
.image-workshop .image-results{min-width:0;background:#f4f6f7;padding:20px;border-radius:6px}
.image-workshop .image-empty{min-height:160px;display:flex;align-items:center;justify-content:center;max-width:36ch;margin:auto;text-align:center;color:#566069}
.image-workshop .drop{min-height:100px}
.image-workshop .files li{align-items:start;background:#fff;padding:16px;margin:12px 0;border-radius:4px}
.image-workshop .files li img{width:136px;height:104px}
.image-workshop .files li .name{min-width:120px}
.image-workshop .format-comparison{flex-basis:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.image-workshop .format-comparison h3{grid-column:1/-1;font-size:16px;margin:8px 0}
.image-workshop .format-option{display:flex;flex-direction:column;gap:8px;min-width:0;background:#f2f4f5;padding:12px}
.image-workshop .format-option img{width:100%;height:120px;object-fit:contain}
#tool[data-tool="image-converter"] .image-stage{display:block}
#tool[data-tool="image-converter"] .image-settings>.grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
#tool[data-tool="image-converter"] .image-results{margin-top:24px}
#tool[data-tool="heic-to-jpg"] .image-stage{grid-template-columns:220px minmax(0,1fr)}
#tool[data-tool="heic-to-jpg"] .files{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#tool[data-tool="heic-to-jpg"] .files li{margin:0}
#tool[data-tool="heic-to-jpg"] .files li>img{width:100%;height:160px}
#tool[data-tool="circle-crop"] .cc-edit{grid-template-columns:minmax(300px,1.2fr) minmax(260px,1fr);gap:20px}
#tool[data-tool="circle-crop"] .preview-box{max-width:520px!important}
#tool[data-tool="circle-crop"] .preview-box canvas{width:100%;max-width:520px}
#tool[data-tool="meme-generator"] .mm-edit{max-width:none}
#tool[data-tool="meme-generator"] .preview-box{background:#e8ecee;min-height:240px;padding:24px}
#tool[data-tool="meme-generator"] canvas{max-height:65vh}
#tool[data-tool="video-to-gif"] .vg-edit{max-width:920px;margin:24px auto 0}
#tool[data-tool="video-to-gif"] .vg-edit video{max-height:420px!important;border-radius:4px!important}
#tool .image-capability{margin:16px 0;background:#f2f4f5;padding:16px;border-radius:4px}
#tool .image-capability summary{cursor:pointer;font-weight:600}
#tool .image-capability[open]>summary{margin-bottom:16px}
#tool .image-capability .grid{margin-top:16px}
#tool:has(.image-stage) .btn,#tool[data-tool="circle-crop"] .btn,#tool[data-tool="meme-generator"] .btn,#tool[data-tool="video-to-gif"] .btn{background:#182124;border-color:#182124;color:white}
#tool:has(.image-stage) .btn.ghost,#tool[data-tool="circle-crop"] .btn.ghost,#tool[data-tool="meme-generator"] .btn.ghost{background:white;color:#182124;border-color:#c8cfd3}
@media(max-width:800px){.image-workshop .image-stage,#tool[data-tool="heic-to-jpg"] .image-stage{grid-template-columns:1fr}.image-workshop .image-results{padding:14px}.image-workshop .format-comparison{grid-template-columns:1fr}.image-workshop .format-option{display:grid;grid-template-columns:88px 1fr}.image-workshop .format-option img{grid-row:span 2;height:88px}.image-workshop .format-option a{align-self:start}#tool[data-tool="image-converter"] .image-settings>.grid{grid-template-columns:1fr 1fr!important}#tool[data-tool="heic-to-jpg"] .files{grid-template-columns:1fr}#tool[data-tool="circle-crop"] .cc-edit{display:block}.image-workshop .image-empty{min-height:60px}#tool[data-tool="meme-generator"] .preview-box{padding:8px}}
.image-workshop .image-settings>.grid:has([name=format]){grid-template-columns:1fr!important}.image-workshop .image-stage{align-items:start}.image-workshop .image-results{min-height:220px}

body:has(.image-workshop) .hero h1,body:has(#tool[data-tool="image-to-base64"]) .hero h1,body:has(#tool[data-tool="circle-crop"]) .hero h1,body:has(#tool[data-tool="meme-generator"]) .hero h1,body:has(#tool[data-tool="video-to-gif"]) .hero h1{font-family:Arial,sans-serif!important;font-size:clamp(24px,2.2vw,32px)!important;line-height:1.15!important;letter-spacing:-.035em!important}

#tool.image-workshop,#tool[data-tool=image-to-base64]{border-color:#e7ebed}.image-workshop .drop,#tool[data-tool=image-to-base64] .drop{border-color:#d7dfe3}

#tool[data-tool=meme-generator] .meme-workspace{display:grid;grid-template-columns:280px minmax(0,1fr);gap:28px;align-items:start}#tool[data-tool=meme-generator] .meme-controls>.grid{grid-template-columns:1fr}#tool[data-tool=meme-generator] .meme-controls>.row{margin:20px 0}#tool[data-tool=meme-generator] .preview-box{margin-top:0}#tool[data-tool=meme-generator] .meme-canvas-panel{min-width:0}@media(max-width:800px){#tool[data-tool=meme-generator] .meme-workspace{grid-template-columns:1fr}.image-workshop .files li>img{width:72px;height:72px}.image-workshop .files li>.name{min-width:0;flex-basis:calc(100% - 90px)}}