.svg-options,
.svg-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.svg-options {
    padding: 18px 20px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--card-bg);
}

.svg-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.svg-options input {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

.svg-workbench .panel-header {
    flex-wrap: wrap;
}

.svg-workbench .panel-body {
    padding: 16px;
    gap: 16px;
}

.svg-workbench button {
    padding: 9px 14px;
}

body[data-tool="svg_optimizer"] .secondary {
    background: var(--bg-alt);
    border: 1px solid var(--card-border);
    color: var(--text);
}

body[data-tool="svg_optimizer"] button[aria-pressed="true"] {
    border-color: var(--primary);
    color: var(--primary);
}

.svg-workbench select,
.svg-options select {
    padding: 8px 30px 8px 12px;
    font-size: 14px;
}

.svg-upload {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 14px;
    border: 1px dashed var(--card-border);
    border-radius: 8px;
    font-size: 14px;
}

.svg-upload input {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    font-size: 13px;
}

.svg-workbench textarea {
    width: 100%;
    min-height: 280px;
    height: 320px;
    padding: 14px;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    font: 14px/1.6 var(--font-mono);
    resize: vertical;
}

.svg-preview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    min-height: 320px;
}

.svg-preview figure {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.svg-preview figcaption {
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 10px;
}

.svg-canvas {
    flex: 1;
    min-height: 270px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow: hidden;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    background: repeating-conic-gradient(#e2e5e7 0% 25%, #fff 0% 50%) 0 0 / 16px 16px;
}

.svg-preview[data-background="white"] .svg-canvas {
    background: #fff;
}

.svg-preview[data-background="dark"] .svg-canvas {
    background: #192226;
}

.svg-canvas img {
    width: 100%;
    max-height: 270px;
    object-fit: contain;
}

.svg-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 14px;
    gap: 10px;
    background: var(--bg);
    border-radius: 8px;
}

.svg-stats span,
.svg-stats strong {
    display: block;
}

.svg-stats span,
.svg-note {
    color: var(--text-muted);
    font-size: 13px;
}

.svg-stats strong {
    font: 600 16px/2 var(--font-mono);
}

#svg-saving {
    color: var(--primary);
}

#svg-status,
#svg-action-status {
    font-size: 14px;
}

#svg-status[data-error="true"] {
    color: #b33a36;
}

body.dark-mode #svg-status[data-error="true"] {
    color: #ffaaa3;
}

body[data-tool="svg_optimizer"] [hidden] {
    display: none;
}

@media (max-width: 500px) {
    .svg-preview {
        grid-template-columns: 1fr;
    }

    .svg-canvas {
        min-height: 180px;
    }
}