.free-tool-page:has([data-extra-tool]) .tool-hero h1 { max-width: 28ch; font-size: clamp(1.7rem, 4vw, 3.5rem); line-height: 1.15; letter-spacing: -.03em; }
.free-tool-page:has([data-extra-tool]) .tool-hero { padding-top: 24px; }
.free-tool-page:has([data-extra-tool]) #tool-workspace { scroll-margin-top: calc(var(--header-height, 120px) + 20px); }
.tool-jump { display: inline-flex; align-items: center; min-height: 44px; margin-top: 20px; padding: 10px 18px; border: 1px solid currentColor; color: var(--text-blue); font-weight: 750; text-decoration: none; }
.tool-jump:hover { text-decoration: underline; text-underline-offset: 4px; }
.extra-tools { padding: clamp(18px, 3vw, 40px); }
.free-tool-page:has([data-extra-tool]) .tool-workspace-head { align-items: start; flex-wrap: wrap; gap: 16px; }
.free-tool-page:has([data-extra-tool]) #tool-status { flex: 1 1 240px; max-width: 100%; overflow-wrap: anywhere; text-transform: none; }
.extra-tools [hidden] { display: none !important; }
.extra-tools fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.extra-legend { margin-bottom: 18px; padding: 0; color: var(--text-color-secondary); font-size: .9rem; }
.extra-tools .tool-inline-controls { align-items: end; }
.extra-tools label { display: block; margin-bottom: 12px; line-height: 1.5; }
.extra-tools .tool-check { display: flex; align-items: center; }
.extra-tools :is(input, select, textarea) { max-width: 100%; }
.extra-tools input[type="file"] { width: 100%; padding: 12px; }
.extra-tools input[type="file"]::file-selector-button { margin-right: 12px; padding: 10px; border: 1px solid currentColor; background: var(--card-bg); color: var(--text-color); font: inherit; }
.extra-tools .tool-textarea { min-height: 180px; max-height: 520px; resize: vertical; margin-bottom: 20px; }
.extra-tools .tool-textarea--code { font: 400 .95rem/1.55 ui-monospace, "SFMono-Regular", Consolas, monospace; tab-size: 2; }
.extra-tools[data-extra-tool="image-converter"] :is(label[for="extra-output"], #extra-output) { display: none; }
.extra-tools[data-extra-tool="image-converter"] #extra-preview { padding: 8px; }
.extra-hint { color: var(--text-color-secondary); font-size: .9rem; line-height: 1.6; }
.extra-notice { margin: 0 0 24px; padding: 16px 20px; border-left: 4px solid var(--primary-red); background: var(--bg-color); line-height: 1.6; }
.extra-result { margin-top: 28px; padding-top: 24px; border-top: 2px solid var(--text-color); }
.extra-result h2 { font-size: clamp(1.4rem, 3vw, 2.3rem); line-height: 1.15; overflow-wrap: anywhere; }
#extra-summary { white-space: pre-line; overflow-wrap: anywhere; }
#extra-preview { margin: 20px 0; padding: 24px; border: 1px solid var(--border-color); overflow-wrap: anywhere; }
#extra-preview img { display: block; width: auto; height: auto; max-width: 100%; max-height: 360px; margin: auto; object-fit: contain; }
#extra-preview .extra-sample-normal { margin: 0 0 16px; font: 400 16px/1.6 Arial, sans-serif; color: inherit; }
#extra-preview .extra-sample-large { margin: 0; font: 700 24px/1.4 Arial, sans-serif; color: inherit; }
.extra-result .tool-textarea { color: var(--text-color); background: var(--card-bg); }
@media (max-width: 600px) {
    .extra-tools .tool-button-row > button { flex: 1 1 150px; min-width: 0; white-space: normal; }
    .extra-tools .tool-inline-controls { display: grid; grid-template-columns: minmax(0, 1fr); }
    .extra-tools .tool-inline-controls > * { min-width: 0; width: 100%; }
}
