.creation-tool-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.creation-tool-card .local-tool-free { font-size: 10px; font-weight: 400; color: var(--green); }
.image-tool-panel { padding: 28px; }
.image-tool-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 25px; }
.image-tool-heading h2 { font-size: 21px; }
.image-tool-heading p { color: var(--muted); font-size: 12px; line-height: 1.8; margin-top: 9px; }
.image-tool-local { color: var(--green); border: 1px solid var(--theme-success-line,#335347); background: var(--theme-success-soft,#1d322e); border-radius: 20px; padding: 7px 10px; font-size: 10px; white-space: nowrap; }
.image-tool-layout { display: grid; grid-template-columns: minmax(240px,.8fr) minmax(0,1.2fr); gap: 30px; }
.image-tool-settings { min-width: 0; }
.image-tool-upload { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 25px 12px; border: 1px dashed var(--line); border-radius: 10px; background: var(--bg); text-align: center; min-height: 150px; margin: 0; cursor: pointer; }
.image-tool-upload:hover, .image-tool-upload.drag-over { border-color: var(--accent); background: var(--theme-accent-soft,#262135); }
.image-tool-upload:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.image-tool-upload > span { font-size: 27px; color: var(--accent); margin-bottom: 10px; }
.image-tool-upload strong { color: var(--text); font-size: 13px; font-weight: 500; }
.image-tool-upload small { font-size: 10px; color: var(--muted); margin-top: 10px; line-height: 1.8; }
.image-tool-upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.image-tool-source-info { display: flex; gap: 5px; flex-direction: column; margin: 15px 0; }
.image-tool-source-info > span { font-size: 12px; overflow-wrap: anywhere; }
.image-tool-source-info small { font-size: 10px; color: var(--muted); }
.image-tool-source-info .link { align-self: flex-start; margin-top: 5px; }
#imageToolOptions { padding: 0; margin: 0; border: 0; min-width: 0; }
#imageToolOptions:disabled { opacity: .55; }
#imageToolOptions label { color: var(--text); }
#imageToolOptions label > small { display: block; color: var(--muted); font-size: 10px; margin-top: 8px; line-height: 1.7; }
.image-tool-dimensions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.image-tool-dimensions label { min-width: 0; }
.image-tool-lock { margin-top: 14px; }
.image-tool-scales { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.image-tool-scales .secondary { font-size: 11px; padding: 8px 11px; }
#imageToolQualityValue { float: right; color: var(--accent); }
#imageToolQuality { padding: 0; border: 0; accent-color: var(--accent); }
#imageToolBackground { width: 62px; height: 38px; padding: 4px; cursor: pointer; }
#imageToolProcess { margin-top: 24px; }
.image-tool-status { font-size: 12px; line-height: 1.8; margin-top: 15px; color: var(--muted); overflow-wrap: anywhere; }
.image-tool-status.is-error { color: var(--red); }
.image-tool-previews { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.image-tool-preview { margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.image-tool-preview figcaption { padding: 11px 14px; background: var(--panel2); display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; }
.image-tool-preview figcaption span { color: var(--muted); font-size: 10px; }
.image-tool-checker { display: grid; place-items: center; min-height: 190px; padding: 18px; background-color: var(--panel); background-image: conic-gradient(var(--panel2) 25%,transparent 0 50%,var(--panel2) 0 75%,transparent 0); background-size: 20px 20px; }
.image-tool-checker img { display: block; max-width: 100%; max-height: 260px; width: auto; height: auto; object-fit: contain; }
.image-tool-checker p { color: var(--muted); font-size: 11px; line-height: 1.9; text-align: center; }
.image-tool-download { display: block; text-align: center; }
.image-tool-previews > .fine-print { margin: 0; }
@media (max-width: 900px) { .image-tool-layout { grid-template-columns: 1fr; gap: 24px; } .image-tool-previews { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); } .image-tool-download,.image-tool-previews > .fine-print { grid-column: 1 / -1; } }
@media (max-width: 640px) { .creation-tool-grid { grid-template-columns: 1fr; } .image-tool-panel { padding: 19px; } .image-tool-heading { flex-wrap: wrap; gap: 12px; } .image-tool-previews { display: flex; } .image-tool-checker { min-height: 160px; } .image-tool-preview figcaption { flex-wrap: wrap; } .image-tool-checker img { max-height: 210px; } .creation-tool-card .local-tool-free { font-size: 0; } }