.tool-panel-shell {
    margin-top: 20px;
}

.tool-panel-shell .tool-panel-toggle {
    gap: 10px;
    padding: 14px 20px;
}

.tool-panel-header-text {
    gap: 2px;
}

.tool-panel-title {
    font-size: 0.98rem;
}

.tool-panel-shell .frame-controls {
    padding: 20px;
}

.tool-panel-shell .extraction-settings {
    padding-top: 20px;
    padding-bottom: 20px;
}

.video-preview.video-preview--media-only {
    padding-bottom: 20px;
}

.frame-controls {
    gap: 10px;
}

.frame-controls-row {
    gap: 10px;
}

.btn-frame-control {
    padding: 10px 16px;
}

.frame-fps-control {
    gap: 4px;
}

.frame-fps-control input {
    padding: 10px 12px;
}

.frame-readouts {
    gap: 8px;
}

.frame-readout {
    padding: 6px 10px;
    font-size: 0.88rem;
}

.time-range-section {
    margin-bottom: 24px;
    padding: 18px;
}

.time-range-content.active {
    margin-top: 18px;
}

.time-range-display {
    gap: 10px;
    margin-bottom: 12px;
    padding: 10px 14px;
}

.range-actions {
    margin-bottom: 12px;
}

.btn-reset-range {
    padding: 7px 14px;
    font-size: 0.88rem;
}

.quality-slider-wrapper {
    gap: 6px;
}

.quality-slider-marks {
    margin-top: -2px;
}

.quality-display {
    margin-top: 2px;
    font-size: 0.88rem;
}

.frame-count-hint {
    margin-top: 4px;
    font-size: 0.82rem;
}

.settings-grid {
    gap: 18px;
    margin-bottom: 24px;
}

.setting-group {
    gap: 6px;
}

.setting-group label {
    font-size: 0.92rem;
}

.setting-group input,
.setting-group select {
    padding: 10px 14px;
}

.action-buttons {
    gap: 12px;
}

@media (max-width: 768px) {
    .tool-panel-shell .tool-panel-toggle {
        padding: 13px 16px;
    }

    .tool-panel-shell .frame-controls,
    .tool-panel-shell .extraction-settings {
        padding: 18px 16px;
    }

    .time-range-section {
        padding: 16px;
        margin-bottom: 20px;
    }
}