/* Small component overrides kept separate from the compact base stylesheet. */
.tool-card > span:nth-child(2) { min-width: 0; }
.tool-card small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.base64-workspace { max-width: 720px; margin: auto; display: flex; flex-direction: column; gap: 12px; }
.base64-workspace h2, .base64-workspace p { text-align: center; margin: 0; }
.base64-workspace p, .base64-workspace label { color: var(--muted); font-size: 14px; }
.base64-workspace textarea { width: 100%; min-height: 180px; resize: vertical; border: 1px solid var(--line); border-radius: 9px; padding: 12px; font: 13px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.base64-workspace img { max-width: 100%; max-height: 360px; object-fit: contain; margin: 8px auto; border: 1px solid var(--line); border-radius: 9px; }
.base64-workspace .primary, .base64-workspace .secondary { align-self: center; }
.batch-results { max-width: 720px; margin: 22px auto 0; text-align: left; }
.batch-result { display: grid; grid-template-columns: minmax(0, 1fr) 100px auto; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding: 11px 4px; font-size: 14px; }
.result-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 650; }
.result-message { color: var(--muted); font-size: 13px; }
.batch-result.failed .result-message { color: #c2410c; }
.result-download { padding: 7px 11px; font-size: 13px; }
@media (max-width: 520px) { .batch-result { grid-template-columns: minmax(0, 1fr) auto; } .result-message { grid-column: 1 / 2; } }
.color-picker-workspace { max-width: 900px; margin: auto; }
.color-picker-empty { min-height: 310px; border: 2px dashed #aac8f4; border-radius: 16px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: #fbfdff; }
.color-picker-empty h2 { margin: 10px 0 0; }.color-picker-empty p { max-width: 460px; margin: 4px 20px; color: var(--muted); }.color-picker-empty .primary { margin-top: 15px; }
.color-image-stage { position: relative; width: fit-content; max-width: 100%; margin: auto; background: #f1f5f9; line-height: 0; border-radius: 10px; overflow: hidden; }.color-image-stage canvas { display: block; max-width: 100%; height: auto; cursor: crosshair; }
.color-cursor { position: absolute; display: none; width: 20px; height: 20px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #172033; transform: translate(-50%,-50%); pointer-events: none; }.color-cursor.visible { display: block; }
.color-picker-editor { display: flex; flex-direction: column; gap: 20px; }.color-readout { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; }.selected-swatch { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 8px; background: #000; }.color-readout strong,.color-readout span { display: block; }.color-readout span { color: var(--muted); font-size: 13px; }.color-readout .secondary { margin-left: auto; }.color-picker-editor h3 { margin: 0 0 2px; }.palette-note { margin: 0 0 10px; color: var(--muted); font-size: 13px; }.palette { display: flex; overflow: hidden; border-radius: 9px; }.palette-swatch { height: 62px; flex: 1; border: 0; cursor: pointer; transition: transform .15s; }.palette-swatch:hover { transform: scaleY(1.1); }
@media (max-width: 520px) { .color-readout { flex-wrap: wrap; }.color-readout .secondary { margin-left: 0; } }
.metadata-table { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; text-align: left; }
.metadata-table > div { display: grid; grid-template-columns: minmax(145px, .7fr) minmax(0, 1.3fr); border-bottom: 1px solid var(--line); }
.metadata-table > div:last-child { border-bottom: 0; }.metadata-table span { padding: 10px 13px; overflow-wrap: anywhere; font-size: 14px; }.metadata-table span:first-child { background: #f7faff; color: var(--muted); font-weight: 650; }
@media (max-width: 520px) { .metadata-table > div { grid-template-columns: 1fr; }.metadata-table span { padding: 7px 11px; } }